Demystifying Web Content Accessibility Guidelines Zach Lattin

What is POUR? Perceivable: make content and controls perceivable by all users. Operable: make content and controls operable by all users. Understandable: Make content and user interfaces understandable by all users.   Robust: Make content robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Perceivable (Text alternatives, alternatives for time-based media, content that can be presented in different ways, easy to see and hear content.)

Perceivable: Text Alternatives and Time-based Media -Alt-text for images. Time-based media: -Captioned videos. -Transcript for audio.

Perceivable: adaptable and distinguishable -Headings, lists, Aria landmarks, and other semantic elements. -Logical and intuitive tab order and read order. -Avoid using visual characteristics to communicate information. Distinguishable -Sufficient color contrast between text color and background color. -Content scales well when enlarged up to 200%.

(Keyboard-Accessible, enough time, seizures, help users navigate) Operable (Keyboard-Accessible, enough time, seizures, help users navigate)

Operable: Keyboard Accessible, Enough Time -All menus, links and other controls / focusable elements can be operated by keyboard so that users who don’t use a mouse can access them. -Visible focus indicator so that users can track their position. Enough time -Pages that have time limits should include mechanisms to adjust limits for users who need more time.

Operable: Seizures, Navigable -Avoid using content that flashes or flickers. Navigable -A mechanism is available to bypass blocks of content. -Webpages have titles that describe topic or purpose. -Good tab order. -Two or more ways of finding content in a webpage. -Links contain meaningful text independent of surrounding context.

Understandable (Readable and understandable, predictable, help users avoid and correct mistakes)

Understandable: Readable, Predictable -The language of a document or webpage is defined and defined correctly. Predictable: -Avoid the use of links or controls that automatically trigger a change in context. -Use consistent navigation links.

Understandable: Input Assistance -Online forms provide helpful and consistent error and verification messages.

(Maximize compatibility with current and future user agents) Robust (Maximize compatibility with current and future user agents)

Robust: Compatible Compatible -Coded using valid html. -Rich dynamic web interfaces (modal dialogs, drop-down menus, carousels etc.) include ARIA markup.

Levels of Conformance AAA, AA, and A

Levels of Conformance: Definition Each criterion previously covered has a level of conformance associated with it: AAA, AA, or A. AAA: Very difficult to achieve, highest level. AA: The level required by Clark Accessibility Policy. A: Very basic level of accessibility.

Levels of conformance: Examples of AAA Criteria Sign language interpretation is provided for all prerecorded audio content in synchronized media. The visual presentation of text and images of text has a contrast ratio of at least 7:1. All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. Web pages do not contain anything that flashes more than three times in any one second period. Information about the user's location within a set of Web pages is available.

Levels of conformance: Examples of AA Criterion Captions are provided for all live audio content in synchronized media. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. More than one way is available to locate a Web page within a set of Web pages. Headings and labels describe topic or purpose. Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. 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.

Levels of conformance: Examples of A Criterion 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. When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. 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. 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. All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes… Web pages do not contain anything that flashes more than three times in any one second period. The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. When any component receives focus, it does not initiate a change of context. Labels or instructions are provided when content requires user input. 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.

Wave Extension Demo Wave extension can run in Chrome or Firefox and checks only programmatically determinable elements of WCAG 2.0 guidelines: http://wave.webaim.org/extension/ Install it and have fun!

Sources and References WCAG in plain English: http://www.washington.edu/accessibility/checklist/ Web content Accessibility Guidelines (actual document): https://www.w3.org/TR/WCAG20/ Wave extension http://wave.webaim.org/extension/ Clark Accessibility Policy: http://www.clark.edu/accessibility/