[Draft] How to Meet WCAG 2.0

A customizable quick reference to WCAG 2.0 requirements (Success Criteria) and techniques

Editor's Draft 10 March 2008

Customize this Quick Reference

Technologies:
Levels:
Sections:
Save Settings Option:

Introduction

[Hide Introduction]

This document lists all of the requirements (called "success criteria") from the latest Web Content Accessibility Guidelines (WCAG) 2.0 Working Draft. It also lists techniques to meet the requirements, which link to more details. The "Understanding" links go to descriptions, examples, and resources.

You can customize the list by selecting the technologies that apply to your Web project, and the levels and techniques that you want included in the list.

See the Overview of WCAG 2.0 Documents for an introduction to WCAG 2.0 and supporting documents, including more information about this document.

To use the Quick Reference:

  • In the Customizing section, check the technologies and conformance levels you are interested in.
  • The [Understanding Guideline x] and [Understanding Success Criterion x.x.x] links take you to the relevant section of the Understanding WCAG 2.0 document, which explains the intent of the guidelines and success criteria; provides examples and techniques; and describes how they help people with different disabilities.

Note that all techniques are informative - you don't have to follow them. The "sufficient techniques" listed below are considered sufficient to meet the success criteria; however, it is not necessary to use these particular techniques. Anyone can submit new techniques at any time. If techniques are used other than those listed by the Working Group, then some other method for establishing the technique's ability to meet the success criteria would be needed.

In addition to the 'sufficient techniques', there are also advisory techniques that go beyond WCAG 2.0's requirements. Authors are encouraged to apply all techniques that they are able to, including the advisory techniques, in order to best address the needs of the widest possible range of users.

Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas. Authors are encouraged to seek relevant advice about current best practice to ensure that Web content is accessible, as far as possible, to this community.

See also Sufficient and Advisory Techniques.

Table of Contents

WCAG 2.0 Quick Reference List

This Quick Reference is currently customized to include:

Text Alternatives:

Guideline 1.1 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 languageUnderstanding Guideline 1.1

Advisory Techniques for Guideline 1.1

Non-text Content:

1.1.1 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. (Level A)Understanding Success Criterion 1.1.1

  • 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 must be presented in non-text format, 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 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, or used only for visual formatting, or if it is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

Sufficient Techniques for 1.1.1 - Non-text Content
Situation A: If a short description can serve the same purpose and present the same information as the non-text content:
  1. G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content using a short text alternative technique listed below

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):
  1. G95: Providing short text alternatives that provide a brief description of the non-text content using a short text alternative technique listed below AND one of the following techniques for long description:

Situation C: If non-text content is a control or accepts user input:
  1. G82: Providing a text alternative that identifies the purpose of the non-text content using a short text alternative technique listed below

  2. Using HTML form controls and links (future link)

  3. H44: Using label elements to associate text labels with form controls (HTML)

  4. H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)

Situation D: If non-text content is time-based media (including live video-only and live audio-only); a test or exercise that must be presented in non-text format; or primarily intended to create a specific sensory experience:
  1. Providing a descriptive label using a short text alternative technique listed below

  2. G68: Providing a descriptive label that describes the purpose of live audio-only and live video-only content using a short text alternative technique listed below

  3. G100: Providing the accepted name or a descriptive name of the non-text content using a short text alternative technique listed below

Situation E: If non-text content is a CAPTCHA:
  1. 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:
  1. Implementing or marking the non-text content so that it will be ignored by assistive technology using one of the technology-specific techniques listed below

Short text alternative techniques for use in sufficient techniques above
  1. H36: Using alt attributes on images used as submit buttons (HTML)

  2. H2: Combining adjacent image and text links for the same resource (HTML)

  3. H37: Using alt attributes on img elements (HTML)

  4. H35: Providing text alternatives on applet elements (HTML)

  5. H53: Using the body of the object element (HTML)

  6. H24: Providing text alternatives for the area elements of image maps (HTML)

  7. Providing text alternatives for strings where look-alike glyphs are used in place of letters (e.g. leetspeak) (future link)

  8. Providing text alternatives for ASCII art (future link)

  9. Providing link text that identifies the non-text content and describes the purpose of the link (future link)

Long text alternative techniques for use in sufficient techniques above
  1. H45: Using longdesc (HTML)

  2. H53: Using the body of the object element (HTML)

Advisory Techniques for 1.1.1 - Non-text Content
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 (Advisory)
  • 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)

  • Providing a transcript of a live audio only presentation after the fact (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)
