Use the WAVE extension to start accessibility audits and embed accessibility into processes

The WAVE extension gives everyone a free and secure way to check the majority of web content for accessibility.

The first way to use the WAVE extension is as a guide to starting a manual accessibility audit. That might sound intimidating, but we’ll show you exactly how you can do this with your own website in as little as an hour.

The second way to use the WAVE extension is by embedding it into processes. When content editors and developers use the WAVE extension as part of their publishing process, more accessibility errors are caught and fixed right away.

Here’s what you’ll learn in this article, so you can start using the WAVE extension to improve accessibility on your website:

Visit December Monthly Focus: WAVE for more resources.

How to use the WAVE extension

WAVE is an extension you can install on Chrome, Firefox, or Edge. It’s an automated accessibility testing tool, which means it’ll find accessibility results that can be detected programmatically. This makes it a great tool to help start a manual audit or quickly test for accessibility as part of a content or code publishing process.

Install the WAVE extension

To start using the WAVE extension, you’ll first have to install it. To install the extension, visit WebAIM’s WAVE browser extension webpage and choose the browser you’ll be using. From there, install the extension.

Activate the WAVE extension

Once the extension is installed, you’re ready to use it on a webpage. To activate the WAVE extension, follow these steps:

  1. Navigate to the page you want to test.
  2. Select the WAVE extension icon in the top right of your browser.
    • If you don’t see the extension, try opening your browser’s extension menu and pinning the WAVE extension to your browser bar.

The WAVE extension has six tabs you’ll use. We’ll go through how to use each of them them.

Summary tab

WAVE extension Summary tab.

When you activate the WAVE extension, you’ll be on the Summary tab. This tab is an overview of all your accessibility results. It has totals for errors, contrast errors, alerts, features, structural elements, and ARIA.

Here’s what each accessibility result means:

  1. Errors – Accessibility errors that should be prioritized and fixed.
  2. Contrast – Specific types of accessibility errors related to color contrast. These should also be prioritized and fixed.
  3. Alerts – These could be accessibility issues. They should be checked to see if they are or not.
  4. Structure – Identifies any structural HTML like regions, headings, and lists. Structure plays an important role in accessibility, so review structural elements to see if any cause accessibility issues.
  5. Features – Elements of your website that probably improve accessibility. They should still be checked to make sure they’re implemented correctly.
  6. ARIA – ARIA, or Accessible Rich Internet Applications, refers to ARIA HTML that is used to make the page structure more accessible. Not all HTML elements have accessibility built into them, so ARIA is used to add accessibility. Most ARIA items require a manual review to see if they’re used properly. 

How you can use the Summary tab

Using the Summary tab is easy – you’ll just use it to gauge the overall health of the webpage. As we go through the rest of the extension, we’ll review how to use the other tabs to get details for each of these accessibility result types.

Details tab

The Details tab lists all the accessibility results for errors, contrast errors, alerts, structure, features, and ARIA.

WAVE extension Details tab showing 4 errors.
WAVE extension Details tab showing 75 Alerts.
WAVE extension Details tab showing 21 Features.

How you can use the Details tab

You’ll probably use the Details tab the most when using the WAVE extension. It’ll be how you get more information and review each accessibility result.

Follow these steps and tips to interact with the Details tab:

  1. Select the checkmark next to any of the accessibility results to hide it on the webpage. This will declutter the page if you’re trying to focus on something specific.
  2. Select an accessibility result icon. When you select an icon, the webpage will scroll to where that result is on the webpage.
  3. Select the result icon on the webpage to get a popup that will briefly explain the result and give you links to access the reference information or look at the HTML code.
  4. If the icon in the WAVE panel is greyed out with a dashed border, it isn’t visible on the webpage. To review it, turn Styles off. This will turn off all the CSS styling and can simplify the page view.
    Grayed out empty form label error

Reference tab

The WAVE extension Reference tab shows information for Missing alternative text error.

The Reference tab has additional information about accessibility results. It includes:

  • What the result means
  • Why the result matters
  • What to do to fix or review the result
  • How the WAVE algorithm found the result
  • Related WCAG standards and guidelines

How you can use the Reference tab

You’ll use the Reference tab to learn about the different results your website has. If you have a question, a great place to start is this tab.

