For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

WebAIM WAVE Toolbar

There are many tools available for checking the accessibility of web sites. IRT suggests using the WebAIM WAVE Toolbar for Firefox:

  • It’s easy to install and use. Other accessibility checkers require you to go to their website and paste in the URL of the site you want to check, upload files, or even code. Often the reports are hard to understand, especially if you don’t have a background in HTML, CSS, and javascript. The WAVE toolbar installs easily in the Firefox browser.
  • It accommodates both experienced and beginning users. The WAVE toolbar allows experienced users to thoroughly evaluate accessibility concerns such as order of content, markup, and proper use of CSS. Beginning users can also easily understand what is working and what needs to be fixed.
  • It educates. Through its association with WebAIM, the leading resource for information on web accessibility, the WAVE toolbar provides links to extensive information on creating and maintaining an accessible web presence.
  • It's free! The WAVE toolbar is a free service provided by WebAIM.

How It Works

Once installed, simply open Firefox and go the web page you want to evaluate. Clicking the "Errors, Features, and Alerts" button in the toolbar runs an accessibility evaluation and displays the results in the page itself. Through a system of icons and markers and a one-line summary at the top of the page, you can quickly see if there are any major accessibility problems.

Using the Toolbar

The WAVE toolbar is comprised of a series of buttons that help you fully evalute a web page's accessibility.

    Errors, Features, and Alerts icon

    The Errors, Features, and Alerts button will probably be the function you use most often and renders the most complete review of the content.

    At the top of the page will be a one sentence summary that will either tell you that no accessibility errors have been detected, or that will tell you how many errors have been detected.

    Anything indicated with a red marker or icon is a major issue, and should get your attention first.

    Anything indicated with a yellow marker or icon is a possible accessibility issue, and should get your attention next.

    Anything indicated in green, is good.

    Information indicated by blue markers or icons is neither good nor bad, per se, but is there to indicate structural information, such as tables or heading tags.

    Mousing over an icon will launch a pop-up window which will explain the purpose of the icon. You can also get in depth information on what icons mean and the accessibility issues they represent by selecting the Icon Key tab. Doing so opens a new tab in the Firefox browser. It is then easy to toggle back and forth between the Error, Features, and Alerts report and the Icon Key.

    Structure/Order icon.

    The Structure/Order tab shows the navigation and reading order of the content on the page, which can be different from its display in the browser. This is important when considering the order of content when read by a screen reader, such as typically used by the blind. It is also important when considering the order of navigation, since users with motor disabilities are often restricted to moving through sites via the tab key.

    Text-only icon.

    The Text-only view shows what the content would look like without style sheets or images. This information is useful in getting a good idea of how a screen reader would read the copy. Since this option does not render images, but does show alt text, it is also a good method for checking whether or not the alt text makes sense in the context of other information on the page.

    Outline icon.

    The Outline tab renders only properly designated headings (h tags in HTML) on the page. Proper use and order of headings is important since users of screen readers often set them to "scan" for headings so that they can get a quick idea of the nature of the content on the page.

    Reset Page icon.

    The Reset tab simply returns the page to it's original display.

    Disable Styles icon.

    Disable Styles is useful on complex webpages in which the information from the Errors, Features and Alerts function is jumbled or overlapping. Disabling styles can make the report easier to read.

    Icons Key.

    The Icons Key is extremely useful, especially for users who are not yet familiar with usability issues.

    The Icons Key opens a new tab in Firefox, enabling you to toggle back and forth between the key and the reports.

    Each icon is described in detail, along with the relevant accessibility information. Often, links are provided to in depth explanations on WebAIM.org.

    Tools icon.

    Selecting the Tools tab opens a drop down menu with helpful links, such as "Toolbar Help" and "WebAIM home" that will take you to either the WAVE or WebAIM websites.

    Tools icon dropdown menu.

A Necessary Caveat

If no errors have been found after an evalutation, you will receive a message stating, "WAVE has detected no accessibility errors, but you must still check your page to ensure it is acutally accessible."

In other words, simply evaluating a web page with any web accessibility checker does not guarantee that the page is accessible. A human being should also give it a careful review!

Resources