WAVE Toolbar for Firefox

The WAVE Toolbar, available free at http://wave.webaim.org/toolbar, is a Firefox add-on created by WebAIM to allow the user to quickly assess the accessibility of a given Web page.

It is essentially identical to the online WAVE Webpage Accessibility Evaluator, but allows a user to test password protected pages, preview pages or unposted .html files.

Errors, Features, and Alerts

The primary evaluation function of the WAVE toolbar is the Errors, Features, and Alerts button.

Screen capture

This function displays your Web page with icons indicating accessibility features, errors, and alerts (elements that require human evaluation), as well as structural and semantic elements. By viewing your Web page with these icons embedded, you can easily determine any potential accessibility issues.

Example WAVE Output Icons

For example, in the screen capture below, the toolbar found a number of issues with an HTML form, including:

  • A form with several input fields missing the LABEL tag (indicated with a red no-label icon)
  • An empty <h2> tag (indicated with a blue H2 icon plus a red warning icon).
  • The blue table icon also indicates the form is enclosed in a layout table

Screen capture

The WAVE Web site contains a comprehensive list of the accessibility icons, complete with descriptions and explanations of each.

Note: WAVE is not tied to WCAG 2.0 guidelines. However, WAVE's criteria for an accessible Web page are generally accepted best practices.

Structure/Order

The Structure/Order function displays your Web page with graphics emphasizing its structure and reading order. This function allows you to quickly determine whether your page's reading order is logical, and therefore whether the page will make sense when read by a screen reader or viewed with style sheets disabled.

Screen capture

Text-Only

The Text-only function displays only the text-based elements of your Web page, including any text alternatives provided for graphical or other non-text content. This function can give you a general idea of the content that will be read by a screen reader.

Screen capture

Outline

The Outline function displays only the headings on your Web page, which can help you determine if the headings are properly nested, and if the structure of the page's content is logical.

Screen capture

Disable Styles

The Disable Styles function will turn off style sheets for the current Web page. Some users, including those with visual impairment, may view the Web with style sheets disabled, so this function is useful for testing a Web page's overall accessibility, including the semanticism of the markup.

Screen capture

More Information

For more information on the WAVE Toolbar, see WebAIM's WAVE Help and About WAVE, or click on the Tools button in the toolbar and select Toolbar Help or About.

Top of page