accessibility check-up
DESCRIPTION
Doing an efficient, high-level evaluation of your websiteTRANSCRIPT
Accessible Web Scott WilliamsOffice of Institutional [email protected]@swimsy
Accessibility Checkup
Visual inspection
Tiny type and small mouse targets
Poor color contrast
Continuous motion or sound (the modern equivalent of <blink>)
Busy or cluttered layout, complicated menus
Videos are captioned
Big items
You should be able to operate entire site from keyboard alone
Readability: font size and contrast
Links should be uniquely identifying and descriptive
Linked images MUST have alt text describing destination page
Form elements should be labeled properly
Videos must be captioned
Evaluation tools
Keyboard — using your tab, arrow, and enter keys
AChecker — Online accessibility checker
WAVE — Firefox browser add-on toolbar
Contrast Color Checker — Firefox browser add-on with results displayed in table format
Mobile devices
The keyboard
Keyboard accessibility is one of the cornerstones of web accessibility
Screen reader users and those with motor impairments cannot use a mouse
You should be able to easily navigate to any part of your web pages or website and perform all functionality using just the keyboard
Procedure: http://www.umich.edu/webaccess/eval/keyboard.html
Testing keyboard accessibility
Unplug your mouse
Employ the tab, arrow, return, and spacebar keys
Tab through the entire page. Note sequence. Can you see keyboard focus?
Operate menus and widgets
Submit forms
Potential problems
Excessive tabbing to reach main content Solution: employ skip-to-content link that has visible
focus
Links not visible on keyboard focus Solution: Add a:focus style to highlight focus
Javascript elements not keyboard accessible or harbor “keyboard traps” Solution: Employ ARIA to ensure keyboard a11y
Excessive number of links Solution: Consider chunking page differently, going
“narrower and deeper” with the IA
AChecker
An online accessibility evaluator.
On a single page: cites the line number of the accessibility
violation shows the errant code gives the appropriate remediation links to a resource page specific to the problem
Concentrate on “Known Problems” category.
Possible issues
Lack of alt text for images
Lack of labels for form elements
Color contrast
Mouse event handlers
AChecker screen shots
Achecker screen shot 2
Using AChecker
Enter URL of site you are affiliated with
Select compliance level under “Options” link
If an authenticated page: View source
WAVE Accessibility Toolbar
WAVE uses a distinctive icon approach in displaying accessibility information.
Displays: missing alternative text for images missing form labels table structure script elements and event handlers document structure and reading order and many more …
Icon key explains icons
WAVE screen shot
WAVE
Very common to not see all icons for errors indicated in count. Frustrating. Spot what you can. No error listing function.
Icons distort page layout, sometimes severely.
Incorrect heading order. Use <h2>s for navigation headings. It’s fine if these precede the first <h1>, as they will in most cases. Can also use document landmark roles.
Null or empty alternative text: is appropriate for spacer images or non-informative images.
Color contrast checker
Juicy Studio add-on for Firefox
Works on Macs, PCs, and Linux platforms
examines the information in your style sheet to and web page calculate the contrast
Cannot be used to evaluate graphic or Flash content
Cannot evaluate text over a background image
Firefox menu pick: Tools > Colour Contrast Analyser > Luminosity Contrast Ratio
Contrast display page
Mobile devices
Will uncover mouse event handlers
Limited viewing scope
Large number of links burdensome
Improving site for mobile also makes site more accessible
U-M resources
http://umich.edu/webaccess/
Evaluation checklist:http://umich.edu/webaccess/best/quickguide.html
Evaluation tools and procedures:http://umich.edu/webaccess/eval/