Web Accessibility Evaluation with WAVE presented at the 2009 CSUN conference

1. Web Accessibility
Evaluation with WAVE
Aaron Andersen, Diogenes Hernandez, and Jared Smith
http://webaim.org

2. WAVE...
• 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

3. WAVE and Accessibility Guidelines
• 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.

4. No automated tool can tell you if
your page is accessible
Your page is never “WAVE approved”

5. What’s new with WAVE?
• Many new rules
• Updated toolbar (coming very soon)
• Entirely new back-end framework
• Single source for web site and toolbar
• Internationalization

6. apiology
n. the scientific or systematic study of bees

7. How WAVE works
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.

8. Nearly one million WAVE reports in one year.
~2800/day.
Upload
10%
Code
9%
URL
81%

9. Number of Errors Detected
3-5 6-10
8% 11%
2
8%
11+
12%
1
13%
0
48%

10. 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

11. 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

12. WAVE icons
Red icons are bad

13. 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

14. 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.

15. WAVE Demo

16. New WAVE icons
Blinking content
Empty heading
Unlabelled form element with title
ARIA role, state, or property
Missing fieldset
Missing focus styles (coming soon)

17. 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

18. Thank You!
Aaron Andersen, Diogenes Hernandez, and Jared Smith
http://webaim.org