A Beginner's Introduction to WAVE

Diogenes Hernandez & Aaron Andersen

PDF Version of Slides

What is WAVE?

• WAVE is a free web accessibility evaluation tool provided by WebAIM.
• It is used to aid humans in the web accessibility evaluation process.
• It will provide a user friendly report rather than a complex one.

WAVE versions

• Online Server: Most common and used WAVE version. Available at wave.webaim.org.
• WAVE Toolbar: A Firefox add-on.
• Dreamweaver Extension: Will display the results inside Dreamweaver.

How does WAVE work?

1. Choose between the web page address, a file, or code.
2. WAVE will download the HTML of the page.
3. The Mozilla rendering engine (think Firefox) will generate a virtual representation of the page.
4. The page is then checked against WAVE rules.
5. Appropriate WAVE icons and descriptions are inserted into the original document.
6. The modified document is then shown to the user.

WAVE Demo

Interpreting the results

• WAVE will present your page with embedded icons and indicators.
• Underlying accessibility information.

What do all the icons mean?

• The report section at the top of the page indicates if WAVE detected any errors or not.
• RED icons.
• GREEN icons.
• YELLOW icons.
• The other icons.
• Trapezoidal icons apply to images.

Did my page pass the WAVE test?

• No automated tool can tell you if your page is accessible
• Your page is never "WAVE approved"

Types of reports

• Errors, Features, and Alerts
• Structure/Order View
• Text-only View
• Outline View

Errors, Features and Alerts view

• Default view with most WAVE features enabled.
• Notice that because of the complexity of this view, reports for some complex, CSS-powered layouts may become difficult to read.

Other Views

• Structure/Order View displays your page with a different set of icons and indicators that show the overall structure of the page.
• Text-only View provides only the underlying text of the page.
• Outline View shows only the headers that are within your page.

What guidelines and standards do WAVE use? Section 508, WCAG, or both?

• WAVE does not prescribe to any one set of guidelines.
• It also goes well beyond guidelines.

WAVE is cool. Why?

Top 5 things

1. WAVE is the only major tool that does everything we've talked about.
2. Can be accessed from any computer with Internet at wave.webaim.org
3. Gives very accurate feedback and feedback goes beyond any guidelines.
4. Renders your page, so what is evaluated is your final page, not just a file or code.
5. It is provided as a FREE service by WebAIM.

Statistics

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

• Report methods: upload 10%, code 9%, URL 81%
• Percentages of errors: 48% zero errors, 13% one error, 8% two errors, 8% 3-5 errors, 11% 6-10 errors, 12% 11+ errors

It is also good to know that...

• WAVE is also available in Spanish.
• In the online version scripting is removed.
• Better when used by accessibility experts.
• We are currently developing WAVE 5.
• Has Disable styles and keyboard shortcuts.

WAVE Toolbar

• The WAVE Firefox toolbar evaluates content as it appears within your web browser.
• Can evaluate private, intranet, password protected, dynamically generated, or scripted web content.

WAVE Dreamweaver Extension

• This extension allows you to evaluate the accessibility of content using the popular WAVE web accessibility evaluation tool directly within Adobe Dreamweaver.
• The Dreamweaver extension is in beta right now.

Thank you!