Getting Started
Introduction to web accessibility
From the Blog
- Accessibility of Rich Internet Applications
October 31, 2008 - ARIA momentum and Internet Explorer
October 10, 2008 - Update on WAVE
September 30, 2008 - Web Axe Podcast
September 15, 2008 - History of the browser user-agent string
September 3, 2008
Community
WAVE
Web Accessibility Evaluation Tool
Article Contents
The Purpose of WAVE
WAVE is a web-based tool to help web developers make their web content more accessible. WAVE is not a substitute for human evaluation. In fact, no automated tool can be, because web accessibility is best evaluated subjectively. Although WAVE helps users learn about web accessibility, it is most effective when used by someone knowledgeable about web accessibility. WAVE facilitates this kind of subjective evaluation by exposing many kinds of accessibility errors in the content, as well as possible errors, accessibility features, semantic elements, and structural elements. Once these elements are exposed, knowledgeable web developers can decide what changes need to be made, if any.
People who are not web accessibility experts can also benefit from WAVE by referring to the summary report which WAVE displays after processing the page. This report summarizes the number of errors, possible errors, and so on. A quick glance at the Errors, Features, and Alerts view of the report can also be informative, because the icons are color coded with red icons representing errors and yellow icons representing possible errors. Other types of icons also have specific colors assigned to them.
Using WAVE
To use WAVE, open a web browser and go to the WAVE home page - external link. The WAVE home page is shown in the screenshot below.
Type in the web address of the page you wish to evaluate and click on the "WAVE this page!" button. Once you have done this, you will see some tabs across the top of the page which represent the different types of views within WAVE. The four views are the Errors, Features, and Alerts View, Structure/Order View, Text-only View, and Outline View.
Errors, Features, and Alerts View
In the Errors, Features, and Alerts View, WAVE first inserts a summary report of the errors found in the page, along with any icons that apply to the page itself.
The summary is useful for reporting purposes, but the most useful feedback occurs below this area, in the main part of the wave report. In the main part of the errors, features, and alerts view, WAVE inserts informative, color-coded icons and commentary within the web content. These icons and commentary provide guidance to developers. In the screenshot below, red and yellow icons have been inserted into the context of the web page, representing accessibility errors and alerts, respectively.
Understanding the feedback in the Errors, Features, and Alerts view
The RED icons identify web accessibility errors in web pages, such as missing alt (alternative) text for images, missing form labels, frames without titles, etc.
The YELLOW icons identify possible errors, which WAVE classifies as alerts. For example, some types of alt text are inappropriate or inadequate, even though they technically satisfy the requirement to have alt text. When WAVE flags parts of the content as alerts, it is up to the user to determine whether these alerts constitute true errors which must be fixed or false alarms which can be ignored.
The GREEN icons identify the page's accessibility features. Users should take a close look at these accessibility features to ensure that they are accurate. In some cases, items that are flagged as accessibility features may actually be examples of accessible markup used inappropriately, such as when developers provide 'null' or empty alt text for images that should contain meaningful alt text. Both null alt text and meaningful alt text are considered accessibility features, but when used inappropriately, they are actually errors, and should be corrected. WAVE facilitates identifying these errors by displaying the appropriate icons in context allowing users to quickly determine the accessibility of page elements.
The LIGHT BLUE icons identify structural and semantic elements within web content. Examples of structural elements include headings, bulleted lists, data tables, and layout tables. Examples of semantic elements include emphasized text and strongly emphasized text. Structural and semantic elements can increase the accessibility of web content, when used appropriately. Users should look closely at the structural and semantic elements to determine whether they are displaying properly on the page.
A full explanation of icons - external link provides detailed information about the meaning of each of the icons, and recommendations on what to do when these icons appear.
Text-only View
This view shows only the text (including alt text for images) of the web content and the form elements. All of the visual formatting elements are disabled, to simulate the linearized, non-visual experience of using a screen reader. Headings are shown in large, bold text because screen readers can recognize heading structure. By reading through the Text-only View report, you can get an idea of what a screen reader user would encounter when the page is read.
Structure/Order View
In Structure/Order View, WAVE shows the reading order of the document content (which, because of table-based layouts and CSS-based positioning, may not be obvious or intuitive from the page itself). This is important because screen readers and certain other types of assistive technology read the page contents in document order, not the order in which it appears on the screen.
Also visible in Structure/Order view are icons showing the location of headers, lists, and other structural elements that can affect accessibility. In addition, WAVE puts a dashed magenta borders around div elements and dotted magenta borders around tables to help show what elements each contains.
Outline View
The Outline View isolates just the headings of web content. This allows web developers to evaluate the heading structure and hierarchy within the web content. Effective headings help to organize content into manageable sections, or chunks, of information which can improve readability. The screenshot below shows an outline with three levels of headings embedded properly in a hierarchy.
If the document has no headings, WAVE tells the user "This document has no outline because no headings are specified."
The WAVE Toolbar
As an alternative to the WAVE web application, webmasters can now use the free WAVE Toolbar for Mozilla Firefox. This tool runs complete WAVE reports entirely on the local machine (without sending any data to the WAVE server), making it ideal for testing extremely large, password protected, confidential, or private documents. Because it uses the identical processing and evaluation system as the WAVE server tool, results from using the WAVE toolbar will be identical (or at least nearly identical) to what you'd get from evaluating the same page using the WAVE web application. All four WAVE report views are available in the WAVE toolbar.
Advertisements
WebAIM is an initiative of:
