What is WAVE and how do I use it?

WAVE is tool to help web developers make their web content more accessible. WAVE cannot tell you if your web content is accessible. Only a human can determine true accessibility. But, WAVE can help you evaluate the accessibility of your web content.

WAVE is easy to use. Using the form at the top of any page, simply enter a the web page address of your page and submit the form.

What do all these icons mean?

WAVE will present your page with embedded icons and indicators. Each icon, box, and piece of information added by WAVE presents some information about the accessibility of your page. While WAVE is most effective when used by someone knowledgeable about web accessibility, people who are not web accessibility experts can also benefit from WAVE.

The report section at the top of the page indicates if WAVE detected any errors or not. The absence of errors DOES NOT mean your page is accessible. RED icons indicate accessibility errors. GREEN icons indicate accessibility features. The other icons and indicators indicate other elements that you should look at. WAVE brings the underlying accessibility information of a page to the fore-front so it can be easily evaluated in context.

You can view a brief overview of what each icon or indicator means by clicking it and viewing its documentation or by accessing the documentation panel.

Did my page pass WAVE? Is it "WAVE approved"?

Only humans can determine whether a web page is accessible. While WAVE can identify errors (in other words, if you see a red icon, your page almost certainly has an accessibility issue), it cannot tell you if your page is accessible. For this reason, we never indicate that your page is accessible or if it has 'passed' WAVE. While we invite you to provide a link on your page to the WAVE report (or simply link to http://wave.webaim.org/refer), we do not provide any approval or certification indicators or badges.

What guidelines and standards does WAVE use? Section 508, WCAG, or both?

Our goal with WAVE is to support true accessibility and we have added as many tests for true accessibility as we can think of, including many checks for compliance issues found in the Section 508 and WCAG 2.0 guidelines. But WAVE cannot check all of the issues in these guidelines - no automated tool can. You can select certain guidelines and standards filters in the Details panel, but be careful, doing so might cause you to overlook important accessibility issues.

WAVE helps its users better evaluate the things that automatic tools cannot check. For example, WAVE cannot tell you if your alt text is equivalent and appropriate, so it instead reveals the alt text so it can be evaluated by the WAVE user. Using WAVE can help you determine if your site is both accessible AND compliant.

WAVE views

WAVE displays accessibility information in three ways:

  1. Styles
  2. No Styles
  3. Contrast

Styles View presents your page with the embedded accessibility icons and indicators. This is the default view with most WAVE features enabled. Because of the complexity of this view, reports for some complex, CSS-powered layouts may become difficult to read. If this occurs, you can select the No Styles View. Scripting is removed from this an all other WAVE reports. Use the WAVE toolbar to evaluate scripts and script-modified web content.

No Styles View displays your page with styles disabled and tables linearized, thus revealing the unstyled HTML and the WAVE icons and indicators. This view also presents the underlying reading and navigation order, the order in which keyboard-only and screen reader users will access the page.

Contrast View shows only contrast issues on your page, based on WCAG 2.0 guidelines. You can use the tools in the details panel to review your color contrast, and even get updated colors that meet these guidelines.

In addition to the views above, you can select the Code tab at the bottom of the page to view the underlying markup of your page (note that the markup might be slightly different than the original, due to us necessarily removing scripting from your page).

How is the WAVE extension different?

The WAVE Chrome and Firefox Extensions evaluate content as it appears within your web browser. This means that you can evaluate private, intranet, password protected, dynamically generated, or scripted web content. All evaluation happens directly within your browser. The extension also evaluates content after scripting has been applied, whereas the server version of WAVE may not be able to apply all scripting in the page.

The WAVE report is 'broken' or difficult to read

Because WAVE injects icons into your web page, it often breaks the page layout or results in page elements overlapping. This can typically be resolved by selecting the No Styles button to turn off page styles and linearize the WAVE report.

WAVE reports an error, but I don't see a red icon

WAVE evaluates all content within your page, not just visible content. It's most likely that the invisible WAVE error icon is within an area of your page that is visibly hidden using CSS. Select the No Styles button to view the icon.

Javascript and CSS

WAVE is unique in that it evaluates your content after JavaScript and CSS has been applied to it. This provides a more accurate representation of actual page accessibility. However, due to security limitations, all of a page's Javascript code may not be fully applied when the page is evaluated on the WAVE web site. To best evaluate complex, scripted content, please use the WAVE Chrome or Firefox Extension.

If you'd like to provide a link to the WAVE report for your page, simply link to http://wave.webaim.org/refer from your web page or link to http://wave.webaim.org/report?url=YOUR URL HERE to process any URL explicitly.

Use the browser bookmarklet

For a quick and easy method of evaluating web pages in WAVE, you can install the following bookmarklet. It will add a WAVE item to your Bookmarks/Links/Favorites menu and/or toolbar. After installing the bookmarklet, simply browse to the web page you want to evaluate then select the bookmarklet item from the menu or toolbar. The page will be submitted to WAVE for evaluation.

WAVE this page! To install the bookmarket, simply drag the image to the left to your Links or Bookmarks toolbar. Or you can right click on the image and select "Bookmark this link" or "Add to Favorites".

Problems or feedback?

WAVE is not perfect. If you are having difficulties using WAVE or have feedback or recommendations, please send us feedback.