eGovernment Resource Centre - Victoria, Australia

Victorian
Government
Contact Centre
1300 366 356

Main Menu

Categories, RSS and More

Main Categories

Shorten URL

Please enter the URL that you'd like to shorten or click here to shorten current:


What's this? loading...

Rate this Site

Thanks for visiting. To help us help you find what you need please take our 1 minute Visitor Survey.

Members Forum

The Forum is the place for members to post their opinions and exchange ideas.

The WAVE

Type: Page by page

Access: Online form

Cost: Free

Company: WebAIM

URL: http://wave.webaim.org

The WAVE is a page-by-page accessibility evaluator by WebAIM. It tests many of the W3C Web Content Accessibility Guidelines. Errors are highlighted within the page itself.

Pros:

  • Can test Section 508, Level A, Level AA or Level AAA
  • Details specific information, for instance ALT attributes are provided with the relevant image
  • Provides a quick overview of the accessibility of an entire page
  • Different ways to access the WAVE tool
  • Provides the ability to view accessibility features, warnings and semantic elements as well as accessibility errors.

Cons:

Tests only one page at a time

Cannot test some checkpoints

Displaying errors as well as other accessibility features inline means that a WAVE output page can be overly complex.

How to use the WAVE

WAVE should only be used when you are testing a small number of pages. You will need to run each page manually. There are four different ways to use WAVE:

  • Submit a Web Address
  • Upload a page
  • Install the WAVE toolbar
  • Add WAVE bookmarklet

1. Submit Web Address

Insert the URL of the page you wish to test.

WAVE login page


Alternatively you can modify options in the WAVE preferences section . This allows you the option to turn on and off specific features, such as indicating linear reading order, divs and other structural elements.

2. Upload a page

Enter the file location or select the file you wish to test using the Browse button. Please note that this option will not test the graphics of the page.

WAVE upload page


3. Install the WAVE toolbar

When you install the WAVE toolbar in your browser, all you have to do is go to the Web page that you want to evaluate, then click on "WAVE this page!" or type in the Web address of the page you want to view, using the "WAVE a different page" field.

Select the browser you want to install the toolbar in and then select the "Install link".

Screenshot of instructions to upload toolbar


Once the WAVE toolbar is installed you can just go to a page that you want tested by WAVE and then click on the toolbar.

4. Add WAVE bookmarklet

When you add the WAVE "bookmarklet" to your browser, all you have to do is go to the Web page that you want to evaluate, then click on the bookmarklet to process it through the WAVE.

Select the "Install WAVE bookmarklet" link.

Screenshot of instructions to upload bookmarklet


Drag the WAVE bookmarklet: Wave icon to the bookmark bar.


Interpreting the output

The WAVE output has four important areas: information about the page tested (1), a link to an explanation of icons used in the output (2), a link to change preferences which will change the number of icons used in the output (3) and the output itself (4).

Screenshot of first section of the WAVE output


To interpret a WAVE output you need to understand what all the icons mean. Sometimes it is easier to modify the preferences so that only errors are identified.

Interpreting the icons

The WAVE uses four different types of icons:

  • Red icons denote failures or violations of checkpoints
  • Yellow icons denote possible failures or violations of checkpoints. These are called "alerts"
  • Green icons denote specific accessibility features used in the site
  • Light blue icons denote structural and semantic elements used in the site

For more information on icons, see the WAVE icons and explanations page.

WAVE highlights accessibility features, semantic elements as well as accessibility errors and warnings. The following is a comparison between highlighting warnings and errors versus highlighting all other features, such as accessibility features, semantic and structural elements as well.

Example: Highlighting only warnings and errors

Js icons appear at the bottom of the page


 

Example: Highlighting all features

Page contains many different icons


Examples

The following are failures from random sites.

1. Missing ALT attributes

Red icons appear next to the images with no ALT attributes


According to this error, the images on the right are missing ALT attributes.

2. Missing field label / JavaScript form submission

JS icons and red label icons appear next to the field indicating missing field labels


According to this error, the Search field does not have a field label. In addition to this, JavaScript has been used somewhere in the field – on testing the site with JavaScript disabled this Search field cannot be submitted.

3. Onmouseover

Js and mouse with arrows appear indicating mouseovers


Although the image has an ALT attribute of "Personal", there is also JavaScript and an onmouseover. On testing the site this onmouseover changes the colour of the "Personal" section and creates a flyout menu. This menu cannot be activated via the keyboard and is therefore inaccessible.

4. Table Headers

Test: Display Table Information

 

Table headers indicated within the tables


All table headers are marked up properly (eg. the code for cell Wed 15 Day 0 is "id=day20060315") and all data cells reference appropriate headers (eg. the headers referenced by the first data cell are "openingceremony" and "day20060315").

5. Displaying Headings

Headings marked up visibly


All headings are marked up appropriately. Using this test you can determine whether headings have been nested properly.

Further Information

Help using WAVE

Added: 20 August 2007 Page views: 2,042 Rating: 0 Votes: 0
Review and rate
Last updated: 20 August 2007