There are two ways to see an accessibility result’s reference information:

  1. The first way is to select the information icon in the Details tab.
  2. The second way is to select the result icon on your webpage. In the popup, select Reference.

Order tab

The WAVE extension Order tab.

The Order tab is a great tool to check your web page’s tab order. The tab order is the navigation order you go in when using the tab key to navigate the page. By default, interactive elements like links or buttons make up the tab order.

When you go to the Order tab, there’s a numbered list, which represents the tab order. Each list item has the function and accessible name (what is read by a screen reader) for all navigable elements on the page.

WAVE also removes the accessibility result icons from the web page while you’re on this tab. They are replaced with number icons, which also represent the tab order.

How you can use the Order tab

You’ll use the Order tab to make sure your page’s tab/navigation order makes sense and to check the accessible name of all the navigable elements.

Here’s what to review the order list for:

  • The tab order is logical. For example, it starts at the top and goes down the page in a logical order.
    • If you turn Styles off, the tab order will refresh, so you can test how CSS is affecting the order.
  • Elements that aren’t interactive. Any elements that are NOT interactive (button, link, or form input) should be removed from the tab order.
  • The accessible name for each element makes sense. The accessible name is read aloud by screen readers, so what’s listed here is read by the screen reader.
    • After adjusting form inputs, select Refresh Navigation Order to test how this changes the accessible name.

Structure tab

The WAVE extension Structure tab shows one header, two navigations, an aside, and main content.

The Structure tab is basically a table of contents for your web page. It shows you the landmark elements like <header>, <nav>, <aside>, <main>, and <footer> plus all the headers on the page. Assistive technology users rely on a clear structure to navigate web pages. And, this tab helps you quickly check your structure. Learn more about headings accessibility in our article, 5 heading accessibility issues and how to fix them.

How you can use the Structure tab

You’ll use the Structure tab to make sure your page’s landmark elements and headings are accessible.

Here’s what to review the Structure tab for:

  • Landmark elements are used correctly.
  • There are basic landmark elements like header, main, and footer.
  • Content is in the proper landmark. For example, navigation is in the header.
  • All headings are used to describe the content below them. There aren’t headings being used as text.
  • There’s only one heading one on the page (typically).
  • There aren’t skipped headings. For example, going from heading 2 to heading 4.
  • There aren’t empty headings. For example, headings are being used to create space.

Check out our headings video, Check heading accessibility using the WAVE tool, for a demo.

Contrast tab

The WAVE extension Contrast shows foreground and background color fields with color sliders.

The Contrast tab helps you test and fix contrast issues on your website. It also has a Desaturate page tool, so you can see the page in greyscale. This helps you find places where only color is used to convey information.

It’s important to remember that WAVE can only find contrast issues in text or icons that are styled with CSS. It won’t find issues with images or gradients. Learn more about contrast accessibility in our article, Accessibility contrast requirements explained and how to fix 5 common low-contrast issues.

How you can use the Contrast tab

Here’s how you can use the contrast tab:

  1. Scroll to the bottom of the Contrast tab and select a contrast error icon. This will populate the foreground and background color fields, tell you the contrast ratio, and whether the combination passes for normal or large text.
  2. Use the sliders to find a new color combination that will pass. The Contrast ratio will update in real-time.
  3. Select the color swatch under the hex code fields to open your browser’s color picker. Select any color on the web page to update the hex code. You can use this method to manually test colors in gradients or images.

Check out our video, Find and fix contrast issues with the WAVE extension for a demo.

Here’s a tip: The best way to make using the extension easier is to become familiar with accessibility topics. You can do this over time with our monthly accessibility focus.

Back to top

How to determine your testing sample

Before you start using WAVE to start a manual audit or as part of your process, it’s important to think about your sample. When we talk about your sample, we simply mean breaking it up by web pages or the type of results you’re looking at.

Sample for manual audit

For a manual audit, we suggest at least a four-page sample especially if it’s your first time doing a manual accessibility audit. Here’s why we suggest four pages:

  • If you pick the right pages and include all accessibility result types, you can often fix up to about 80% of accessibility issues on your website.
  • Manually testing four pages means you can go through the entire process of getting your sample, testing the pages, and then fixing some issues in as little as an hour.