CSS Techniques (Advisory)
ARIA Techniques (Advisory)
  • Using the ARIA presentation role to indicate elements are purely presentational (future link)

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, URL(s) that points to an audio description and a text transcript of a video.

    • EXAMPLE: Providing, in metadata, URL(s) that point to several text transcripts (English, French, Dutch) of an audio file.

Time-based Media:

Guideline 1.2 Provide synchronized alternatives for synchronized time-based mediaUnderstanding Guideline 1.2

Audio-only and Video-only (Prerecorded):

1.2.1 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: (Level A)Understanding Success Criterion 1.2.1

  • Prerecorded Audio-only: A text alternative is provided that presents equivalent information for prerecorded audio-only content.

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

Sufficient Techniques for 1.2.1 - Audio-only and Video-only (Prerecorded)

Editorial Note: @@ ACTION: Michael to create techniques based on G69.

Advisory Techniques for 1.2.1 - Audio-only and Video-only (Prerecorded)
  • Providing a transcript of a live audio only presentation after the fact (future link)

  • 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)

Captions (Prerecorded):

1.2.2 Captions are provided for all prerecorded audio content in synchronized media, except when media is a media alternative for text and is clearly labeled as such. (Level A)Understanding Success Criterion 1.2.2

Sufficient Techniques for 1.2.2 - Captions (Prerecorded)
  1. G93: Providing open (always visible) captions

  2. G87: Providing closed captions using any readily available media format that has a video player that supports closed captioning

  3. G87: Providing closed captions using any of the technology-specific techniques below

Advisory Techniques for 1.2.2 - Captions (Prerecorded)
  • Providing a note saying "No sound is used in this clip" for video-only clips (future link)

  • Using SMIL 1.0 to provide captions for all languages for which there are audio tracks (future link)

  • Using SMIL 2.0 to provide captions for all languages for which there are audio tracks (future link)

Audio Description or Full Text Alternative:

1.2.3 A full text alternative for synchronized media including any interaction or audio description of the prerecorded video content is provided for synchronized media, except when media is a media alternative for text and is clearly labeled as such. (Level A)Understanding Success Criterion 1.2.3

Sufficient Techniques for 1.2.3 - Audio Description or Full Text Alternative
  1. G69: Providing a full synchronized media text alternative including any interaction

  2. G78: Providing a sound track that includes audio description as the primary sound track

  3. G78: Providing a sound track that includes audio description AND associating it with the synchronized media content using one of the following techniques:

  4. Providing audio description in its own sound track (future link) AND merging the description track with the original soundtrack of the synchronized media content at runtime using one of the following techniques

    • Using SMIL 1.0 to merge a description track with sound track (future link)

    • Using SMIL 2.0 to merge a description track with sound track (future link)

Advisory Techniques for 1.2.3 - Audio Description or Full Text Alternative
  • Providing audio description in multiple languages in SMIL 1.0 (future link)

  • Providing audio description in multiple languages in SMIL 2.0 (future link)

Captions (Live):

1.2.4 Captions are provided for all live audio content in synchronized media. (Level AA)Understanding Success Criterion 1.2.4

Sufficient Techniques for 1.2.4 - Captions (Live)
  1. G9: Creating captions for live synchronized media AND G93: Providing open (always visible) captions

  2. G9: Creating captions for live synchronized media AND G87: Providing closed captions using any readily available media format that has a video player that supports closed captioning

  3. G9: Creating captions for live synchronized media AND G87: Providing closed captions using one of the following techniques:

Note: Captions may be generated using real-time text translation service.

Audio Description:

1.2.5 Audio description is provided for all prerecorded video content in synchronized media. (Level AA)Understanding Success Criterion 1.2.5

Sufficient Techniques for 1.2.5 - Audio Description
  1. G78: Providing a sound track that includes audio description as the primary sound track

  2. G78: Providing a sound track that includes audio description AND associating it with the synchronized media content using one of the following techniques:

  3. Providing audio description in its own sound track (future link) AND merging the description track with the original soundtrack of the synchronized media content at runtime using one of the following techniques

    • Using SMIL 1.0 to merge a description track with sound track (future link)

    • Using SMIL 2.0 to merge a description track with sound track (future link)

Advisory Techniques for 1.2.5 - Audio Description
  • Providing audio description in multiple languages in SMIL 1.0 (future link)

  • Providing audio description in multiple languages in SMIL 2.0 (future link)

  • Providing audio description for live synchronized media (future link)

Advisory Techniques for 1.2.6 - Sign Language
Metadata Techniques
  • Using metadata to associate sign language alternatives of a video to enable choice of sign language (future link)

    • EXAMPLE: Providing, in metadata, URL(s) that point to several English sign language translations (ASL, SASL, BSL, Auslan, ISL, NZSL) of a Web page.

