Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Accessibility Evaluation with WAVE

2,748 views

Published on

Web Accessibility Evaluation with WAVE presented at the 2009 CSUN conference

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

×