ADA Website Compliance Checklist. Accessibility Guidelines. WCAG 2.1

Have you ever asked yourself: "is my website ADA compliant?" If you have, then you are not alone. Let us walk you through as to what an ADA compliant website should be like and the functionality it must have in order to reach all of your potential users, avoid any possible lawsuits and minimize reputational risk.

Our last articles on the issue of ADA compliance discussed why it is reasonable to consider designing an ADA compliant website, as well as the most recent and high-profile ADA Website Compliance Lawsuits.

The current article includes ADA website compliance checklist and lists all WCAG 2.1 Accessibility Guidelines for 2018.

The Americans with Disabilities Act

The Americans with Disabilities Act was published in 1990. It's a civil rights law that prohibits discrimination of people on the basis of their disabilities. It also encourages organizations, institutions, businesses and other establishments to provide accommodations to people with disabilities so they can have the same level of access to services as everyone else. The law was later amended in 2008 to fit the conditions of modern society. The amendment broadened the term "disability", extending the act's protection to a larger demographic.

ADA Compliance and Accessibility Checklist

The ADA also applies to website accessibility. Hence the term ADA Website Compliance. With the advancements in web technologies, people now needed to put forth some sort of regulations on the approach of developers and designers to creating websites available to everyone without any restrictions.

The first attempt at creating accessibility guidelines was made in January 1995 by Gregg Vanderheiden. This was followed by 38 different guidelines created by various authors and organizations during the next few years, which were finally compiled into the Unified Website Accessibility Guidelines in 1998. It was the starting point for developing web accessibility standards.

Introduction of WCAG 1.0

In 1999, the World Wide Web Consortium (W3C) released the first version of Web Content Accessibility Guidelines (WCAG 1.0). It consisted of 14 guidelines describing accessible design principles. The guidelines were supported by one or more checkpoints which described specifically how to apply a particular guideline. Priority levels were assigned to each checkpoint based on its impact on accessibility. These levels were the following:

• Priority 1: Web developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content. Conformance to this level is described as A.
• Priority 2: Web developers should satisfy these requirements, otherwise some groups will find it difficult to access the web content. Conformance to this level is described as AA or Double-A.
• Priority 3: Web developers may satisfy these requirements to make it easier for some groups to access the Web content. Conformance to this level is described as AAA or Triple-A.

WCAG 2.0

The WCAG 1.0 was superseded by WCAG 2.0 in 2008, which for a long time remained an industry standard for web accessibility until it was updated to WCAG 2.1 in June, 2018 . The document consists of four main principles of accessible design: websites must be perceivable, operable, understandable, and robust. The principles are divided into general guidelines which in part consist of testable criteria. The Web Consortium also maintains a considerable list of techniques and common failure cases in website accessibility. WCAG 2.0 also has three levels of conformance (A, AA, AAA), but defines them differently from the 1.0 version.

WCAG 2.1

WCAG 2.1 was intended as an update to accommodate a wider range of people with various disabilities, including blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, learning disabilities and cognitive limitations.

The WCAG 2.1 guidelines have become a W3C Recommendation on June 5th, 2018. The previous WCAG standard, however, has not been deprecated. The new version is backwards compatible with WCAG 2.0, so the previously existing criteria have not been modified.

What's New in WCAG 2.1?

If you have made your website compliant with WCAG 2.0 and are looking to update for the new standard, you will have to add compliance features with regards to the following:

• New mobile device accessibility requirements:
  Criterion 1.3.4 - display orientation requirements (link);
  Criterion 2.5.1 - pointer gesture requirements (link);
  Criterion 2.5.2 - pointer cancellation requirements (link);
  Criterion 2.5.4 - motion actuation requirements (link).
• New accessibility requirements to cater the visually impaired:
  Criterion 1.4.10 - reflow (scrolling) requirements (link);
  Criterion 1.4.11 - non-text component contrast requirements (link);
  Criterion 1.4.12 - text spacing requirements (link);
  Criterion 1.4.13 - hover and focus functionality requirements (link);
  Criterion 2.5.3 - component label and name requirements (link);
  Criterion 4.1.3 - requirements for status messages (link).
• New accessibility requirements to cater the physically impaired:
  Criterion 2.1.4 - character key shortcuts requirements (link);
  Criterion 2.5.5 - target size requirments (link);
  Criterion 2.5.6 - concurrent input mechanisms requirements (link).
• New accessibility requirements to cater people with cognitive disabilities:
  Criterion 1.3.5 - input purpose requirements (link);
  Criterion 1.3.6 - component purpose identification requirements (link);
  Criterion 2.2.6 - timeout requirements (link).
• New accessibility requirements to cater people with vestibular disorders:
  Criterion 2.3.3 - triggered animation requirements (link).

You can find more information on these requirements throughout the contents of this article. Read on for the full list of WCAG 2.1 accessibility guidelines explained and presented in a concise, understandable format.