Audio Description (Extended):

1.2.7 Extended audio description is provided for all prerecorded video content in synchronized media. (Level AAA)Understanding Success Criterion 1.2.7

Sufficient Techniques for 1.2.7 - Audio Description (Extended)
  1. Providing a second version of the movie with extended audio descriptions during halted video segments (future link)

  2. G8: Creating an extended audio description for the synchronized media content using one of the following techniques

Advisory Techniques for 1.2.7 - Audio Description (Extended)
  • Adding extended audio description in multiple languages in SMIL 1.0 (future link)

  • Adding extended audio description in multiple languages in SMIL 2.0 (future link)

Full Text Alternative:

1.2.8 A full text alternative for synchronized media including any interaction is provided for all prerecorded synchronized media and a text alternative that presents equivalent information is provided for all prerecorded video-only media. (Level AAA)Understanding Success Criterion 1.2.8

Sufficient Techniques for 1.2.8 - Full Text Alternative
  1. G69: Providing a full synchronized media text alternative including any interaction using one of the following techniques

Advisory Techniques for 1.2.8 - Full Text Alternative

Live Audio-only:

1.2.9 A text alternative that presents equivalent information for live audio-only content is provided. (Level AAA)Understanding Success Criterion 1.2.9

Advisory Techniques for 1.2.9 - Live Audio-only
  • Using metadata to associate text transcriptions with audio-only content (future link)

    Example: Providing, in metadata, URL(s) that point to several text transcripts (English, French, Dutch) of an audio file.

Adaptable:

Guideline 1.3 Create content that can be presented in different ways (for example simpler layout ) without losing information or structureUnderstanding Guideline 1.3

Info and Relationships:

1.3.1 Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)Understanding Success Criterion 1.3.1

Sufficient Techniques for 1.3.1 - Info and Relationships
Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:
  1. G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text (HTML)

  2. G117: Using text to convey information that is conveyed by variations in presentation of text

  3. G140: Separating information and structure from presentation to enable different presentations

  4. Making information and relationships conveyed through presentation programmatically determinable using the following techniques:

Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:
  1. G117: Using text to convey information that is conveyed by variations in presentation of text

  2. Making information and relationships conveyed through presentation programmatically determinable or available in text using the following techniques:

Advisory Techniques for 1.3.1 - Info and Relationships
Failures for SC 1.3.1 - Info and Relationships

Meaningful Sequence:

1.3.2 When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)Understanding Success Criterion 1.3.2

Advisory Techniques for 1.3.2 - Meaningful Sequence
  • 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)

  • Using appropriate justification 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)

Sensory Characteristics:

1.3.3 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)Understanding Success Criterion 1.3.3

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

Advisory Techniques for 1.3.3 - Sensory Characteristics
  • Using an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning (future link)

Distinguishable:

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

Advisory Techniques for Guideline 1.4

Use of Color:

1.4.1 Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)Understanding Success Criterion 1.4.1

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.

Sufficient Techniques for 1.4.1 - Use of Color
Situation A: If the color of particular words, backgrounds, or other content is used to indicate information:
  1. G14: Ensuring that information conveyed by color differences is also available in text

  2. G122: Including a text cue whenever color cues are used

  3. Ensuring that when text color differences are used to convey information, the text style is visually differentiated without color differences (future link)

Situation B: If color is used within an image to convey information:
  1. G111: Using color and pattern

  2. G14: Ensuring that information conveyed by color differences is also available in text

Advisory Techniques for 1.4.1 - Use of Color

Audio Control:

1.4.2 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 which can be set independently from the overall system volume level. (Level A)Understanding Success Criterion 1.4.2

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.

Sufficient Techniques for 1.4.2 - Audio Control
  1. G60: Playing a sound that turns off automatically within three seconds

  2. Playing sounds only on user request (future link)

  3. Providing a control near the top of the Web page that turns off sounds that play automatically (future link)

  4. Providing a user interface control to pause or stop synchronized media (future link)

Advisory Techniques for 1.4.2 - Audio Control
  • Providing a sitewide preference to turn off audio in addition to providing a control near the top of the Web page that turns off sounds that play automatically (future link)

Contrast (Minimum):

1.4.3 The visual presentation of text and images of text has a contrast ratio of at least 5:1, except for the following: (Level AA)Understanding Success Criterion 1.4.3

  • Large Print: 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 incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement.

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

Sufficient Techniques for 1.4.3 - Contrast (Minimum)
Situation A: text is less than 18 point if not bold and less than 14 point if bold
  1. G18: Ensuring that a contrast ratio of at least 5:1 exists between text (and images of text) and background behind the text

  2. G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults

  3. Providing a control with at least a 5:1 contrast ratio that allows users to switch to a presentation that uses sufficient contrast (future link)

