University of Minnesota Duluth block M and wordmark
Information Technology Systems and Services

Reading a WAVE Report: An Orientation

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
  1. A sidebar controls various views and functionality of the WAVE.
  2. 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 Icon: Summary

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

Screenshot: Sidebar Summary View

The Sidebar's Details Icon: Details

The details view is the second tab on the sidebar and indicated with a flag 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. It can toggle icons or categories on/off, filter to WCAG A, WCAG AA, or Section 508. (The University of Minnesota standard is WCAG AA.)

Screenshot: Details

The Sidebar's Contrast Option

If you select the contrast option, the page's contrast errors will be detailed along with a tool to help you fix them.

Screenshot: Contrast View

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

The Sidebar's Documentation Icon: Documentation

The documentation view is the third 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

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 Outline Icon: Outine

Outline view (the bottom tab on the sidebar) isolates just the headings of Web content. This allows Web developers to evaluate the heading structure and hierarchy within the Web content.

Screenshot: Outline

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. The only exception is JAWS, which gets it wrong, as Jason Kiss explained in JAWS, IE and Headings in HTML5. For more information consult: Coding Structural Markup.

previous next