Accessible Web Scott WilliamsOffice of Institutional Equityswims@umich.edu@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/

swims@umich.edu