Advertisement
Articles

How To: Web Accessibility Evaluation with WAVE 4.0

E-Mail This Link


Enter recipient's e-mail:


Close
Email
Print |
RSS |
Share | |

Jim Blansett -- Library Journal, 08/13/2008

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/.
WAVE Disability tool screenshotStep 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.
WAVE Disability tool screenshot
Step 4: Click on the “Icons Key” tab for a description of what the tags mean and some ideas about how to fix these errors. You will notice that when your mouse goes over the icon (hovers) a message will appear that gives you a brief description of what that icon refers to. Try it. Hover your mouse over the tags, each tag will display what it is. If you want to know more about the tag, click on it.
WAVE Disability tool screenshotWhen 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.
WAVE Disability tool screenshot
That’s it! It is that easy to evaluate web content for web accessibility. As you WAVE more pages and look up the meaning of the red tagged errors, yellow tagged caution notices, green tagged alerts for accuracy, and light blue alerts that point out structural or navigational issues, you will begin to understand more about what makes a web page accessible.




 
Advertisement

LJ Reviews Database

LJ Reviews Center

Latest Stories



From the Blogs



Advertisement

Advertisement

Connect with Library Journal


Follow on Twitter








About Us | Advertising Information | Submissions | Site Map | Contact Us | RSS | Subscriptions
©2011 Media Source, Inc., All rights reserved.
Use of this Web site is subject to its Terms of Use | Privacy Policy
Media Source Inc. Media Source Inc. Media Source Inc. Media Source Inc. Media Source Inc. Media Source Inc.