Web Accessibi l ity Evaluation with WAVE

Aaron Andersen, Diogenes Hernandez, and Jared Smith http://webaim.org

• is a web accessibility evaluation tool.• shows your web content with embedded

accessibility indicators.• is provided as a free service by WebAIM.• is available at wave.webaim.org

WAVE...

• WAVE does not prescribe to any one set of guidelines.

• It helps developers evaluate against Section 508, WCAG, and others.

• It also goes well beyond guidelines.

• Our goal is to reveal all accessibility information to the user so they can make an informed decision about accessibility.

WAVE and Accessibility Guidelines

Your page is never “WAVE approved”

No automated tool can tell you if your page is accessible

• Many new rules• Updated toolbar (coming very soon)• Entirely new back-end framework

• Single source for web site and toolbar• Internationalization

What’s new with WAVE?

apiologyn. the scientific or systematic study of bees

1. User submits web page address, uploads a file, or submits code.

2. WAVE downloads the HTML of the page.3. The Mozilla rendering engine (think Firefox) generates

a virtual representation (DOM) of the page.4. The page is checked against WAVE rules. Rules are

defined in an XML-based language.5. Appropriate WAVE icons and descriptions are inserted

into the original document.6. The modified document is shown to the user.

How WAVE works

Nearly one million WAVE reports in one year. ~2800/day.

URL81%

Upload10%

Code9%

048%

113%

28%

3-58%

6-1011%

11+12%

Number of Errors Detected

Other data

• 203 feedback messages provided by the community

• Speed has doubled as we’ve made improvements

• 90% of reports were Icon View• Many thousands of toolbar downloads

WAVE Firefox Toolbar

• Same features as server version• Evaluates content directly within Firefox• Allows evaluation of password protected,

intranet, sensitive, and dynamic web content

• Evaluates content after scripts, AJAX, and CSS have rendered

WAVE icons

Red icons are bad

WAVE icons

Green icons are (probably) good

Yellow icons indicate potential problems that should be manually checked

Blue and all other icons indicate semantic and structural elements

Trapezoidal icons apply to images

WAVE Demo

http://new.wave.webaim.org

This is our development server, so don’t complain if it’s down, broken, inaccurate, or steals your last beer and

feigns innocence.

WAVE Demo

Empty heading

New WAVE icons

Unlabelled form element with title

Blinking content

ARIA role, state, or property

Missing focus styles (coming soon)

Missing fieldset

Future plans

• New and better evaluation rules• API for quick evaluation and integration into

other tools• Better ARIA reporting• Site auditing and reporting• More internationalization• Cognitive accessibility rules or options

Thank You!Aaron Andersen, Diogenes Hernandez, and Jared Smith

http://webaim.org