How To: Web Accessibility Evaluation with WAVE 4.0
Jim Blansett -- Library Journal, 8/13/2008 3:29:00 PM
This step-by-step demonstration of how to check your library's homepage for web accessibility is a companion piece to the August 2008 InfoTech feature, Digital Discrimination.
WAVE 4.0 is a free web accessibility evaluation tool. It provides an easy to understand version of the original webpage that is “WAVED” for accessibility compliance, embedding the page with icons and indicators that reveal the accessibility information encoded within. Here’s how to use it:
Step 1: Open a browser (i.e. Internet Explorer, Mozilla Firefox) and go to WAVE 4.0 at http://wave.webaim.org/.
Step 2: From another window or tab, copy the URL of the page you want to WAVE. For this demonstration, copy the following URL http://www.opm.gov/disability/ (highlight the URL and press Ctrl C).This is the URL for the U.S. Office of Personnel Management: Federal Employment of People with Disabilities. To WAVE a different page, open up the webpage of that site, highlight the URL, and copy as you did above. Step 3: On the WAVE 4.0 page, paste (Ctrl V) the URL into the box entitled “Web page address:” Click on “WAVE this page!” The site will bring up a report about the page. You’ll see informative, color-coded icons and commentary within the web content. These provide guidance to developers. In the screenshot above, red and yellow icons have been inserted into the context of the web page, representing accessibility errors and alerts, respectively. For the U.S. Office of Personnel Management Disability page there is one red-tagged (must fix) error, and several yellow alert tags, as well as a light blue alert tag (author should check for proper use). While the red tag is a warning that must be attended to, all of the other tags point to possible problems as well. In these cases it is up to the author to verify that the tagged items are being properly used.
When you click on the icons the cursor will land on the explanation of that error or alert. For this U.S. Office of Personnel Management webpage, the red icon containing an “X” designates that there is a form label missing. The first section of the explanation contains the tag that alerted us to the warning, the second section contains the error that has occurred, the next section explains more clearly what the problem is, and the last section explains how to fix the problem. The remedy here is to insert a proper label so that a screen reader will know what is required for the data entry field. Another benefit of using labels is that the user can click on the label itself to set focus to the form element. This is especially useful to some individuals with motor disabilities, particularly when selecting small checkboxes and radio buttons.
