Make your website ADA compliant (checklist)

Making your website a convenient place for everyone means covering the broader audience of Internet users and providing customer satisfaction. We have already talked about a11y accessibility, WCAG 2.0, how to check whether your site is accessible and how to make it accessible for users with disabilities. Today we want to continue this topic and focus on ADA compliance for websites and the three possible levels of conformance.

You may mistakenly think that there are not many completely deaf or blind people among your target audience, and your website can ignore them without any loss. However, web accessibility requirements apply to many more issues. ADA compliance also helps short-sighted people (like me), far-sighted people, and many other users with more common limitations. All kinds of users — and you — will benefit from making your website ADA compliant. To find out what ADA compliance for websites is as well as why and how to make your web resource meet at least level A conformance.

What is ADA (the Americans with Disabilities Act)?

The Americans with Disabilities Act (ADA) is a civil rights law signed by George H. W, Bush on July 26, 1990. This law forbids discrimination against people with different forms of audial, visual, motor, and other disabilities and provides equal opportunities for them to access public services and places, including accommodations, transportation, and employment.

In 1991 the ADA National Network was created of 10 regional ADA centers across the USA. Its representatives provide consultations and training in-person and via emails, phone calls, podcasts, webinars, and web courses. They cater to both people with disabilities who are protected under the ADA and organizations whose duties under the ADA are aimed at meeting the needs of disabled people.

What is WCAG (Web Content Accessibility Guidelines)? How WCAG is connected with ADA?

While ADA covers all aspects of life and its requirements cover wheelchair ramps, sound cues on crosswalks, and so on, the WCAG covers in detail only those things related to making the Internet more accessible for people with disabilities and its requirements relate solely to web content improvements, which we will focus on further in this article.

What are A, AA, and AAA levels of conformance?

The three levels of conformance express the degree of website accessibility, where A is the lowest and AAA is the highest level. For each web content accessibility guideline there is a success criterion that is testable, so it’s possible to define whether a web page managed to meet the criterion at one of the three levels of conformance.

This means that if your website meets all success criteria for level AAA, it is considered to be highly accessible and the widest audience of users with disabilities of a different kind can use your website content while meeting level A is the minimum to make your website ADA compliant and accessible.

ADA compliance website checklist

Is your website ADA compliant? Check what level your website meets and which features should be improved.

Level A conformance (lowest level) checklist

• ALT text for images

As visually impaired users can’t see your images, provide alternative text that is able to be read by screen readers. Describe what is depicted in illustrations and the purpose of captchas, input fields, and other non-text content.

• Alternatives for pre-recorded audio/video

Write text transcripts, captions, or subtitles for all audio and video. For video-only media record an audio track with an audio description.

• No auto-playing audio

Let your users, not you, decide when to start listening to your audio, or at least let them stop and pause automatically playing audio and control its volume separately from the overall volume system.

• Color along with other indicators

Design your web pages with color-blind people in mind and don’t make color the only means of conveying information. For example, if you make link anchors colored to stand out from the rest of the text, don’t rely solely on color and underline them as well. However, don’t underline any other text that doesn’t provide a link, so as not to mislead users.

• Instructions for user inputs

Search boxes, web forms, captchas, and other fields that require user input should be provided with labels and guidance.

• Input error identification

Information that users input often contains mistakes and typos, the most common of which can be detected and identified automatically. Help your users figure out why they can’t reach a needed result and what type of error they have made. Put error explanations specifying the error type near the error location.

• Content fully accessible with a keyboard

Users with visual and motor impairments find it hard or impossible to use a mouse and touchscreen, and often a keyboard is a solution. Make sure your whole website can be operated and navigated with the keyboard only. Also, avoid timed keystrokes.

• User controls for time-limited content

If you set up time limitations for filling forms or for other functions, allow your users to extend a time limit or turn it off before it begins or before it expires.

• User controls for moving, blinking, or scrolling content

Give users an option to stop, pause, or hide content that automatically starts moving for more than 5 seconds, including self-updating content like real-time sports scores.

• Option to skip repeating content

Add a hyperlink “Skip to…” to the header or provide another option that allows users to bypass blocks of repetitive content. This will improve website navigation.

Level AA conformance (sufficient level) checklist

• Captions for live audio/video

While level A requires captions only for pre-recorded audio and video content, which is easy to provide, then level AA, being more advanced, requires text alternatives for video streaming and broadcasts. Of course, it’s hard to transcribe quickly in real-time. However, if you are live streaming a speech at a ceremony or a seminar, then you probably have a prepared text that the presenter plans to deliver. So you can use it on your website to help users with auditory impairments.

• Audio description for pre-recorded video

Record a soundtrack with an audio description and place a link to it near the original video content. This helps people who can’t see but can hear understand what is going on in your video.

