WAVE Accessibility Toolbar
Overview
Why WAVE?
There are many tools available for checking the accessibility of web sites. We like the WAVE Firefox toolbar for several reasons:
-
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 upload code. Often the reports they generate 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, and even the novice user is only one click away from an easy to interpret accessibility assessment of web pages.
-
It accommodates both experienced and beginning users. The WAVE toolbar's many features allow experienced users to thoroughly evaluate accessibility concerns such as order of content, markup, and proper use of styles style sheets. The beginning user can also easily understand the system of icons which appear in the display of the web page, and indicate what is working, what might need fixing, and what most definitely needs fixing.
-
It educates. Not only does WAVE evaluate the accessibility of web pages, but through its association with WebAIM, the leading resource for information on web accessibility, it provides links to extensive information on creating and maintaining an accessible web presence.
-
It's free! WAVE is a free service provided by WebAIM.
How it works
Once the toolbar is installed, you simply open your Firefox browser, and go the web page you want to evaluate. Then click on the "Errors, Features, and Alerts" icon in the toolbar.
WAVE runs an accessibility evaluation and displays the results in the page itself. Through a system of icons and markers, you can quickly see if there are any major accessibility problems.
WAVE also gives a one line summary at the top of the page, indicating the number of errors.
Getting started
Downloading the toolbar
To use the WAVE toolbar, you will need the Firefox web browser. If you do not already have it, you can download it for free at the Firefox website.
With the Firefox browser, go to the WAVE website and follow the download instructions. You will need to restart Firefox after the download is finished. When you reopen the browser, the toolbar will appear at the top of the window.
You're all set! You can now browse to web pages and start evaluating their accessibility.
Using the toolbar
The WAVE toolbar is comprised of a series of tabs and associated icons, each performing a different function in the accessibility evaluation of web pages.
Let's go through them one by one, and review their various functions.
The Errors, Features, and Alerts tab will probably be the function you use most often. When selected, it 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.
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.
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.
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.
The Reset tab simply returns the page to it's original display.
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.
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.
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.
A necessary caveat
At the top of every Errors, Features, and Alerts report in which no errors have been found, you will find the following text:
In other words, simply evaluating a web page in WAVE — or in any other web accessibility checker, for that matter — does not guarantee that the page is indeed accessible. A human being must also give it a careful review.
Resources