Incorporating Accessibility into your Usability ReviewsAngela Colter @angelacolter #a11ySTC Tech Comm Summit 2011

)

)

Why bother?

Because recommendations that solve the usability issue

may not solve the accessibility issue.

Because this is an excellent opportunity, maybe the only

one, to bring attention to accessibility.

)

Types of disabilitiesVisual Disability Strategies Barriers

Blindness Screen reader (output to

speech synthesizer or

Braille display), text

browser, voice browser

Images with no alternative text, tables

that don’t make sense when read serially,

poorly labeled forms, illogical tab

sequence, lack of keyboard support for

commands

Low vision Large monitor, increase

font size, screen magnifier

Absolute font sizes, loss of context when

enlarged, poor contrast, text in images

Color blindness Style sheet to override

font and background color

Poor contrast, using color only to indicate

important information

Hearing Disability Strategies Barriers

Deafness and

hard-of-hearing

Captions, transcripts Lack of captions, lack of content-related

images, lack of clear and simple language

Source: http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/

)

Types of disabilitiesPhysical Disability Strategies Barriers

Motor impairment Keyboard, specialized

mouse, head-mouse,

head-pointer or mouth-

stick, voice-recognition

software, eye-gaze system,

chording

Time-limited response options, lack of

support for keyboard alternatives to

mouse commands, illogical tab order for

forms.

Dyslexia Getting information

through several modalities

at once

Lack of alternative modalities

Attention deficit

disorder

Turn off animations Distracting elements that cannot be

turned off, lack of clear and consistent

organization

Seizure disorders Turn off animations,

blinking text or audio

Use of visual or audio frequencies that

can trigger seizures

)

WCAG 2.0 http://www.w3.org/TR/WCAG20/Principle Guideline Explanation

Perceivable Text alternative Provide text alternatives for any non-text content

Time-based media Provide alternatives for time-based media

Adaptable Create content that can be presented in different ways

without losing information or structure

Distinguishable Make it easier for users to see and hear content

Operable Keyboard accessible Make all functionality available from a keyboard

Enough time Provide users enough time to read and use content

No seizures Don’t design content in a way known to cause seizures

Navigable Provide ways to help users navigate, find content, and

determine where they are

Understandable Readable Make text content readable and understandable

Predictable Make Web pages appear and operate in predictable ways

Input assistance Help users avoid and correct mistakes

Robust Compatible Maximize compatibility with user agents

)

Keyboard accessible

Can you do everything with the keyboard that you can with a mouse?

Can you see what has focus?

KeyboardTab through all links and form fieldsTrigger links

Images

Is the same content / functionality conveyed without images?

Web developer toolbar Wave toolbarDisable images Text only

)

Forms

Are labels associated with form controls?

Mouse Wave toolbarClick on label Errors, features and alerts

)

Color contrast

Is there sufficient contrast?

Graybit

)

Color contrast

Is there sufficient contrast?

Paciello Group

Color Contrast Analyser Check contrast ratio of foreground vs. background

)

Color contrast

Is there sufficient contrast?

Snook.ca

Color Contrast Check

)

Link Text

Does link text make sense out of context?

FangsLinks list

)

Text Resize

Is the page readable and functional when text size is doubled?

NoSquintSet text zoom level to 200%

)

List of Tools UsedWCAG 2

WebAIM WCAG 2 Checklist

Firefox Web Developer Toolbar

WAVE Toolbar

Paciello Group Color Contrast Analyser

Snook.ca Color Contrast Check

Fangs

NoSquint

Firebug

w3.org/WAI/WCAG20/quickref/

webaim.org/standards/wcag/checklist

addons.mozilla.org/en-US/firefox/addon/60

wave.webaim.org

paciellogroup.com/resources/contrast-analyser.html

snook.ca/technical/colour_contrast/colour.html

addons.mozilla.org/en-US/firefox/addon/402

addons.mozilla.org/en-US/firefox/addon/2592

addons.mozilla.org/en-US/firefox/addon/1843

)

Want more?Web: angelacolter.com/tools-for-conducting-an-accessibility-review/Email: acolter@electronicink.comTwitter: @angelacolter