WCAG 2.0 for Designers

WCAG 2.0 for DesignersDesigning Accessible Content

Tim Madle, Associate Creative [email protected]

Web Content Accessibility Guidelines (WCAG) are a series of guidelines for making web content accessible for all users, especially those with disabilities. The full current version (2.0) lives here: w3.org/TR/WCAG/

Level A We must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content.

Level AA We should satisfy these requirements, otherwise some groups will find it difficult to access the web content.

Level AAA We may satisfy these requirements, in order to make it easier for some groups to access the web content.

Of the 38 Level A and AA provisions,

about 50% impact website design.

Visual / Audio Design

Guideline 1.4.1 level A

ColorColor should not be the only visual means of conveying essential information. Recommended strategies include providing text cues or using patterns in addition to different colors.

Guideline 1.4.3 level AA

ContrastText should have a contrast ratio1 of at least 4.5 to 1 to accommodate users with mild visual impairments. Exceptions include text that is large,2 purely decorative, part of an inactive interface component or part of a logo.

1 There are many online tools to check contrast ratio, including snook.ca/technical/colour_contrast/colour.html.2 Large text is defined as ≥18px if not bold and ≥14px if bold, for which a 3 to 1 contrast ratio is sufficient.

Guideline 1.4.4 level AA

Text SizeText should be resizable up to 200% for users with mild visual impairments.1

1 Many modern browsers provide a zoom function for the entire page to accommodate this.

Guideline 2.3.1 level A

SeizuresContent should not be designed in a way known to cause seizures in users with photosensitive epilepsy. Elements occupying a significant portion of the display that flash more than three times in one second should be tested for compliance.1

1 The Trace Center Photosensitive Epilepsy Analysis Tool (PEAT) is available at trace.wisc.edu/peat/

Guideline 2.4.7 level AA

FocusUsers with motor impairments who rely on the keyboard to navigate need a clear visual focus indicator.1

1 Many modern browser’s include built-in support to accommodate this.

Guideline 3.2.4 level AA

ConsistencyUsers with disabilities may develop search strategies to efficiently navigate a site, so label recurring functions consistently.

Guideline 3.3.2 level A

FormsLabels or instructions should be included whenever user input is required, and should be positioned near the elements they reference.

Guideline 3.3.2 level A

InstructionsInstructions should not depend solely on a user’s ability to see the content as presented. For example, “Press the button on the right” requires visual information, while “Press the ‘submit’ button on the right” does not.

Guideline 1.4.2 level A

AudioAudio that plays automatically may interfere with screen readers. Any audio that plays automatically must be less than three seconds, or provide an easily accessible mechanism to stop it.

InteractionDesign

Guideline 2.1.1 level A

KeyboardSites should be fully operable using only the keyboard.

Guideline 3.2.3 level AA

NavigationNavigation should appear in a consistent and predictable order throughout a site so users can efficiently navigate.

Guideline 2.4.3 level A

Focus OrderWhen navigating in a sequential order (e.g. via the Tab key), the focus should follow the natural reading order.

Guidelines 3.2.1, 3.2.2 level A

On Focus/InputBecause it can be disorienting, changes of context should not occur when shifting focus or choosing from a selection, but rather when the user takes a specific action to do so.

Guideline 3.3.1 level A

ErrorsIf an input error is detected, the error should be identified and described to the user in a text form.

Guideline 2.2.2 level A

Motion/UpdatesContent that moves or automatically updates can cause issues for those with disabilities. Ways to start and stop such activity should be provided.

Guideline 2.2.1 level A

Time LimitsUsers with disabilities may require significantly more time to complete tasks due to limitations in assistive technologies, so time limits should be avoided whenever possible.1

1 Exceptions include when the user can turn off, adjust or extend the time limit as needed, when it is a real-time limit (e.g. an online auction), when the time limit is essential to the activity, or when it is longer than 20 hours.

Guarino Reid, Loretta and Andi Snow-Weaver. “WCAG 2.0 for Designers: Beyond Screen Readers and Captions” Proceedings of the 13th International Conference on Human-Computer Interaction. Springer-Verlag, 2009. pp. 674-682. v1 July 24, 2013 1:50 PM