• Contrast ratio set to at least 4.5:1

A ratio of contrast between your text and background should be no less than 4.5:1. Actually, high contrast is healthy for all users, but some of them with poor sight need a stronger contrast for your text to make it readable.

• Resizable text up to 200%

Users with bad sight may need to make your text bigger to be able to read it. Make sure your text can be easily resized (don’t confuse this with zoomed) in all browsers to 200% and more without a need for horizontal scrolling and without losing any content and function.

• No text or images

When you use text as a picture instead of simple text, it can’t be interpreted by screen readers, becomes blurred when resizing, and takes longer to load. That’s why you should avoid using text over images on your website.

• Several ways of navigation

Offer a variety of ways to navigate through your website. All of your users will appreciate having a choice to access your pages the way they like. You can put a navigation menu, search bar, and “skip to” option mentioned in level A on every web page.

• Clear headings and labels

Use labels for web components (web forms, search fields, sidebar elements) to define their purpose. Use consistent, clear, and informative headings and subheadings that accurately describe topics to which they belong to help users with screen readers skip between headings and for better overall navigation.

• Input error suggestions

For level, AA is not enough to just identify an error. You should provide users who have made an error in their input with suggestions on how correct an error and solve the issue.

• Input error prevention for sensitive data

Reduce the risks of errors where users have to input financial, legal, and other sensitive data. You can pass this ADA requirement for websites by implementing reversible web form submitting, checking data for mistakes, letting it be corrected, and adding final user confirmation.

• Consistent menus and buttons

For consistent navigation, place menus and other elements that repeat through many pages in the same page location and in the same order.

• Consistent identification of the same elements

The same image, icon, button, or other elements on your website may have different meanings when occurring in different contexts. In this case, they require different labels and text alternatives for each same element appropriately and consistently. 

• Visible keyboard focus

The keyboard focus indicator should be clearly visible at all elements on all interfaces. You can use an underline, border, or other technique to meet this ADA requirement for websites.

• Identified language change

This ADA requirement refers to multilingual websites. If your web page contains pieces of the content presented in a language different from the main site’s language, then these page sections should be identified with a language attribute in the code. This allows assisting technologies like screen readers to determine the change in language and interpret all the content properly for users.

Level AAA conformance (highest level) checklist

• Sign language for pre-recorded audio/video

Make your pre-recorded audio and video with audio accessible for deaf users. To achieve this, record a video-only with a sign language interpreter and place it or a link to it next to the original content.

• Contrast ratio at least 7:1

While ADA requirement for level AA is a contrast ratio between text and background of at least 4.5:1, for the highest level AAA of conformance it is stronger - 7:1. The exception is large-scale text, images of large-scale text (which can have a ratio of 4.5:1) and text that serves only a design purpose.

• No background sounds in an audio

Good quality audio provides a good user experience for all audiences. To make your website ADA compliant your prerecorded audio content containing speech (if it is not a song) should have no background noise or other sounds. If it does, it should be at least 20 dB lower than the foreground sound.

• No time-limited content

While a requirement regarding timing for level A was providing options for users to change or turn time limits off, at level AAA you set no time limits at all. The exception could be live streaming or content that displays real-time events, like auction bidding or match scores.

• No interruptions

Let site visitors interact with your website in a natural way and don’t interfere with their experience through spontaneous pop-ups and other interruptions unless it is a safety warning.

• Restored user data after re-authentication

In some cases, for security reasons, you may ask users to re-authenticate their identity after a session expires (remember about providing user controls for time limits.) Restore user’s activity after re-authentication without losing shopping cart contents, input into web forms, or any other data, so that users can continue from where they left off.

• No flashing content

Flashes can harm the eyes and mental health of some users. Make sure your web pages don’t contain content that flashes more than 3 times per second.

• Explanations of abbreviations and unusual words

Try to avoid using abbreviations, acronyms, and unusual words and phrases like idioms and jargon. If you can’t, then explain their meaning in the text (in brackets or without) or put a link to the definition on the footnote or another page.

• Explanations to hardly pronounced words

Some words like heteronyms (which are spelled identically but have different pronunciations and meanings) are ambiguous and not clear for users until they are sounded out correctly. Prevent screen readers and users from mispronouncing and misunderstanding your content. Avoid these words, or provide a phonetic transcription, audio record, or link to a pronunciation guide.

Sum-up

Provide more than one way of presenting your content to allow users to perceive it with more than one sensory channel. Offering a variety of options is great for UX regardless. Allow your users to choose the most convenient way for them, or perhaps the only possible way they can interact with your website, and win their gratitude.

Our web development experts know how to make your web resource meet requirements from any level of conformance. Contact us to make your website ADA compliant and accessible for users with disabilities.