Accessibility compliance standards

According to the United Nations, approximately 120 countries have laws around accessibility. Many of them also have specific laws for digital accessibility. While some countries do have their own accessibility guidelines, the majority either reference or mirror one set of guidelines for adherence of web content, that is, the W3C's Web Content Accessibility Guidelines, also known as WCAG.

The first version of the WCAG guidelines, WCAG 1.0, was created in 1999. The conformance with these guidelines was broken into three levels, that is, A, AA, and AAA. Over time these guidelines have evolved and the latest version to which most organizations look for conformance is WCAG 2.1 AA. Level AAA is a set of guidelines to which many aspire but because of the strenuous requirements, most legal entities do not expect full conformance. Future versions of the requirements are already underway with WCAG 3.0 on the horizon. Also, as information develops around different disabilities and the variations and unique needs of each, the guidelines continue to evolve to ensure that all individuals have an equitable experience online.  

As part of these guidelines, the W3C also provides techniques and best practices to help individuals understand and implement accessible features. These guidelines and techniques, as well as other resources, are made available through the W3C's Web Accessibility Initiative (WAI) where various working groups actively develop tools to help organizations implement accessibility.

The WCAG criteria are based on four guiding principles. These principles are known as POUR:  Perceivable, Operable, Understandable, and Robust.

 

The WCAG offers the following guidelines, known as POUR, for supporting web accessibility:

Perceivable

Users must be able to perceive the information that you present; the content must be available to at least one of their senses. For example, with closed captions in media, users who have hearing impairments can perceive the same content through a visual means.

Operable

Users must be able to operate the interface; the interface cannot require interaction that a user cannot perform. For example, users should be able to trigger all actions with a mouse click or a keyboard key so that individuals who have mobility challenges with using a mouse or trackpad can operate the interface.  

Understandable

Users must be able to understand the information as well as the operation of the user interface. For example, if navigation uses graphical elements, such as a menu, ensure that you provide verbal messages that communicate this menu and the navigation for users who rely on assistive technologies.

Robust 

Users must be able to access the content as technologies advance. For example, access for users should be consistent regardless of the browser, device, or assistive technology that they use. Developers should make these considerations during the design phase so the approach is flexible for future.  

More information on the POUR principles can be found on the W3C's website.

WCAG 2.1 AA contains 71 success criteria, each belonging to one of the four guiding principles. Each criterion details the expectation of what all users require. 

A Voluntary Product Accessibility Template (VPAT) is an assessment of whether an application meets conformance requirements for WCAG. The following list shows the criteria for WCAG and measurements in the VPAT according to the W3C.

Perceivable

Text alternatives

Provide text alternatives for any non-text content so that users can change it into other forms that they need, such as large print, braille, speech, symbols, or simpler language.

For example, add alternative text to images. Consider how you can describe this image of a dog to someone on the phone. 

The description is what you need in the HTML code for screen reader users to perceive the content, e.g.,   

alt="Smiling golden retriever with a birthday cake with the number ten in front of him"

Time-based media

Provide alternatives for time-based media. For example, include a transcript and captions for media that includes audio.

Adaptable

Create content that you can present in different ways (for example, use a simpler layout) without losing information or structure.

For example, use responsive design to display information on all devices, regardless of their size. Device sizes vary but capabilities should not be different.

Distinguishable

Help users see and hear content by separating foreground from background. For example, ensure that all your text and background colors have sufficient contrast so that users with color deficiencies can still complete their task. Check for color contrast on all your pages, as shown in the following figure: 

One way to ensure that text is distinguishable against a background color is to use a color contrast checker. You can use a color contrast browser extension and the Accessibility Inspector to verify how various combinations impact people with color blindness or deficiencies. 

Operable

Keyboard-accessible

Make all functionality available from a keyboard. For example, test your application to ensure that users can access all interactive elements through a keyboard, without the use of a mouse or trackpad. The most commonly used keys for navigation include Tab and Arrow, while the Enter key is a common choice for engagement with the element.

Enough time

Provide users enough time to read and use content. Adjust your estimates so that all users can complete a task.

For example, users with visual impairments might need more time to complete an activity. Similarly, a screen reader user might need more time to navigate and interact with a web page because they rely on what they hear. To meet the needs of all users, a best practice is to provide a method to either extend the required time or turn off the time.

Seizures and physical reactions

Do not design content in a way that causes seizures or physical reactions. Ensure that your web pages do not contain flashes more than 3x in any one second.

For example, marketing sites tend to flash new items or opportunities to users. Alerting attention is understandable, but excessive means might lead to negative consequences.

Navigable 

Provide ways to help users navigate, find content, and determine where they are. For example, clear page titles, headings, and labels help users to orient themselves on the order of importance of the content.  

Also, remember that not everyone can rely on a mouse or trackpad. Keyboard-only users need a way to navigate. By navigating with the Tab key, they can jump from one interactive element to another (for example, a link or a button). A visible border around the element on which they are, as shown in the following example, helps individuals orient where they are within your content: 

 

Additionally, methods to bypass repetitive content, like navigation menus, are helpful. For example, you create a bypass link option when a user first enters a page using Tab key.  They can be immediately presented with options for quick navigation to the main part of the content.  In the following figure, a pop-up menu introduces a link that users can use to go to the main content of Pega's Agile Studio application.

 

 

Input modalities

Adding support for alternative input modalities makes it easier for some users to operate functionality when keyboard is not an option.

The following figure demonstrates leveraging voice commands to interact with an application.

Understandable

Readable

Make text content readable and understandable. For example, ensure that all pages and content have appropriately labels for the default language.  For any acronyms or abbreviations, provide a way to access the definition or the full term. This approach assists users with learning or other cognitive disabilities.

Predictable

Make web pages display and operate in predictable ways. Ensure that the application does not introduce a change in the user context for the page without them purposely taking an action to trigger the change.

For example, if a keyboard user presses the Tab key to navigate to a button such as Submit, no action should occur until the user presses the Enter key. Only then can something change on the page.

Input assistance

Help users avoid and correct mistakes. For example, when a user receives a form to fill out in an application, ensure that you provide them with clear instructions on how to fill out the form fields, which fields are required, and how to correct any errors that they make as they move through the form. The following figure shows an example of form error feedback:

Robust

Compatible

Maximize compatibility with current and future user agents, including assistive technologies. This approach includes appropriate markup language, assignment of name, role, and value to all interface components, and status messages. 

For more information, see How to Meet WCAG Quick Reference Guide.