Mapping Section 508 to WCAG 2.0

Wayne Dick and Tom Jewett

This is a summary of a presentation that we gave at the 2009 International Conference on Technology and Persons with Disabilities (CSUN), titled “How to Use W3C Guidelines to Achieve Legally Compliant Web Sites.” Also contained here, but not presented in that talk, is a listing of the suggested WCAG 2.0 techniques for each of the Section 508 paragraphs 1194.22 (a)–(p).

Introduction

At first glance, the new World-Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 may seem to be “just more work” for developers who believe that they are “only required” to meet legal standards such as Section 508 of the (United States) Rehabilitation Act. Fortunately, this is not the case. In fact, after carefully mapping Section 508 to WCAG 2.0, we believe that the two documents compliment each other:

• WCAG 2.0 techniques can be used to unambiguously meet every one of the Section 508 guidelines.
• Conversely, a Section 508-compliant page using these techniques will also conform to WCAG 2.0 Level A and part of Level AA (with the exception of three criteria which we list as “strongly recommended” below).

The mapping strategy

We will illustrate our six-step process with the first criterion of Section 508, paragraph 1194.22 (a): “A text equivalent for every non-text element shall be provided (for example via alt or longdesc attributes, or in element content).”

1. We state the need for this criterion: “Non textual information like pictures, graphs or charts cannot be perceived by many users. Assistive technology cannot identify a non-text element or recognize the meaning of a non-text element without textual content to describe it.”
2. We identify what is needed for “equally effective access” under the criterion: “Text must be provided for non-text elements so that the identity and meaning can be conveyed by assistive technology in a mode that the user can perceive.”
3. Now referencing WCAG 2.0, we identify one or more of the four principles (perceivable, operable, understandable, robust) that apply to this criterion; in this case Principle 1, Perceivable.
4. From here, we follow the WCAG 2.0 structure to identify which guidelines apply to this criterion; in this case Guidelines 1.1, Text Alternatives and Guideline 1.3, Adaptable.
5. We find that there are two success criteria in WCAG 2.0 that relate to the applicable guidelines: 1.1.1, Non-Text Content, and 1.3.3, Sensory Characteristics.
6. Finally, we move from the normative portion of the WCAG to identify the specific sufficient techniques that developers may use to insure that their work is as accessible as it can be made with current technology.

For the complete mapping of each Section 508 paragraph 1194.22 guideline in this form, excluding the techniques, please see Wayne's paper “Mapping Section 508 to WCAG 2.0 Level A.”

Suggested techniques

The WCAG 2.0 techniques listed here represent only the authors' suggestions for each 508 checkpoint; they are re-arranged and in many cases paraphrased from the original documents. For each technique, the corresponding success criterion is listed in parentheses, e.g., (1.1.1), and linked to its description in the official W3C Recommendation. Please also see the W3C's How to Meet WCAG 2.0 page for detailed information on these and many more useful techniques.

Text alternatives

1194.22 (a) A text equivalent for every non-text element shall be provided (for example via alt or longdesc attributes, or in element content)

• If a short description can serve the same purpose and present the same information as the non-text element, then use a short text alternative (1.1.1).
• If a short description cannot serve the same purpose or convey the same meaning as the non-text item, then provide both a short text alternative and a description of the non-text that is long enough to convey all the meaning. This long description must be next to the non-text item or connect through a link (1.1.1).
• If the non-text item is a control or accepts user input, provide a text alternative that identifies the purpose of the non-text control (1.1.1). See paragraph 1194.22 (n) for form elements. Note: “control” also includes image maps and anchors, even if the anchors do not include images.
• If the non-text item is multi-media or time-based media, see paragraph 1194.22(b).
• If the non-text is CAPTCHA, then provide a text alternative that describes the purpose of the CAPTCHA and alternative forms of CAPTCHA using output modes for different types of sensory perception (1.1.1).
• If a non-text item should be ignored by assistive technology, then implement or mark the non-text content so that it will be ignored by assistive technology (1.1.1).

Multimedia