Making Sure Your Website is ADA Compliant Under WCAG 2.1

The best way to be certain your website is ADA compliant is to make sure it adheres to both A and AA levels of conformance with WCAG 2.1. In order to ensure the maximum level of conformance and make your website available to the vast majority of users, with or without disabilities, your website will also have to abide to most of the AAA level guideline criteria. Keep in mind that those criteria are advisable, not imperative. Full conformance with the AAA level is impossible for some website content.

LEVEL A CONFORMANCE (Lowest Level)

This level provides the minimal amount accessibility for disabled users to be able to operate your website

1. Provide Text Alternatives for All Non-Text Content

Controls or input fields must have a name describing their purpose. Time-based media, tests and exercises, objects that provide a sensory experience must have a text alternative that describes or at least identifies the object.

Captchas should be provided with text alternatives that describe their purpose, also multiple forms of captcha must be provided for different types of perception to accommodate people with disabilities.

2. Provide Equivalent Information for Time-Based Media

Time based media is any prerecorded video and audio content.

An audio track can be provided to represent video-only content for the visually impaired. Captions must be provided for all prerecorded audio content, except for the case when it serves as an alternative for text and is labeled accordingly.

3. Create Content that May Be Presented in Multiple Ways

For example, multiple layouts can make content more accessible without losing information.

Website's information, structure and logic must be presented in a way that is accessible to different users, including through assistive technologies (such as screen readers). The correct reading sequence of web content must also be available through user's assistive technologies. The instructions that are necessary to understand and operate through the site's contents must not rely solely on sensory characteristics (shape, size, visual location, orientation, sound, etc.)

4. Use of Color

Do not use color as the only means of conveying visual information, distinguishing visual components, indicating actions or prompting for a response.

5. Audio Controls

In the case of audio playing on a page automatically for more than 3 seconds, either a mechanism must be available to pause or stop the audio, or the audio volume should be controlled independently from the overall system volume level.

6. Keyboard Control & Character Key Shortcuts

Users must have the ability to fully operate the website through a keyboard interface, without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

Other input methods are not forbidden and may also be present as alternatives. If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, otherwise the user must be prompted of an alternative.

In the case when the system has keyboard shortcuts created using upper or lowercase letters, punctuation, numbers, symbols and characters, then at least one of the following cases must apply:

• User has the ability to turn off the keyboard shortcut;
• User is able to remap the shortcut using one or more unprintable keyboard keys (e.g. Ctrl, Alt, Shift, etc.);
• Keyboard shortcut is active only when the related UI component has focus.

7. Pointer Gestures & Cancellation

Note: the following requirements don't apply to actions with the use of assistive technologies.

If a system has functionality that operates using multipoint or path-based gestures, the user must have the ability to operate this functionality using a single pointer without path-based gestures, unless this type of functionality is essential to the system.

If the system's functionality can be operated through a single pointer, then at least one of the following cases must apply:

• The down-event is not used to operate the functionality;
• An operation is considered performed on the up-event and the user must be able to abort the operation before it's completed or to undo the operation after completion;
• The up-event reverses all of the effects of the previous down-event;
• Completing the operation on the down-event is imperative.

Features that emulate keyboard functionality and keys being pressed are considered essential to the system.

8. Motion Actuation

For functionality that can be activated by device or user motions, the user must also be able to disable motion response and operate it using UI components.

Exceptions for this rule include the following:

• Motion is used to operate functionality by means of assistive technologies or other user agents supporting accessibility;
• Motion is an imperative feature for the functionality.

9. Controlling Time Limits

If there is a time limit set by the content, provide users with options to turn off, adjust or extend the time limit, except for cases when: the time limit is part of a real-time event and there is no alternative for the time limit; the time limit is essential and extending it invalidates the activity; the time limit is longer than 20 hours.

10. Controlling Content Presentation

For any unessential moving, blinking or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there must be an option to pause, stop, or hide it. Also, provide these options for unessential auto-updating that starts automatically and is presented in parallel with other content.

11. Content Must Not Cause Seizures

Avoid designing content in a way that is known to cause seizures. Make sure that web pages do not have content that flashes more than three times in one second or the flash is below the general flash and red flash thresholds.

12. Skipping Content

Provide options to bypass repeating blocks of content on multiple pages.

13. Titles

Provide web pages with titles that describe the topic or purpose of the page.

14. Navigation

If a web page is navigated sequentially through focused components, make sure it is navigated in a meaningful manner.

15. Names & Labels for Text and Images of Text

The programmatic names of UI components with labels which contain text or images of text must contain the text that is displayed visually.

Note: Best practice is to have the text of the label at the beginning of the name.

16. Link Purpose

Make sure that the purpose of each link can be determined by the link text alone, unless the purpose is ambiguous to all users.

