Information Technology Systems and Services.
ITSS home

Checking Results

WAVE Icon Overview

The WAVE shows the original page, with icons and indicators inserted. The number of icons presented on the page can be a bit overwhelming until a person learns what each icon means and works with the tool for a while.

Types of WAVE Icons
Icon Meaning Explanation
Icon: Error Error Red icons are bad. If you see red, there is almost certainly an accessibility issue.
Icon: Low contrast Contrast Identifies WCAG 2.0 Level AA contrast issues.
Icon: Alert Alert Yellow icons indicate likely accessibility issues or where improvement could be needed.
Icon: Feature Feature Green icons are typically good. They are accessibility features, but you must determine if they are implemented appropriately.
Icon: Structural Element Structural Element Blue icons reveal the underlying structure and meaning of the Web page.
Icon: ARIA HTML5/ARIA Purple icons are HTML5 structural elements or ARIA roles, states, or properties.

How to Check a Page

1. Select an Icon in the Sidebar to Highlight it in Your Page

Screenshot: Error seclected in the sidebar

Icons in the sidebar correspond to the icons in your original page. For instance if you select an error icon in the list of errors in the sidebar, a red dashed outline will appear around where the error occurs in your page.

Screenshot: Red dashed line around pie chart image in the main page.

2. Select the Icon in Your Page for a Brief Explanation

When you select an icon on your page, a brief message explaining the problem will popup.

Screenshot: The explanation popup message on the main page

3. Select the "More Information" Link in the Popup for Additional Documentation

Screenshot: More Information link in the Popoup on the main page

When the "More Information" link is selected, documentation for that particular error will appear in the sidebar regarding what it means, why it matters, how to fix it, The Algorithm in English, and links to standards and guidelines.

Screenshot: Documention in the sidebar explaning missing text alternative errors

For more information on writing text alternatives consult Images: The short and long of it.

4. Select the Code Tab to View Markup

If you want to dig into the markup, you can view your code for items that are flagged. Just select the “code” tab at the bottom of your original page.

Screenshot: Code view tab and code

previous next