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.

Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate and inform about web accessibility.

WAVE is easy to use. Using the form at https://wave.webaim.org/, simply enter a the web page address of your page and submit the form. There are also Firefox and Chrome extensions for evaluating local, dynamic, or password-protected pages and site-wide WAVE tools for easily evaluating numerous pages.

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 WAVE sidebar indicates if WAVE detected any errors or not. The absence of errors DOES NOT mean your page is accessible or compliant. RED icons indicate accessibility errors that need to be fixed. GREEN icons indicate accessibility features - things that probably improve accessibility (though these should be verified). The other icons and indicators, particularly the yellow alert icons, highlight 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.

The goal should not be to get rid of all icons, except for the errors. Alerts will require close scrutiny - the likely represent an end user issue. Other icons are presented to facilitate human analysis of accessibility and structure of the page.

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

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.1 guidelines. But WAVE cannot check all of the issues in these guidelines - no automated tool can - though WAVE does check some issues that extend beyond these guidelines. The documentation for each icon will indicate any relevant guidelines.

WAVE helps its users better evaluate the things that automatic tools cannot check. For example, WAVE cannot tell you if your alternative text is equivalent and appropriate, so it instead reveals the alternative 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 embedded accessibility icons and indicators. 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. The WAVE Firefox or Chrome extension can often provide a more thorough analysis of page that are highly dynamic or complex.

No Styles View displays your page with styles disabled and tables linearized. This view 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/DOM of your page.

How is the WAVE extension different?

The WAVE Chrome and Firefox Extensions evaluate content as it is rendered 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 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.