Situation B: text is as least 18 point if not bold and at least 14 point if bold
  1. G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

  2. G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults

  3. Providing a control with at least a 5:1 contrast ratio that allows users to switch to a presentation that uses sufficient contrast (future link)

  4. Providing sufficient color contrast for empty text fields (future link)

Advisory Techniques for 1.4.3 - Contrast (Minimum)
  • Using a higher contrast value for text that is over a patterned background (future link)

  • Using a light pastel background rather than a white background behind black text (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

  • Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark

  • 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 color contrast in graphs and charts (future link)

  • Using a 3:1 contrast ratio or higher as the default presentation (future link)

Resize text:

1.4.4 Text (but not images of text) can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)Understanding Success Criterion 1.4.4

Sufficient Techniques for 1.4.4 - Resize text
  1. G142: Using a technology that has commonly-available user agents that support zoom

  2. Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:

  3. Ensuring that there is no loss of content or functionality when the text resizes and blocks don't resize (future link)

  4. Providing controls on the Web page that incrementally change the size of the text (future link)

  5. Providing options within the content to switch between layouts that use a variety of font sizes (future link)

Advisory Techniques for 1.4.4 - Resize text
  • Providing large fonts by default (future link)

  • Using page-percent for container sizes (future link)

  • Avoiding scaling font sizes smaller than the user-agent default (future link)

    Note: The author won't actually know the font size, but should avoid percentage scaling that results in less than 100%

  • Avoiding justified text (future link)

  • Providing sufficient inter-line and inter-column spacing (future link)

  • Providing different sizes for non-text content when it cannot have an equivalent accessible alternative (future link)

  • Avoiding the use of text in raster images (future link)

  • Using server-side scripts to resize images of text (future link)

  • C17: Scaling form elements which contain text (CSS)

  • Ensuring that text in raster images is at least 18pt (future link)

  • Scaling text down to 50% (future link)

  • C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized (CSS)

Images of Text:

1.4.5 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: (Level AA)Understanding Success Criterion 1.4.5

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

Sufficient Techniques for 1.4.5 - Images of Text
  1. Using CSS to control visual presentation of text (future link)

  2. Providing controls on the Web page that change the visual presentation of text (future link)

  3. G140: Separating information and structure from presentation to enable different presentations

Advisory Techniques for 1.4.5 - Images of Text
General techniques for non-text content
  1. Identifying informative non-text content (future link)

CSS Techniques
  1. C12: Using percent for font sizes (CSS)

  2. C13: Using named font sizes (CSS)

  3. C14: Using em units for font sizes (CSS)

  4. C8: Using CSS letter-spacing to control spacing within a word (CSS)

  5. C6: Positioning content based on structural markup (CSS)

  6. Avoid applying text styling to text characters within a word (future link)

  7. Changing line height (future link)

  8. Specifying the font family (future link)

  9. Changing letter-spacing (future link)

  10. Aligning text (future link)

  11. Changing the case of text (future link)

  12. Indenting paragraphs (future link)

  13. Layering text over images (future link)

  14. Italicizing text (future link)

  15. Increasing font weight of text (future link)

  16. Styling the first line of a block of text (future link)

  17. Styling the first letter of a block of text (future link)

  18. Adding a drop-shadow to text (future link)

Contrast (Enhanced):

1.4.6 The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)Understanding Success Criterion 1.4.6

  • Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 5:1;

  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement.

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

Sufficient Techniques for 1.4.6 - Contrast (Enhanced)
Situation A: text is less than 18 point if not bold and less than 14 point if bold
  1. G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text

  2. G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults

  3. Providing a control with at least a 7:1 contrast ratio that allows users to switch to a presentation that uses sufficient contrast (future link)

Situation B: text is as least 18 point if not bold and at least 14 point if bold
  1. G18: Ensuring that a contrast ratio of at least 5:1 exists between text (and images of text) and background behind the text

  2. G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults

  3. Providing a control with at least a 7:1 contrast ratio that allows users to switch to a presentation that uses sufficient contrast (future link)

Advisory Techniques for 1.4.6 - Contrast (Enhanced)
  • 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 light pastel background rather than a white background behind black text (future link)

  • Using a higher contrast values for lines in diagrams (future link)

  • Using greater contrast level for red-black text/background combinations

  • Using colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark

  • 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 color contrast 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)

Low or No Background Audio:

