[Mockup] How to Meet WCAG 2.0
A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques

Status of this mockup

Loaded
No tags applied.
No filters set.

1. Perceivable

1.1 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.

1.1.1 Non-text Content

Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)

  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)

  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.

  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.

  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.

  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

Understanding SC 1.1.1
Sufficient Techniques
Situation A: If a short description can serve the same purpose and present the same information as the non-text content:

Short text alternative techniques for Situation A:

Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):

Short text alternative techniques for Situation B:

Long text alternative techniques for Situation B:

Situation C: If non-text content is a control or accepts user input:

Text alternative techniques for controls and input for Situation C:

Situation D: If non-text content is time-based media (including live video-only and live audio-only); a test or exercise that would be invalid if presented in text; or primarily intended to create a specific sensory experience:

Short text alternative techniques for Situation D:

Situation E: If non-text content is a CAPTCHA:

G143: Providing a text alternative that describes the purpose of the CAPTCHA AND G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality

Situation F: If the non-text content should be ignored by assistive technology:
Advisory Techniques

General Techniques for Informative Non-Text Content (Advisory)

  • Identifying informative non-text content (future link)
  • Keeping short descriptions short (future link)
  • Describing images that include text (future link)
  • Providing a longer description of the non-text content where only a descriptive label is required using a technology-specific technique (for an accessibility-supported content technology) for long description listed above (future link)
  • Providing different sizes for non-text content when it cannot have an equivalent accessible alternative (future link)
  • Using server-side scripts to resize images of text (future link)

General Techniques for Live Non-Text Content

  • 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.) (future link)

General techniques to minimize the barrier of CAPTCHAs

  • Providing more than two modalities of CAPTCHAs (future link)
  • Providing access to a human customer service representative who can bypass CAPTCHA (future link)
  • Not requiring CAPTCHAs for authorized users (future link)

HTML Techniques (Advisory)

  • H46: Using noembed with embed
  • Writing for browsers that do not support frame (future link)
  • Providing alternative content for iframe (future link)
  • Not using long descriptions for iframe (future link)
  • Providing redundant text links for client-side image maps (future link)

CSS Techniques (Advisory)

WAI-ARIA Techniques (Advisory)

  • Using the ARIA presentation role to indicate elements are purely presentational (future link)

Silverlight Techniques (Advisory)

Metadata Techniques (Advisory)

  • Using metadata to associate text transcriptions with a video (future link)
  • Using metadata to associate text transcriptions with audio-only content (future link)
    • EXAMPLE: Providing, in metadata, URI(s) that points to an audio description and a text transcript of a video.
    • EXAMPLE: Providing, in metadata, URI(s) that point to several text transcripts (English, French, Dutch) of an audio file.

1.2 Time-based Media

Provide alternatives for time-based media.

1.2.1 Audio-only and Video-only (Prerecorded)

Level A

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.

  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

Understanding SC 1.2.1

1.2.2 Captions (Prerecorded)

Level A

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Understanding SC 1.2.2

1.2.3 Audio Description or Media Alternative (Prerecorded)

Level A

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

Understanding SC 1.2.3
Advisory Techniques

1.2.4 Captions (Live)

Level AA

Captions are provided for all live audio content in synchronized media.

Understanding SC 1.2.4

1.2.5 Audio Description (Prerecorded)

Level AA

Audio description is provided for all prerecorded video content in synchronized media.

Understanding SC 1.2.5

1.2.6 Sign Language (Prerecorded)

Level AAA

Sign language interpretation is provided for all prerecorded audio content in synchronized media.

Understanding SC 1.2.6
Advisory Techniques
  • Using metadata to associate sign language alternatives of a video to enable choice of sign language [Example: Providing, in metadata, URI(s) that point to several English sign language translations (ASL, SASL, BSL, Auslan, ISL, NZSL) of a Web page.] (future link)

1.2.7 Extended Audio Description (Prerecorded)

Level AAA

Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.

Understanding SC 1.2.7
Advisory Techniques

1.2.8 Media Alternative (Prerecorded)

Level AAA

An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.

Understanding SC 1.2.8

1.2.9 Audio-only (Live)

Level AAA

An alternative for time-based media that presents equivalent information for live audio-only content is provided.

Understanding SC 1.2.9
Advisory Techniques
  1. Using metadata to associate sign language alternatives of a video to enable choice of sign language [Example: Providing, in metadata, URI(s) that point to several English sign language translations (ASL, SASL, BSL, Auslan, ISL, NZSL) of a Web page.] (future link)

1.3 Adaptable

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

1.3.1 Info and Relationships

Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Understanding SC 1.3.1
Sufficient Techniques
Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:
Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:
Failures

1.3.2 Meaningful Sequence

Level A

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

Understanding SC 1.3.2
Advisory Techniques
  • Using left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left (future link)
  • Providing a link to linearized rendering (future link)
  • Providing a style switcher between style sheets that affect presentation order (future link)

1.3.3 Sensory Characteristics

Level A

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.

Note: For requirements related to color, refer to Guideline 1.4.

Understanding SC 1.3.3

1.4 Distinguishable

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

1.4.1 Use of Color

Level A

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

Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.

Understanding SC 1.4.1

1.4.2 Audio Control

Level A

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.

Note: Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

Understanding SC 1.4.2

1.4.3 Contrast (Minimum)

Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • 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.
Understanding SC 1.4.3
Advisory Techniques
  • G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Using a higher contrast value for text that is over a patterned background (future link)
  • Using Unicode text and style sheets instead of images of text (future link)
  • Using a higher contrast values for lines in diagrams (future link)
  • Using greater contrast level for red-black text/background combinations (future link)
  • Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark (future link)
  • Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)
  • Making icons using simple line drawings that meet the contrast provisions for text (future link)
  • Providing sufficient contrast ratio in graphs and charts (future link)
  • Using a 3:1 contrast ratio or higher as the default presentation (future link)
  • Providing sufficient color contrast for empty text fields (future link)

1.4.4 Resize text

Level AA

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Understanding SC 1.4.4
Advisory Techniques

1.4.5 Images of Text

Level AA

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:

  • Customizable: The image of text can be visually customized to the user’s requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

Note: Logotypes (text that is part of a logo or brand name) are considered essential.

Understanding SC 1.4.5

1.4.6 Contrast (Enhanced)

Level AAA

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5: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.
Understanding SC 1.4.6
Advisory Techniques
  • G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Using a higher contrast value for text that is over a patterned background (future link)
  • Using Unicode text and style sheets instead of images of text (future link)
  • Using a higher contrast values for lines in diagrams (future link)
  • Using greater contrast level for red-black text/background combinations (future link)
  • Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark (future link)
  • Using a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast (future link)
  • Making icons using simple line drawings that meet the contrast provisions for text (future link)
  • Providing sufficient contrast ratio in graphs and charts (future link)
  • Using a 3:1 contrast ratio or higher as the default presentation (future link)
  • Providing sufficient color contrast for empty text fields (future link)

2. Operable

3. Understandable

4. Robust

Back to top