WCAG 2.1 and ADA 2019

WCAG 2.1 Guidelines for 2019:

What are they and how do they related to ADA Requirements?

In the summer of 2018, the W3C released its latest set of WCAG requirements with seventeen fresh guidelines that seek to improve web content accessibility for the following user groups:

• Those with cognitive or learning disabilities
• Visually impaired users
• Impaired mobile device users

The new version adds 17 fresh guidelines and requirements with 5 at level A, 7 at level AA, and 5 at level AAA. However, the W3C doesn’t make level AAA a mandatory requirement for website owners as a general policy for entire websites because it’s still impossible for some forms of content to meet all of them.

17 ADA compliance requirements

This list includes a rating guide (in a descending order) – from a scoring system of A, AA, and AAA.

1. Pointer Gestures (A)

Unless a multipoint or path-based gesture is necessary, users can operate all functionalities using multipoint or path-based gestures for operation with a single pointer without a path-based gesture.

2. Character Key Shortcuts (A)

The guideline applies when users utilize letters, punctuations, numbers, and symbol characters to implement content shortcuts.

3. Pointer Cancellation (A)

This requirement covers web content that interprets a pointer action. This means the functionalities should be easy to operate using single pointers. 

4. Label in Name (A)

This requirement applies to user interfaces that have labels including text or text images. The name here features the visually presented text.

5. Motion Actuation (A)

This requirement applies to functionalities:

• A device motion can operate
• Where user interface components can operate user motion
• Where users can disable response to motion to prevent accidental actuations

6. Orientation (AA)

According to this guideline, content should extend its view and operation beyond single display orientations such as landscape or portrait unless a particular display mode is mandatory.

7. Identify Input Purpose (AA)

It applies to the ease of programmatically determining the goal of all input fields gathering personal and sensitive user details.

8. Status Messages (AA)

This guideline requires that in content implementations involving markup languages, it should be easy to determine status messages programmatically using roles or attributes that enable users to access them easily using assistive technologies.

9. Reflow (AA)

Here, it should be easy to present content without losing its information or functionalities or needing to scroll in double dimensions such as images, maps, diagrams, and games. 

10. Non-Text Contrast (AA)

The guideline requires the visual presentation of user interface components and graphical objects to have a contrast ratio of at least 3:1 against adjacent color(s).

11. Text Spacing (AA)

Here, users shouldn’t miss any content or functionality because of text styles such as spacing, line height, letter spacing, word spacing, and style alteration property when using markup languages to implement content. 

12. Content on Hover or Focus (AA)

This guideline applies where receiving and then removing a pointer hover or keyboard focus displays more content and then hides it.

13. Timeouts (AAA)

Here, a user receives warnings of the duration of their usage inactivity that could cause them data loss without preserving it for over 20 hours following their inactivity.

14. Identify Purpose (AAA)

Where markup languages implement content, it should be easy to determine programmatically the purpose of user interface components, regions, and icons.

15. Animation from Interactions (AAA)

The guideline requires the easy disabling of motion animation inaction causes unless the animation is necessary for functionality or the information the user is receiving.

16. Target Size (AAA)

Under this requirement, the target size for pointer inputs needs to be at least 44 by 44 CSS pixels.

17. Concurrent Input Mechanisms (AAA)

Here, online content should not limit the use of any input modality available on platforms unless the limitations are necessary, secure the content, or respect users’ settings.

Since you now have a clear glimpse of what the WCAG update contains, let’s move on to the next sub-section and examine how W3C summarizes them.

 

WCAG 2.1 Requirements:

 

The “POUR” Summary

The WCAG 2.1 requirements define the standard for successful development with an ascending order of compliance levels. The standard has three compliance or success levels namely: A, AA, and AAA. The first A level means the lowest success while the AA and AAA level signifies the highest success. More A’s show that a website has met more demands and achieved greater accessibility convenience.

The W3C summarizes its requirements into four main parts it calls “POUR.”

This means all website content must be:

• Perceivable

All website owners should offer their users information and user interfaces in an easily perceivable manner. Moreover, they must provide text alternatives for non-text content such as images, voice, and videos. They must also offer captions or text summaries for audio and video content. Being perceivable also requires that the content should be easy to identify programmatically. This includes ease of listening and reading that features good contrast and easy volume controls. 

• Operable

This requirement means every user interface component and navigation needs to be easy to operate. For example, the interfaces must include keyboard usage. Moreover, users should have enough time to read content and perform necessary tasks. Also, website owners need to avoid creating and uploading content that could cause seizure among users.

• Understandable

All information and user interface operations should be easy to understand. The interface has to assist users to avoid and rectify mistakes when entering input. Lastly, the interface and content should function predictably to enhance reliability.

• Robust

The WCAG require all content to be robust enough to allow various user agents such as assistive technology to interpret it easily. The content must also be accessible to every user and remain abreast with technological advancements such as mobile tech. Finally, the content and website must offer utmost compatibility with most, if not all, web browsers.

Below are four examples of US websites that comply with the ADA/WCAG requirements above.

1. Coach Surfing: 

• Has an excellent heading structure
• Has a clean, simple interface
• Includes labels on most form fields

2. Center for Disease Control (CDC):

• Has a complete set of ARIA landmark roles, including (in various places of its) banner, navigation, search, complementary, and content information.
• Features an excellent heading structure
• Includes same-page links at the top of the page for skipping to specific content

3. Social Security Administration meets the same requirements as the CDC site.

4. The US Government website:

• Is easy to control using a keyboard
• Has slideshow auto-advances
• Has hidden slides with display: none and made visible with display