1.4.7 For audio content that (1) is not an audio CAPTCHA and (2) contains speech in the foreground, at least one of the following is true: (Level AAA)Understanding Success Criterion 1.4.7

  • No Background: The audio does not contain background sounds.

  • Turn Off: The background sounds can be turned off.

  • 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sound effects.

    Note: Per the definition of "decibel," background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

Advisory Techniques for 1.4.7 - Low or No Background Audio
  • Providing a way for users to adjust auditory levels of foreground and background sound independently (future link)

Visual Presentation:

1.4.8 For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)Understanding Success Criterion 1.4.8

  1. foreground and background colors can be selected by the user

  2. width is no more than 80 characters or glyphs (40 if CJK)

  3. text is not justified (aligned to both the left and the right margins)

  4. line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing

  5. text is resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window

Sufficient Techniques for 1.4.8 - Visual Presentation

Instructions: Since this is a multi-part success criterion, you must satisfy one of the numbered items for each of the requirements below.

First Requirement: Techniques to ensure foreground and background colors can be selected by the user
  1. Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content (future link) OR

  2. Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors (future link) OR

  3. Providing an additional stylesheet that does not specify colors for the main content body (future link) OR

  4. G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text OR

  5. G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults OR

  6. Specifying all foreground and background color attributes of any given element in CSS (future link) OR

  7. Providing a multi color selection tool on the page for foreground and background colors (Scripting, future Link)

Second Requirement: Techniques to ensure width is no more than 80 characters or glyphs (40 if CJK)
  1. Not interfering with the user agent's reflow of text as the viewing window is narrowed (General, Future Link) OR

  2. C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized (CSS)

Third Requirement: Techniques to ensure text is not justified (aligned to both the left and the right margins)
  1. C19: Specifying alignment either to the left OR right in CSS (CSS) OR

  2. Providing a feature to remove full justification of text (future link) OR

  3. Aligning text on only one side (according to the text-direction of the language of the content) (General, future link)

Fourth Requirement: Techniques to ensure line spacing [begin add] (leading) [end add] is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing
  1. Providing a button on the page to increase line spaces and paragraph spaces. (HTML, CSS, future link) OR

  2. C21: Specifying line spacing in CSS (CSS)

Fifth Requirement: Techniques to ensure text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window
  1. Not interfering with the user agent's reflow of text as the viewing window is narrowed (General, Future Link) OR

  2. G146: Using liquid layout AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:

  3. Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text (future link)

Advisory Techniques for 1.4.8 - Visual Presentation
  • Using a hover effect to highlight a paragraph, list items, or table cells (HTML, CSS) (future link)

  • Presenting text in sans serif font or providing a mechanism to achieve this (CSS) (future link)

  • Using vertical (bulleted or numbered) lists rather than inline lists (future link)

  • Using upper and lower case according to the spelling conventions of the text language (future link)

  • Providing large fonts by default (future link)

  • Avoiding the use of text in raster images (future link)

  • Avoiding scaling font sizes smaller than the user-agent default (future link)

  • Providing sufficient inter-column spacing (future link)

  • Avoiding centrally aligned text (future link)

  • Avoiding chunks of italic text (future link)

  • Avoiding overuse of different styles on individual pages and in sites (future link)

  • Making links visually distinct (future link)

  • Providing expandable bullets (future link)

  • Show/hide bullet points (future link)

  • Putting an em-space or two spaces after sentences (future link)

Images of Text (No Exception):

1.4.9 Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)Understanding Success Criterion 1.4.9

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

Sufficient Techniques for 1.4.9 - Images of Text (No Exception)
  1. Using CSS to control visual presentation of text (future link)

  2. Providing controls on the Web page that change the visual presentation of text (future link)

  3. G140: Separating information and structure from presentation to enable different presentations

Advisory Techniques for 1.4.9 - Images of Text (No Exception)
General Techniques for Non-Decorative Content
  • Using server-side scripts to resize images of text (future link)

CSS Techniques

Keyboard Accessible:

Guideline 2.1 Make all functionality available from a keyboard Understanding Guideline 2.1

Keyboard:

2.1.1 All functionality of the content is operable 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. (Level A)Understanding Success Criterion 2.1.1

Note 1: This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path dependent input but the underlying function (text input) does not.

Note 2: This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.

Sufficient Techniques for 2.1.1 - Keyboard
  1. Ensuring keyboard control by using one of the following techniques.

    • Using HTML form controls and links (future link)

  2. G90: Providing keyboard-triggered event handlers using one of the following techniques:

Advisory Techniques for 2.1.1 - Keyboard
  • Providing keyboard shortcuts to important links and form controls (future link)

  • Using unique letter combinations