Create your four-page sample

To create your sample, choose at least these four pages:

  1. Homepage
  2. Prominent content page
  3. Prominent content page
  4. Random page

While you’re using WAVE to start a manual audit, you’ll review every type of accessibility result, which includes errors, contrast errors, alerts, structure, features, and ARIA.

It’s important each error type is reviewed because some of the issues will be embedded in your website’s template, which means fixing it in the template will fix it on every single page that uses that template. This can get rid of 100s of issues with one fix and is how you can fix more issues with a smaller sample.

Sample for using WAVE as part of your process

Since the Details tab lists all the results, it can seem like a lot of information. When using WAVE as part of your publishing, development, or design process, we suggest breaking up the Details tab by focusing on results you can fix based on your role.

For example, if you’re a content writer, you don’t need to check ARIA result types whenever you check new content because ARIA is more of a developer topic.

Below are lists of results content writers, developers, and graphic designers could focus on as they use WAVE during their processes. There are also video demos of how to use these lists in the Use WAVE to quickly add accessibility testing to processes section.

Results to focus on for content writers

Content writers will typically use a content management system (CMS) to create new content. So, they could focus on accessibility results that are most likely to happen in the content. These include:

Results to focus on for developers

Developers can use WAVE to test code in local and sandbox environments. They are typically coding a website’s template, so they could focus on accessibility results that are most likely to happen in the code and template. These include:

These issues are important to catch and fix because they’ll fix them on every page that uses the template, which means there is a high impact.

Results to focus on for graphic designers

Graphic designers create the website design or design images before they go on the web. They could focus on these results:

Instead of using WAVE to check for issues after a design is published on the web, graphic designers should think about these accessibility results before the design is used on the web. For more information, read WebAIM’s Web Accessibility for Designers.

Here’s a tip: The more you test your own website, the more familiar you’ll become with the results your website has. This makes it quicker to review results during your publishing process because you’ll know what’s supposed to be there and what’s new and should be reviewed.

Back to top

Use WAVE to start a manual audit

Now that you know how to use the WAVE extension and get your four-page sample, you can use WAVE to start a manual accessibility audit. We say “starting a manual audit” because WAVE is an automated testing tool that will help guide you through finding and testing several issues. But, a manual audit wouldn’t be complete without keyboard, resizing, and assistive technology (like screen reader) testing.

To do a manual audit guided by the WAVE extension, follow WebAIM’s Evaluation Guide or watch the video demo below.

Back to top

Use WAVE to quickly add accessibility testing to processes

You can also use WAVE as an automated testing tool to check your content for accessibility as part of your publishing process. As we mentioned above, you can limit the results you check based on your role.

The videos below demo using WAVE as a content editor and developer.

How to use WAVE as a content editor

How to use WAVE as a developer

Back to top

Visit December Monthly Focus: WAVE for more resources.

Key takeaways

  • Use the WAVE extension to start a manual audit, or add it to your web publishing process.
  • To install the extension, visit WebAIM’s WAVE browser extension webpage and choose the browser you’ll be using.
  • The WAVE extension has 6 tabs.
    • Summary tab – Overview of the page’s accessibility results.
    • Details tab – A list of every accessibility result on the page.
    • Reference tab – Learn what the results are and how to fix them.
    • Order tab – Check your page’s navigation order and navigable elements’ accessible names.
    • Structure tab – Check your page’s landmark elements and headings are accessible.
    • Contrast tab – Test and fix contrast issues.
  • Create a sample for your manual audit or when using the WAVE extension as part of your process.
    • For manual audit, create at least a four-page sample with your homepage, 2 prominent pages, and 1 random page.
    • When using WAVE as part of your process, focus on the results you can update based on your role.

Want to be part of the conversation?

Share questions, feedback, and experiences on Twitter
using #AccessibilityFocus.

Sign up for our newsletter to get emails with accessibility content similar to this article. If you subscribe, we’ll email you web accessibility insights or things we learn a few times a month. You can unsubscribe at any time.

    Check any page for accessibility errors

    Check all your pages at once with Pope Tech. Your web accessibility data is ready in just a few minutes.

    Make accessibility part of content editors’ and developers’ process with WebAIM’s WAVE extension tool.