Table of Contents

1.1 Text Alternatives
Provide text alternatives for any non-text content.
1.2 Time-based Media
Provide alternatives for time-based media.
1.3 Adaptable
Create content that is adaptable without losing information or structure.
1.4 Distinguishable
Make it easier for users to see and hear content.
2.1 Keyboard Accessible
Make all functionality available from a keyboard.
2.2 Enough Time
Provide users enough time to read and use content.
2.3 Seizures
Do not design content in a way that is known to cause seizures.
2.4 Navigable
Provide ways to help users navigate, find content, and determine where they are.
3.1 Readable
Make text content readable and understandable.
3.2 Predictable
Make Web pages appear and operate in predictable ways.
3.3 Input Assistance
Help users avoid and correct mistakes.
4.1 Compatible
Maximize compatibility with current and future user agents, including assistive technologies.

Text Alternatives

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

An adorable kitten climbing on a pile of logs

For example: The below above would be read by a screen reader as "An adorable kitten climbing on a pile of logs"

Images that are purely decorative and may disrupt the readability of the content or that reiterate content already displayed as text should contain minor alt text.

Go to the Text Alternatives Section of the WAI Checklist for more in depth coverage
⇧ Back top Top

Time-based Media/Captions/Audio Description or Media Alternative

This is important only if the information in the media is available only in said media and not a video/audio repetition of information already provided in the content of the site via text.

It will be important to provide a description for the above media because the information it provides is not located anywhere else on the page. This can be done by providing a transcript of an audio only presentation or linking to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.)

Go to the Time-based Media Section of the WAI Checklist for more in depth coverage of captioning and audio descriptions.
⇧ Back top Top

Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Info and Relationships

Illustration of form with unclear required form elements

Information, structure, and relationships conveyed through presentation must be programmatically determined or available in text. (Level A)

This figure shows 2 examples of forms, one with only color as an indicator of required fields, the other correctly has a text indicator.

This is also applicable to tables and pure text documents.

Go to an in depth discussion of Info and Relationships

Meaningful Sequence

This image shows a sequenced set of divs which would be difficult to parse in the correct order.

When the sequence in which content is presented affects its meaning, a correct reading sequence must be able to be programmatically determined.

This figure shows an arrangement that could be difficult to be parsed in a correct order.

Sensory Characteristics

An example of what not to do when providing instructions, showing an arrow with no accompanying text.

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)

Distinguishable

Make it easier for users to see and hear content including separating foreground from background

Use of Color

Color cannot be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

The link in this sentence would not be visible to 5% of the male population.

Deuteranopia is the most common form of color-blindness. The color chart below shows an example of how a person with deuteranopia would perceive two different colors.

Color Oracle is a color blindness simulator that can be useful in designing with accessibility in mind.
See further information from W3C about use of color.

Contrast (Minimum)

The visual presentation of text must have a contrast ratio of at least 4.5:1

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Example

This text is not accessible.
This text is accessible.
This icon used to convey an action is not accessible
This icon used to convey an action is accessible

It's important to remember that anything treated as text will have the same visiblity requirements as text. For example icons that are used for navigation or as an indication of interactivity should comply with contrast requirements for text of equivalent size.


This is not ok*

*EVER. At any size.

Audio Control

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. (Level A). If this were not already an accessibility requirement I would add it in. Seriously.

More things to remember

  • Avoid using images of text except in logos.
  • Except for captions and images of text, text must be able to be resized without assistive technology up to 200% without loss of content or functionality.
  • Use readable fonts
  • Make sure any text is at least 14 points and has good contrast
  • Provide a highly visible highlighting mechanism for links or controls when they receive keyboard focus

Keyboard Accessible

Make all functionality available from a keyboard.

No Keyboard Trap

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus must be able to be moved away from that component using only a keyboard interface. If it requires more than unmodified arrow or tab keys or other standard exit methods to navigate away from the element, the user must be advised of the method for moving focus away.

Enough Time

Provide users enough time to read and use content.

Timing Adjustable

A user must be able to adjust or disable a time limit set by the content of the page. This applies to any process that happens after a set time without user initiation (such as auto updating content, or changing a slide in a carousel).

Read about exceptions and further examples on the W3C site.

Pause, Stop, Hide

Anything that auto-updates, auto-scrolls, or moves must have a mechanism to pause, stop or completely hide it

Example

Space dogs!
These dogs are so cool!
They went to outer space! Wow!
A cat with some popcorn
This cat really loves pineapples.
He wants to eat pineapples all day long.

The above carousel should have a way to pause, stop, or hide. The slides go by much too quickly to be read. This is not accessible. It also has no fallback for browsers that do not support CSS3 transitions. This is also not accessible. Please see the section on compatibility to learn more about ensuring accessibility through proper coding techniques.

Skip to the Compatible Section of this page to learn more.

Seizures

Do not design content in a way that is known to cause seizures

Three Flashes or Below Threshold

Web pages do not contain anything that flashes more than three times in any one second period. (Level A)

Obviously it's not a good idea to show a wrong example of this one. Just be careful about animations and things that might flash in some way.

Readable

Make text content readable and understandable.

Language of Page

The default human language of each Web page can be programmatically determined.

Language of Parts

The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

Predictable

Make Web pages appear and operate in predictable ways.

On Focus

When any component receives focus, it does not initiate a change of context.

Examples:

  • Forms should not be submitted automatically when a component receives focus. So tabbing onto a submit button should not trigger the button action.
  • New windows should not be launched when a component receives focus.
  • Focus should not be changed to another component when that component receives focus.

On Input

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. This Success Criterion helps users with disabilities by making interactive content more predictable. Unexpected changes of context can be so disorienting for users with visual disabilities or cognitive limitations that they are unable to use the content. Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site.

Examples:

  • Individuals who are blind or have low vision may have difficulty knowing when a visual context change has occurred, such as a new window popping up. In this case, warning users of context changes in advance minimizes confusion when the user discovers that the back button no longer behaves as expected.
  • Some individuals with low vision, with reading and intellectual disabilities, and others who have difficulty interpreting visual cues may benefit from additional cues in order to detect changes of context.

Consistent Navigation

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Consistent Identification

Components that have the same functionality within a set of Web pages are identified consistently.

Input Assistance

Help users avoid and correct mistakes

Error Identification

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Example 1

Example 2

⇧ The Name field is required. Please enter your name to continue.

The first example does not give an explanation for the error and is identified only with color.

The second example clearly explains why the error occurred.

Labels or Instructions

Labels or instructions are provided when content requires user input.

Example 1

Example 2

The first example does not show a label for the form input.

The second example clearly explains what the user should enter into the form field.

Error Suggestion

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Error Prevention (Legal, Financial, Data)

For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Having all 3 would be ideal, but you must have at least one option available.

Example:

You entered:

Name: Bertie Lou

Age: 92

City: Flintstone

Choose edit to go back and change your answers or continue submit your entries.


Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

Parsing

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. (Level A)

Always use valid and semantic markup as much as possible and validate pages to ensure correct markup has been used.

W3C Markup Validation Service

Name, Role, Value

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

Example

If using script or code to re-purpose a standard user interface component in a markup language:

Exposing the names and roles, allowing user-settable properties to be directly set, and providing notification of changes using one of the following techniques:

ARIA16: Using aria-labelledby to provide a name for user interface controls (ARIA)