17. Page Language

The language of the web page must be determinable by all users, including through user's assistive technologies.

18. Changing Content

Make sure no major changes of website content occur when focusing on a certain component or when the user inputs information or changes any settings.

19. Error Notifications

In case of an input error made by the user, provide text information specifying the item in error and the error itself.

20. User Input

Provide labels, guidance and instructions where user input is required.

21. Compatibility with User Software

Maximize compatibility with current and future user browsing software, including assistive technologies by making sure that content is correctly implemented through markup languages. Also make sure that the user interface components have defined names and roles which can be determined by the user's browsing software, including assistive technologies.

LEVEL AA CONFORMANCE (Sufficient Level)

This level provides sufficient amount of accessibility and guarantees your website will offer convenient browsing for disabled users. Level AA conformance also requires your website to comply with Level A conformance list.

1. Live Audio Captions

Provide captions for all live audio content.

2. Audio Descriptions

Provide audio descriptions for all prerecorded video content.

3. Text Contrast

Text content and images of text must have a contrast ratio of 4.5:1. This does not apply to large-scale text and images of large-scale text (that must have a contrast ratio of 3:1). Text or images that are part of the user interface and serve only design purposes have no contrast requirements. Text that is part of a logo or the name of the brand has none or minimum contrast requirements.

4. Non-Text Contrast

Make sure the following components have a contrast ratio of at least 3:1 against alongside colors:

• UI components, with exception to components the appearance of which is determined by the user agent and not modified by the author of the content;
• Graphical objects, with exception to when a particular visual presentation of an object is essential to the information displayed.

5. Text Style Properties

Make sure that no loss of content or functionality occurs when you set up the following text style properties using markup languages that support these properties:

• Line height (line spacing): at least 1.5 times the font size;
• Spacing following paragraphs: at least 2 times the font size;
• Letter spacing (tracking): at least 0.12 times the font size;
• Word spacing: at least 0.16 times the font size.

Human languages and scripts that do not use one or more of these text style properties in writing may conform using the properties that are used by that combination of language and script.

6. Resizing Text

Provide users with the ability to resize text up to 200 percent without using assistive technology, loss of content and functionality.

7. Text Over Images

Use text to convey information instead of images wherever it's possible.

8. Navigation

Provide multiple ways to locate web pages.

9. Headings and Labels

Use headings and labels to describe topics and purpose of web components.

10. Identifying Input Purpose

Make sure that the purpose of each input component collecting user info can be programmatically determined if the following is true:

• Input component serves a purpose outlined in the Input Purposes for User Interface Components section of the WCAG 2.1 document;
• The components are implemented using technologies that support identification of data input purpose.

11. Visible Focus

Make sure the keyboard focus indicator is visible through all interfaces.

12. Language of Components

Make sure the language of each paragraph or phrase in the website content is determinable through user's browsing software. This does not apply to proper names, technical terms, words of indeterminate language, and words or phrases that are part of the dialect, slang or jargon of the surrounding text.

13. Consistent Navigation

Navigational mechanisms which are repeated through multiple web pages occur in the same order each time they are repeated.

14. Orientation

The website content must not be restricted in its viewpoint and functionality to a single display orientation (portrait or landscape) with the exception when certain orientation is imperative for such functionality (e.g. a piano app, virtual reality content, etc.)

15. Reflow

Make sure that web content can be displayed to the user without requiring to scroll in two dimensions, loss of information and functionality for the following cases:

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Exceptions to this rule include content that requires two-dimensional scrolling for operational or conceptual purposes (e.g. images, maps, diagrams, video, games, presentations, etc.)

16. Consistent Identification

Components with the same functionality must be identified consistently.

17. Correctional Suggestions

In the case of input errors, provide the users with correctional suggestions, if they are known.

18. Status Messages

When using markup languages to implement components such as status messages, make sure that they can be programmatically determined through roles or properties and can then be displayed to the user through assistive technologies without receiving focus.

19. Secure Input

Ensure security of legal and financial data transactions are secure by making sure they are reversible, the user is given the opportunity to recheck input data and a confirmation mechanism is provided before finalizing submission.

LEVEL AAA CONFORMANCE (Highest Level)

This level provides maximum amount of accessibility and allows users of your website to freely navigate it without any restrictions. Level AAA conformance requires your website to also comply with both Level A and Level AA conformance lists.

1. Sign Language

Support all prerecorded audio content with sign language interpretation.

2. Extended Audio Descriptions

Provide extended audio descriptions for all prerecorded video content where there's no opportunity to pause the foreground audio and provide audio descriptions.

3. Multimedia Alternatives

Provide alternatives for all prerecorded video and audio content.

4. Live Audio-Only Alternatives

Provide alternatives for live audio-only content that represents equivalent information.

5. Text Contrast

