An Overview of Web Accessibility

The essence of a webpage goes beyond its attractiveness or aesthetically pleasing appearance; it includes its functionality and how various users can access/use the website without being limited by their disabilities. In the words of Tim Berners-Lee W3C (Director and inventor of the World Wide Web),

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

It is therefore essential to consider certain factors/elements when developing a web page to ensure that it is all-inclusive.

This article will expose you to the basics of web accessibility and factors to consider when building an all-inclusive app.

What is Web Accessibility?

The World Wide Web Consortium (W3C) define web accessibility as “the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities”.

In very simple terms, web accessibility (also known as a11y) involves building a website that is useable by everyone irrespective of their disabilities, following certain guidelines or principles. These disabilities could be a visual disability, a cognitive disability, an auditory disability, and so on.

Why is this important?

As mentioned earlier, the hallmark of a web page is its usability and how it enhances the overall user experience. Building an all-inclusive/accessible website helps achieve this and expands the website audience range reached as it is open to all kinds of users regardless of their disabilities.

Design tips for accessibility

Aesthetically looking web pages are amazing, but they must be designed to accommodate everyone irrespective of their disabilities. Here are some helpful design tips that will aid you when designing your web page — but they are just the tip of the iceberg!

• Colour Contrast: While colors add beauty to your webpage, they could be a problem for people who suffer from color blindness. Hence, it is important to include labels and icons when conveying information rather than using just colors. For instance, instead of showing a failed processing with just a red color, show an icon or label to indicate failure. Also, ensure that there is enough contrast in text and image text. The WCAG has set specific parameters for contrast ratios that must be followed to achieve the basic requirements of accessibility. Check out the WCAG guidelines to know the dos and don’ts.

• Layouts: A well-structured layout improves users’ experience in general. Having to go through many hurdles to get important information on a website can be frustrating. It is essential that the layouts are organized and logical and that information follows a proper sequence to aid understanding. Here are some tips on creating accessible layouts.

• Typography: It is important to use a legible and properly sized font. The wrong font would pose difficulties for readers as it could be distracting or illegible. Title fonts should be bolder and distinguishable. Also, use appropriate text spacing.

But, it must be understood that accessibility goes beyond a few tips; let’s consider the whole range of considerations we must think of.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Understanding the Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) is an internationally recognized standard created by the World Wide Web Consortium (W3C).

The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. These guidelines are divided into four principles (POUR), namely:

Perceivable:

Users should be able to perceive and understand the contents and information contained in the website via their senses. Users’ ability to perceive varies based on their disabilities: visual, touch, or sound.

Here are the WCAG guidelines for building a perceivable web page:

1. Text Alternatives: Provide text alternatives for non-text content like images, audio, and videos so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language.

2. Time-based Media: Provide alternatives for time-based media like video and audio content. Audios should be transcribed to accommodate those with hearing ailments, and Videos should include captions synced with the audio.

3. Adaptable: Create content that can be presented differently (for example, with a simpler layout) without losing information or structure. Contents should be well structured and not be restricted to a single display orientation such as portrait or landscape

4. Distinguishable: Make it easier for users to see and hear content, including separating foreground from background. Include labels and icons alongside colors when conveying information, and use appropriate text size and fonts to convey information.

Operable

Users should be able to utilize all interactive website elements, from navigation to selecting a link to playing and pausing video and audio.

Here are the WCAG guidelines to achieve this:

1. Keyboard Accessible: Make all functionality available from a keyboard. Include keyboard shortcuts allowing users to access content without needing a mouse. Ensure that the shortcuts are kept simple and do not require many keystrokes.

2. Enough Time: Provide users enough time to read and use the content. Contents with time constraints should be adjustable; users should be able to pause, stop and extend time limits.

3. Navigable: Provide ways to help users navigate, find content, and determine where they are. Information should follow a rational sequence, use appropriate titles to introduce topics, and provide links to take users to information within the content.

Understandable

Users should be able to understand all content on the website as well as the operation of the user interface.

Here are the WCAG guidelines for achieving a more understandable website:

1. Readable: Make text content readable and understandable. Keep the language simple, and avoid technical jargon. Provide meanings of unusual words, and always show the full meaning of abbreviations.

2. Predictable: Make web pages appear and operate in predictable ways. The navigation links and pages should be placed logically to aid understanding.

3. Input Assistance: Help users avoid and correct mistakes. Highlight errors and provide suggestions for corrections. Include labels and clear instructions to help users minimize errors.

Robust

Users should be able to access content with their chosen technology, and the website should work across platforms, browsers, and devices to suit users’ needs. To achieve this, the WCAG guideline maximizes compatibility with current and future user agents, including assistive technologies. Use start and end tags when required in your HTML code, and avoid duplicate IDs across elements and duplicate attributes within the same HTML tag.

Conclusion

A website is only as valuable as the number of individuals that use it. This is the essence, that it can reach more audience. There are various categories of users with varying disabilities, and it is only reasonable that a webpage is accommodating to these disabilities to both improve users’ experience and expand the range of its audience.

A TIP FROM THE EDITOR: You can find ways of testing for accessibility errors in our Writing end-to-end tests in 2021 article.