The following provides an orientation of a WAVE report's components.

Results are Displayed in 2 Main Areas

Screenshot: 2 Main Areas. 1. WAVE sidebar. 2. Original page with icons inserted.

Long description: 2 Main Areas

A sidebar controls various views and functionality of the WAVE.
Your original page with will have icons inserted.

Not all of the icons represent errors. In fact, icons are placed in the document in the places where you did things right too. This allows you to evaluate the effectiveness of your work in the context of the page itself.

The Sidebar

The Sidebar's Summary

The sidebar defaults to presenting a summary of a page's results. The summary is indicated with a house icon on the tabbed interface. It shows at a glance the number of Errors, Contrast Errors, Alerts, Structural Elements, Features, and ARIA that the WAVE has found on your page.

Screenshot: Sidebar Summary View

Long description: Sidebar's Summary

The Sidebar's Details

The details view is the second tab on the sidebar and indicated with a list icon. When you select it, you will be presented with details of the WAVE's findings, which lists of all the WAVE icons in your page.

Screenshot: Details — Long description: Sidebar's Details

The Sidebar's Reference

The documentation view is the 3rd tab on the sidebar and indicated with an "i" icon. It can help you ascertain what things mean, why it matters, how to fix problems, etc.

Screenshot: Docuumentation — Long description: Sidebar's Reference

To find out any icon's meaning select it and then the "view the icon index" link. That will bring up the an explanation for each symbol and how you can make your page more accessible.

The Sidebar's Structure Option

Structure view is the the 4th tab on the sidebar. It allows you to evaluate headings and the structural hierarchy within the Web content.

Screenshot: Outline — Long description: Sidebar's Structure

Please note: The page in this example uses all heading level ones <h1>s, which is not currently accessibility supported. Don't do it. Use one heading level 1. Until HTML5 outline algorithm is accessibility supported, keep using <h1> - <h6> in the HTML4 manner to differentiate between heading levels.

Headings are important because many assistive technology users navigate by using headings. HTML5 headings are intended to syndicate and reuse content with relatively ranked headings. However, the benefits of HTML5 headings elements aren't available yet. Browsers and most assistive technology do not yet support the HTML5 outline algorithm. For more information consult: Coding Structural Markup.

The Sidebar's Contrast Option

If you select the contrast option, (the 5th tab on the sidebar) the page's contrast errors will be detailed along with a tool to help you fix them.

Screenshot: Contrast View — Long description: Sidebar's Contrast Option

No Styles Option

Activating the "No Styles" option in sidebar will disable all styles in the original page. This can be helpful in pinpointing where errors occur and in ensuring that the reading order of the page is logical.

Screenshot: No Styles