Text content and images of text must have a contrast ratio of 7:1. This does not apply to large-scale text and images of large-scale text (they now must have a contrast ratio of 4.5:1). Text or image that is part of the user interface and serve only design purposes have no contrast requirements. Text that is part of a logo or the name of the brand has none or minimum contrast requirements.

6. Avoid Background Audio

Prerecorded audio content which contains speech and is not a CAPTCHA, and audio logo or musical composition must either not contain any background sounds, or the background sounds can be turned off, or the background sounds should be at least 20 dB lower than the prerecorded speech content.

7. Color Control

Provide users with a mechanism to choose foreground and background colors.

8. Content Size

The width of blocks of content must not exceed 80 characters or glyphs.

9. No Justification

Make sure the text is not justified.

10. Spacing

Line spacing must be at least 1.5 spaces within paragraphs; paragraph spacing must be at least 1.5 times larger than the line spacing.

11. Resizing text

Make sure the text can be resized up to 200 percent without using assistive technologies and the user does not have to scroll horizontally to read a line of text.

12. Images of Text

Use images of text only for decoration purposes or when it is essential to the information that is being provided.

13. Keyboard Control

Make sure all content and functionality of web pages are accessible through a keyboard interface and do not require specific timing for keystrokes.

14. Target Size

Make sure the target for pointer input is at least 44x44 CSS pixels, with the following exceptions:

• Target is available on the same page as an equivalent link or component that is at least 44x44 CSS pixels;
• The target is located within a sentence or block of text;
• The size of the target is defined by the user agent and not the author;
• A specific implementation of the target is essential for the web content.

15. Content on Hover or Focus

If your functionality includes additional content becoming visible or hidden on hover or keyboard focus, make sure that:

• Functionality allows to dismiss the additional content without moving pointer or keyboard focus, with the exception when additional content prompts the user of an error or doesn't cover up or replace the original content;
• In the case when pointer hover triggers additional content, the pointer can be moved over the additional content without it disappearing;
• The additional content stays visible until the hover or keyboard focus is removed, the user dismisses it, or the information is no longer accurate.

Exceptions to this rule include cases when the user agent is responsible for displaying additional content and that content is not modified by the author (e.g. browser tooltips).

16. Disabling Triggered Animation

The user must have the ability to disable motion animation triggered by his interactions with the system, with exception to when this animation is essential to the functionality and information presented by the web content.

17. Avoid Timing

Avoid timingas an essential part of an event or activity presented by your content, except for non-interactive components, media and live events.

18. Timeouts

The user must be warned of the period of inactivity that leads to loss of data, with the exception when the data is stored for more than 20 hours after the user's last action.

Note: with regard to some privacy regulations, it is required to ask the user's explicit consent for personal data storage. It is recommended to advise with privacy professionals and legal counsel if you are considering storing personal data as an approach to conform with this requirement.

19. Interruptions

Allow users to postpone or suppress interruptions, except in the case of emergency.

20. Smooth Reauthentication

Make sure users can continue their activity without loss of any data after reauthentication in case the authenticated session expires.

21. Avoid Flashes

Make sure web pages don't contain content that flashes more than three times in a second (note: there are no exceptions as in level A conformance).

22. User's Location

Include information on the user's location within a set of pages.

23. Organize Your Content

Use section headings to organize your website's content.

24. Identifying Purpose

While implementing components using markup languages, make sure that UI components, icons and regions can be programmatically determined.

25. Definitions

Provide a mechanism for identifying definitions of unusual words and phrases, including idioms and jargon.

26. Abbreviations

Provide a mechanism for interpreting abbreviations.

27. Understanding Content

Provide supplemental content when users require a more advanced education level than lower secondary education (completion of 9th grade of school) to understand the content.

28. Pronunciation

Provide a mechanism for identifying pronunciation when the meaning of the words, in context, is ambiguous without knowledge of pronunciation.

29. Content Changes

Changes of web content may only be initiated by the user or the user must be provided with a mechanism to turn off such changes.

30. Provide Help

Provide users with context-sensitive help.

31. Prevent User Input Errors

For all user input provide the user with options to reverse the submission of information, check and correct inputted information, allow the user to review, confirm and correct the information before finalizing submission.

32. Concurrent Input Mechanisms

Make sure that web content doesn't restrict disabled individuals from using various input devices while operating website functionality, unless it is essential and required to ensure security and maintain user settings.

Conclusion

The first step to ensure your website is ADA compliant is to check with all of the items in the lists above. Choose the level of conformance you would like to achieve, then look through all the requirements for that level and ask yourself a question: "Does my content fit these criteria?". A website is compliant if all its pages match the accessibility standards.

If you require more information on the accessibility standards or are looking for specific techniques to meet the success criteria, check out the original WCAG 2.1 document.

Additionally, if you would rather outsource this type of work to an experienced accessibility expert, please feel free to send us your request.