web accessibility evaluation with wave
Post on 05-Dec-2014
3.553 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related