WAVE for Chrome or Firefox

This browser extension will show you images that don’t have alternative text, headings that aren’t in order, colors with too little contrast and other issues that normally aren’t easy to determine by looking at the surface of a document. It can save you a lot of time.

Install Chrome Browser and Extensions

If you don’t already have Google’s Chrome browser installed on your computer, you can get it here:

Once you have the browser installed, add two extensions from the Chrome Web Store:

Or Install Firefox Browser and Extension

How to Check an HTML Page in Pilot

The WAVE Evaluation Tool won’t work in Pilot’s HTML editor, but it can check pages once you’ve published them in Content.

Pilot displays an HTML page in a frame where WAVE can’t read it. So you’ll first need to open the page in its own window, without the frame:

  1. View the page in Content, not in the HTML editor.
  2. Right click on the page and choose “Open frame in new window.”
  3. You should now see the page in a window by itself, without all of Pilot’s navigation around it.
  4. Now, click the WAVE icon on your browser’s toolbar:

Below are highlights of the many things the extension will show you.

Summary

After a moment, you’ll see an accessibility summary on the right side of the window and icons will appear throughout the document indicating various elements and warning.

Each heading will have its heading level displayed in front of it, such as h1, h2, h3.

Page Outline (Headings)

Click the “Outline” tab on the left and you’ll see a list of headings with their levels so you can quickly check the documents structure.

If a heading level is skipped, such as an h4 that follows an h2 without an h3 between them, you’ll see a yellow icon warning of the skipped heading level.

Color Contrast

Click the “Contrast” tab along the top of WAVE window and it will list any place it finds that has low contrast.

If you see “Contrast Errors,” click on any of the warning icons to jump to that part of the page and show the color combination that triggers the error message.

Getting More Information with the Documentation Tab

The “Documentation” tab is great for learning about accessibility. Click the round blue “Documentation” icon on the left. Then you can click any of the icons WAVE displays on your page and get information about why it’s important and how to fix a problem.