Web Accessibility: How to Enable Access for Everyone

Home > Blogs > Web Accessibility > Web Accessibility: How to Enable Access for Everyone
Posted by: Sein Tun
Category: Web Accessibility, Web Development
web accessibility blog banner

Accessibility is seldom discussed in today’s web development and design. The web is fundamentally designed to work for all people, regardless of their hardware, software, language, location or ability, enabling the access to people with a diverse range of hearing, movement, sight, and cognitive ability. Despite this, many engineers/developers fail to develop and maintain their project without having considered aspects of web accessibility before.

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

-Tim Berners-Lee, W3C Director and inventor of the World Wide Web

In this article, we will discuss:

  • The importance of web accessibility
  • Tips and tricks to an accessible website
  • Ways to audit web accessibility
  • Resources for further learning

Introduction

Web accessibility (a11y) is a practice where websites, tools, and technologies are designed and developed in a way that people with disabilities can use them.

Importance of web accessibility

Have you ever read a book without a table of contents, indentations or proper usage of headings to differentiate the order of hierarchy? It would feel like reading a wall of text without knowing when the paragraph will end. Without an accessible web page, a person with a visual disability feels the same way when using a screen-reader like NVDA, JAWS. These screen readers follow Web Content Accessibility Guidelines (WCAG) with guidelines for developers to ensure web contents are accessible under four principles:

1. Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

But how?

  • Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • Imagine your image is not loaded but the text alternatives can explain what the missing image is for the visually impaired person through the screen reader.

2. Operable

Where user interface components and navigation must be operable.

But how?

  • Make all functionality available from a keyboard to navigate your page.
  • Try pressing Tab key to navigate through the page elements without jumping all over the entire page. The correct flow of navigating should be from top-left to bottom-right and menu to menu.

3. Understandable

Information and the operation of user interface must be understandable.

But how?

  • Make text content readable and understandable by identifying and explaining any unusual words or phrases with a definition.
  • If someone responded to you with “CID”, would you know what it means? It could be “Consider it done”, “Crying in disgrace” or any wild word you can think of.

4. Robust

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies like NVDA, JAWS, or ChromeVox.

But how?

  • Maximize compatibility with current and future user agents, including assistive technologies.
  • A quality web page should be parsable with the corresponding start and end tags, unique IDs, well-organized usage of the name, role and value to determine the current state for the assistive technologies to function as intended.

Note: Did you notice I structured and listed my paragraphs with numbers and bullet-points? If I removed all this formatting, you might still be able to read but it’s much harder to read.

Fun Facts:

An employee from Digital Equipment Corporation (DEC) was referred to as “S12n” because his last name, “Scherpenhuizen” was too long to be an account name. The use of such numeronyms became part of DEC corporate culture and followed by “i18n” for “Internationalization” and “k8s” for “Kubernetes”.

Accessibility is denoted as “a11y” because there are 11 letters between the “A” and “Y” in the word “Accessibility”, a pattern known as a Numeronym.

Tips and Tricks

Your inner voice is screaming, “Okay, Okay. I know accessibility is important, but how do I start implementing these techniques?”. We would discuss that in our next section “Tips and Tricks”, which is about making your web page into an accessibility rock star.

1. Make Sure Your Site Is Keyboard-Friendly

I repeat, make sure we can use your site with the keyboard entirely. This step is the most important to make a website accessible because many assistive technologies rely on keyboard-only navigation.

The most common method of navigation using the Tab key to jump between areas on a page with ‘keyboard focus’. These elements include links, buttons, and forms.

2. Make Sure All Content Is Easily Accessible

You can do this by using ARIA landmarks tags that allow you to add content in order as appear on the page. One of the easiest ARIA features to implement that provides significant immediate benefits to screen reader users, is landmark roles. To use them, simply add a relevant role attribute to an appropriate container within your HTML allowing screen reader users to quickly jump to that section of the page. Some widely used ARIA landmark roles are:

● role=”banner”
● role=”navigation”
● role=”main”
● role=”form”
● role=”search”

If a role is used more than once on a page, consider aria-label attribute in order to distinguish between two regions. For example,

● <div role=”navigation” aria-label=”Main menu”>
● <div role=”navigation” aria-label=”User menu”>

3. Choose Your Colors Carefully And Wisely

Be careful when you are adding a wide array of colors to make your web pages visually appealing because some peoples may perceive colors in unique ways. There are plenty of online tools you can use to find and test color combinations. WebAIM has one option. We also like Contrast Checker because it gives you a score in real-time. Do not use color alone to convey information. For example, use an asterisk in addition to red color to indicate required form fields, and use labels to distinguish areas on graphs. WARNING: You also want to avoid clashing colors that could cause eye-strain like this one.

Fun Facts:

Red and Pink are Different Colors; FALSE

In WCAG, when we say color, we refer to hue. Red and pink are the same hue with different lightness.

This is important because coding things in dark red and light green would be differentiable, even to someone with color blindness, in the same way dark red and light pink can be differentiated even when presented in black and white.

Audit a page’s accessibility

After having a comprehensive understanding of accessibility, you might want to check if a page is accessible by running audit tools. There are many accessibility audit tools like Dynomapper, A11Y Compliance Platform, and PayPal’s AATT (Automated Accessibility Testing Tool). One of my favorite and fastest tools is Chrome DevTools Audits.

The process is as simple as going to the URL you want to audit and click Audits tab within the DevTools after pressing CMD + Option + J (Mac) or Ctrl + Shift + J (Windows). Click HERE to read more.

Conclusion

All WCAG Success Criteria are written as testable criteria for objectively determining if content satisfies them. Testing the Success Criteria would involve a combination of automated testing and human evaluation. The content should be tested by those who understand how people with different types of disabilities use the Web. As a developer, we should try our best to enable our web content to be easily accessible by a wide range of people.

Resources

For more information on WCGA Techniques, you can check the links below.

W3C Web Design Accessibility
Google Developers Accessibility Fundamentals
Mozilla Developer Network’s MDN Understanding the Web Content Accessibility Guidelines

Author: Sein Tun

By using this site, you agree with our use of cookies. Privacy Policy