1194.22 (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

• If the content is prerecorded audio-only, provide a full text transcript for the audio (1.2.1).
• If the content is prerecorded video-only, provide a full text transcript of the video content (1.2.1).
• If the content is synchronized (audio and video) media, provide open or closed captions (1.2.2).
• If the content contains video interaction that is not otherwise described, provide a fully synchronized text alternative or sound track that includes the interaction (1.2.3).

Color

1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

• If the color of particular words, backgrounds, or other content is used to indicate information, ensure that information conveyed by color differences is also available in text (1.4.1).
• If color is used within an image to convey information, use color and pattern or also convey the information by text (1.4.1).
• For all text content or text contained in images, ensure that a contrast ratio of at least 5:1 exists between text and background (1.4.3).

Style sheets

1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.

• If technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable (e.g., HTML), use semantic elements to mark up that structure. Note: this includes headings, lists, tables (see also paragraphs 1194.22 [g] and [h]), forms (see also paragraph 1194.22 [n]), and emphasized or special text (1.3.1).
• If the technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable (e.g., plain text), use standard text conventions for paragraphs, lists, and headings (1.3.1).
• When the sequence in which content is presented affects its meaning, order the content so that it is meaningful without styles and without table layout (1.3.2).
• If content is made visible or functionality is provided by style sheets through mouse action, also provide keyboard-triggered event handlers (2.1.1).
• Ensure that text can be resized up to 200 percent without loss of content or functionality and that text containers resize when the text resizes (1.4.4).

Server-side image maps

1194.22 (e) Redundant text links shall be provided for each active region of a server-side image map.

• Ensure keyboard control by using HTML links (2.1.1).
• Note: server-side image maps are obsolete; client-side image maps should be used instead.

Client-side image maps

1194.22 (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

• See paragraph 1194.22 (a) for accessibility requirements for client-side image maps.
• Note: all regions can be defined with currently-available geometric shapes.

Simple data tables

1194.22 (g) Row and column headers shall be identified for data tables.

• If the data table has a single level of column (and row, if applicable) headers, use the scope attribute to associate header cells and data cells. (1.3.1)

Complex data tables

1194.22 (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

• If the data table has two or more logical levels of row or column headers, use the id and headers attributes to associate data cells with header cells (1.3.1)

Frames

1194.22 (i) Frames shall be titled with text that facilitates frame identification and navigation.

• Use the title attribute of frame and iframe elements (2.4.1).

Flicker

1194.22 (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

• No element should flash more than three times in any one second period, and the flash is below the general flash and red flash thresholds (2.3.1).

Text-only

1194.22 (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

• Use standard text conventions for paragraphs, lists, and headings (1.3.1). Note: there is no reason today to make a text-only alternative for a properly coded HTML page. There are good reasons to make an HTML alternative for an all-Flash site, but the update requirement of this paragraph would still apply to it, along with the rest of 508.

Scripting

1194.22 (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

• If using a standard user interface component in a markup language, use standard HTML form controls and links and use functions of the Document Object Model (DOM) to add content to the page (4.1.2).
• If using script or code to re-purpose a standard user interface component in a markup language, use functions of the Document Object Model (DOM) to add content to the page (4.1.2).
• If using a standard user interface component in a programming technology, use the accessibility API features of that technology (4.1.2).
• If creating your own user interface component in a programming language, use the accessibility API features of the platform(s) on which the component will run (4.1.2).
• If content is made visible or functionality is provided by scripts through mouse action, also provide keyboard-triggered event handlers (2.1.1).

Applets and plug-ins

1194.22 (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with paragraphs 1194.21(a) through (l).

• Varies with the specific applet or plug-in.

Forms

1194.22 (n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

• Identifying controls: Use label elements to associate text with controls; use optgroup to group option elements inside a select; group form controls with fieldset and legend as appropriate to the content (1.3.1).
• Keyboard control: Ensure keyboard control of all elements; provide keyboard-triggered event handlers; ensure that users are not trapped in content (2.1.1, 2.1.2).
• Context: Ensure that when any component receives focus, it does not initiate a change in context and that changing the setting of any user interface component does not automatically cause a change of context (3.2.1, 3.2.2).
• Input assistance: Provide labels or instructions when content requires user input; if an input error is detected, identify the item that is in error and describe the error to the user in text (3.3.1, 3.3.2).

Skip navigation

1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.

• Group blocks of repeated material in ways that can be skipped, using heading elements or other structural elements to group links (2.4.1).
• (generally less effective): Create links to skip blocks of repeated material (2.4.1).

Timed response

1194.22 (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

• If there are session time limits, provide a checkbox at the start that allows users to ask for a longer time limit or no session time limit (2.2.1).
• If a time limit is controlled by a script on the page, provide a way for the user to turn the time limit off or to set the limit to 10 times the default (2.2.1).
• Real-time exception: the time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible (2.2.1).
• Essential exception: the time limit cannot be extended without invalidating the activity (2.2.1).
• For moving, blinking, scrolling, or auto-updating information, allow the user to pause and restart it (2.2.2).
• For moving, blinking, or scrolling information that is purely decorative, allow the user to stop or hide it (2.2.2).

Strongly recommended

The following techniques have no specific counterpart in Section 508, but will complete a page's conformance with WCAG 2.0 Level A.

• Provide descriptive titles for web pages using the title element (2.4.2).
• Identify default human language(s) using language attributes on the html element (3.1.1).
• Validate HTML, XML (including WAI-ARIA) and CSS against the appropriate on-line or off-line validator (4.1.1).