Building ADA-Compliant Websites Part 1: Top 3 Most Common Accessibility Issues

In this 3-part series, we will explore how to build websites that are compliant with the “Americans with Disabilities Act” (ADA) of 1990.

Recently we helped one of our clients to make his website ADA compliant. This project inspired us to do more research to learn more about the ADA and what impact it has on our website customers and others. We want to share some most common accessibility issues.

So, what does ADA compliant mean for websites?

The ADA is meant to ensure that people with disabilities have the same opportunities to explore and use the Internet as everyone else. Basically, this means that your website needs to be accessible to people who have disabilities that affect their hearing, vision or physical abilities.

🧏🏽 👩🏿‍🦯 👩‍🦼

What if my website is not ADA compliant?

You could face a lawsuit if a person with a disability claims they cannot access or use your website.
ADA compliance applies to any business with 15 or more employees. If you’re an e-commerce website it puts you at a much higher risk of being sued.
Big sites like Target and Amazon were sued and lost! They had to pay millions to get their sites up to code.

Let’s get started with Part 1: What are the most common accessibility issues?

First let’s check some statistics:
7% of working-age adults in the US, UK, and Canada have “severe dexterity difficulties.” This would make them “unlikely to use a mouse and rely on the keyboard instead.”

Image from http://www.bulbman.art – Free Vector Art

Users with severe visual disabilities use software called a screen reader, which is software that reads out content on the screen as synthesized speech. Like sighted users, non-sighted users want to be able to scan pages for interesting information, so the screen reader has keyboard shortcuts for navigating via headings and links, and relies on keyboard focusable elements for interaction.

2.3% of American people (of all ages) have a visual disability, not all of which would necessarily warrant the use of a screen reader. In 2016, Addy Osmani (Engineering Manager at Google working on Chrome) estimated actual screen reader usage to be around 1 to 2%. If we factor these users in with our mobility-impaired users and our power users, keyboard usage adds up to a sizeable percentage of the global audience.

Back to the 3 Most Common Accessibility Issues
We checked the “Top 100 Most Visited Websites by Search Traffic” (https://ahrefs.com/blog/most- visited-websites/) and we found the most common Accessibility Issues.

RATINGS
We will rate each issue by conformance level: A, AA, or AAA.
✓ A = lowest level of conformance
✓ AA = midrange level of conformance
✓ AAA = highest level of conformance

These ratings are based on the impact they have on design or visual presentation of the pages, and whether they meet the needs of different groups and situations.

This rating system is part of WCAG 2.0, the wide ranging recommendations for making Web content more accessible, devised by the W3C, the pre-eminent global authority on worldwide web and Internet development topics.

Starting with the first three most Common Accessibility Issues today:

1. No option to skip repeated content – Rating: AAA

Context: Manually maneuvering through content takes significantly longer on assistive devices.
Providing a way to skip directly to relevant content makes browsing significantly faster.

Image from http://www.bulbman.art – Free Vector Art

While this “skip link” should be present and visible, it can be positioned off-screen to hide it from any user that isn’t using keyboard navigation. It can then be moved into the visible screen upon focus.

Support your users in getting to your content as quickly as they can, by offering them ‘skip to main content’ links.

How to fix it: The Skip Link idea is this – put a link at the top of the page that allows keyboard users to jump over the navigation links and land on the main content of the page. For screen reader users, this provides help with the structure of the page. A way to jump right to the main content.

How does this help? Sample code for doing this is as follows:

Don’t forget to Test: Using just the Tab key you should be able to see the “Skip to main content” link.

2. Element not highlighted on focus – Rating AA

Provide Visible Focus for keyboard users to tell them where they are on the page

Context: Some computer users are physically unable to use a mouse. Others prefer using the keyboard because they feel it’s more efficient. Computers in general, and web browsers specifically, can be operated with the keyboard alone – no mouse.
In web browsers, users can use the Tab key to jump between focusable elements like links, form fields, and any other content that has been added to the tab order (with the HTML tabindex attribute). However, it is often difficult for keyboard users to tell where they are on the page.

Image from http://www.bulbman.art – Free Vector Art

Use Cases: When the user is navigating with a keyboard, they always want the focus to be visible.

How to fix it: With keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus. Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.

Use the :focus pseudo class in CSS for styling an element that is currently targeted by the keyboard, or activated by the mouse. Note that as, buttons, inputs, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5.

Here is an example:

element:focus{
outline: 2px solid #f9c642;
outline-offset:2px;
}

How does this help? Some examples to style the focused components:

• When HTML text input fields receive focus, browsers display a blinking vertical bar at the
  insertion point in the text field.
• When HTML links receive focus, they are surrounded by a dotted focus highlight rectangle.
• When img links receive focus, they are surrounded by a solid highlight border.

Don’t forget to Test: Using just the keyboard, try using the Tab key to navigate through the page. You should be able to tell where you are at all times

3. Link text used for multiple destinations – Rating AAA

Context: The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

Image from http://www.bulbman.art – Free Vector Art

The same link text is used for links going to different destinations. Users might not know the difference if they are not explained.

If the destination page is the same, this is not an issue. If the destination pages are not the same, make sure the links can be distinguished by their link texts or WAI-ARIA labels (‘aria- labelledby‘ or ‘aria-label‘) alone to make the difference clear to all users.

Use cases: A large group of people with intellectual disabilities (ID) may be in need of assistive technology with the primary goal of improving their functioning and independence, and thereby promoting their well-being.
Assistive technology products are any external products including devices, equipment, instruments or software. Assistive technology can improve the quality of life for people with impairments, allowing them to be more included and participative in society. One example of assistive technology is text-to- speech (TTS) software which is designed to help users who have difficulties reading standard script

How to fix it: Describe the purpose of a link using the aria-label. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelled by attribute should be used instead of aria-label.

How does this help? Providing a descriptive text label lets a user distinguish the link from links on the Web page that lead to other destinations. It helps the user determine whether to follow the link. In some assistive technologies, the aria-label value will show in the list of links instead of the actual link text.

The aria-label, aria-labelledby, and aria-describedby attributes can be used with:

• interactive elements like a (when the href attribute is present), audio and video (when the controls attribute is present), input (unless they are of type=”hidden”), select, button, and textarea elements that have a landmark role – either implicit (header, footer, main, nav, aside,
• section, and form) or explicitly set via the role attribute elements that have an explicit widget role applied using the role attribute – there are 27 widget roles in ARIA 1.1, including dialog, slider, progressbar, and tooltip iframe and img elements

If you use aria-label, aria-labelledby, or aria-describedby with any other elements (like div, span, p, blockquote, or strong etc.), they generally won’t work across all browser/assistive technology combinations.

Here is an examples:

<a id='p123' href="news.html" aria-labelledby="p123 headline">Read more...</a>
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>

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

Resources:

• Web Content Accessibility Guidelines 2
• https://www.w3.org/TR/using-aria/
• https://css-tricks.com/almanac/selectors/f/focus/
• https://www.microsoft.com/en-us/accessibility/#Research%20
• https://css-tricks.com/almanac/selectors/f/focus-visible/

Stay tuned for the next article in the series: Building ADA-Compliant Websites / PART 2: THE MOST COMMON ACCESSIBILITY ISSUES