Web Accessibility
     Evaluation with WAVE

Aaron Andersen, Diogenes Hernandez, and Jared Smith
                 http://w...
WAVE...
• is a web accessibility evaluation tool.
• shows your web content with embedded
  accessibility indicators.
• is ...
WAVE and Accessibility Guidelines

• WAVE does not prescribe to any one set of
  guidelines.
• It helps developers evaluat...
No automated tool can tell you if
    your page is accessible


Your page is never “WAVE approved”
What’s new with WAVE?


• Many new rules
• Updated toolbar (coming very soon)
• Entirely new back-end framework
    • Sing...
apiology
n. the scientific or systematic study of bees
How WAVE works
1. User submits web page address, uploads a file, or
   submits code.
2. WAVE downloads the HTML of the page...
Nearly one million WAVE reports in one year.
                ~2800/day.

                          Upload
                ...
Number of Errors Detected
           3-5     6-10
           8%      11%
       2
      8%
                          11+
 ...
Other data

• 203 feedback messages provided by the
  community
• Speed has doubled as we’ve made
  improvements
• 90% of ...
WAVE Firefox Toolbar
• Same features as server version
• Evaluates content directly within Firefox
• Allows evaluation of ...
WAVE icons

Red icons are bad
WAVE icons

      Green icons are (probably) good



Yellow icons indicate potential problems that
         should be manu...
WAVE Demo


 http://new.wave.webaim.org

This is our development server, so don’t complain if it’s
 down, broken, inaccura...
WAVE Demo
New WAVE icons

Blinking content
Empty heading

Unlabelled form element with title

ARIA role, state, or property

Missing...
Future plans

• New and better evaluation rules
• API for quick evaluation and integration into
  other tools
• Better ARI...
Thank You!
Aaron Andersen, Diogenes Hernandez, and Jared Smith
                 http://webaim.org
Upcoming SlideShare
Loading in …5
×

Web Accessibility Evaluation with WAVE

2,543 views
2,366 views

Published on

Web Accessibility Evaluation with WAVE presented at the 2009 CSUN conference

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,543
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Accessibility Evaluation with WAVE

  1. 1. Web Accessibility Evaluation with WAVE Aaron Andersen, Diogenes Hernandez, and Jared Smith http://webaim.org
  2. 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. 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. 4. No automated tool can tell you if your page is accessible Your page is never “WAVE approved”
  5. 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. 6. apiology n. the scientific or systematic study of bees
  7. 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. 8. Nearly one million WAVE reports in one year. ~2800/day. Upload 10% Code 9% URL 81%
  9. 9. Number of Errors Detected 3-5 6-10 8% 11% 2 8% 11+ 12% 1 13% 0 48%
  10. 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. 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. 12. WAVE icons Red icons are bad
  13. 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. 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. 15. WAVE Demo
  16. 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. 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. 18. Thank You! Aaron Andersen, Diogenes Hernandez, and Jared Smith http://webaim.org

×