WAVE Help

What is WAVE and how do I use it?

WAVE is suite of tools designed to help you make your 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, as a human, 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 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 Chrome, Firefox, and Edge browser 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 WAVE sidebar indicates if WAVE has 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 forefront so it can be easily evaluated in context.

The goal should not be to get rid of all icons, except for the errors which may represent an end user issue, but must be manually assessed. 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 Reference panel in the WAVE sidebar. You can view details on all of the WAVE icons/items at the WAVE Documentation page.

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

Only humans can determine whether a web page is accessible. While WAVE can identify errors - 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?

A mapping of WAVE items to WCAG 2 success criteria is available.

WAVE supports optimal accessibility. We have added numerous tests for accessibility, including many checks for compliance issues found in the Section 508 and WCAG 2.2 guidelines. But WAVE cannot check all of the issues in these guidelines - no automated tool can. WAVE also checks some issues that extend beyond these guidelines that we know impact end users with disabilities. The documentation for each icon will indicate any relevant WCAG 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.

Styles and Code

WAVE provides functionality for disabling page CSS styles. Complex, CSS-powered layouts may become difficult to read, especially after the WAVE icons have been embedded, so disabling styles can simplify the page presentation. Disabling styles also allows you to view the underlying reading and navigation order, the order in which keyboard-only and screen reader users will access the page.

To view the relevant code for a particular WAVE icon, you can select the Code tab at the bottom of the page to view the underlying markup/DOM of your page.

How are the WAVE extensions different?

The WAVE Chrome, Firefox, and Edge 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 disabling Styles to 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. Such icons are typically indicated with a distinct style in the sidebar. Turning off the Styles option in the WAVE sidebar will allow you to view these icons.

How does WAVE handle "hidden" elements?

WAVE detects accessibility issues in all page elements, even those that are hidden using CSS, the hidden attribute, aria-hidden="true", and/or tabindex="-1". This is by design. In most cases, hidden elements are revealed to users at some point. We believe it's important that these potential end user accessibility issues in drop-down menus, tab panels, dialog boxes, carousels, and other "hidden" elements be identified.

In most cases the WAVE interface will provide an indication of icons that are relevant to hidden elements—the icon in the sidebar will be slightly dimmed and will present an informative tooltip. These elements may be examined by turning off the Styles option in the WAVE sidebar.

If WAVE has detected an error in an element that is hidden and that is never presented to the end user, or that is perhaps modified to address the error before being presented (something WAVE cannot detect), the WAVE error can be ignored - or you may instead choose to adapt the code to ensure the element is accessible in its hidden state.

In short, if we err on this point, we err on the side of users with disabilities. In other words, we have chosen to identify issues in hidden content that may be presented to users, rather than suppress these errors in cases where advanced development techniques have been implemented to potentially hide that content from users.

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, Firefox, or Edge Extensions.

Is WAVE accessible?

We have designed WAVE to be very accessible to users with disabilities, including screen reader users. Additional documentation on the accessibility features of WAVE and tips for navigating WAVE using a keyboard and assistive technology are available on the WAVE Accessibility page.

Why are results different between the online version vs WAVE extension vs WAVE API?

While the testing logic is the same across all versions of WAVE, you can occasionally get different results across WAVE tools because web pages and servers can often present different content based on the web browser being used, end user location or session/cookie information, time of day, etc. The online version of WAVE has limitations in applying some scripting. The extension and WAVE API provide more complete scripting support.

Add a WAVE link to your web page

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.

To install the bookmarklet, 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.