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

How to use the WAVE extension

WAVE is a free and secure 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.

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.

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

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.

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.
   

Reference tab

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, this tab is a great place to start.

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 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 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 with no content, or headings used to create spacing.

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

Contrast tab

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 instances where only color is used to convey information.

Remember, WAVE only finds contrast issues in text or icons styled with CSS. It won’t find issues with images or gradients. Learn more about contrast accessibility in our article, Accessibility contrast requirements explained.

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 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 up your accessibility results 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 to review each error type because some of the issues are embedded in your website’s template, which means fixing it in the template fixes it on every single page with 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:

• Alternative text results in the Details tab for images in your content
• Missing alternative text
• Alternative text alerts
• Suspicious alternative text
• Redundant alternative text
• A nearby image has the same alternative text
• Long alternative text
• Alternative text features
• Alternative text
• Null or empty alternative text
• Linked image with alternative text
• Heading structure in the Details tab and Structure tab
• Empty heading
• Heading alerts
• No heading structure
• Skipped heading level
• Missing first level heading
• Possible heading
• Identified headings in the Structure tab are only used to describe content below them and not as text –
• Table results in the Details tab
• Empty table header
• Layout table
• Possible table caption
• Identified table headers in the Details tab are correct with the proper scope attribute
• Column header cell
• Row header cell
• Link results in the Details tab
• Empty link
• Link alerts
• Suspicious link text
• Redundant link
• Broken same-page link
• Videos and PDFs in the Details tab
• YouTube video
• Link to PDF document
• Contrast for images or text color in the Details tab
• Very Low Contrast errors for text that you changed the color
• Contrast errors for images would need to be manually checked
• Text in the Details tab
• Very small text alert for text that you changed the size
• Justified text alert for text that you changed the alignment
• Underlined text alert for text you underlined

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:

• Alternative text in the Details tab for images in the header or footer (or other repeated areas in the template)
• Missing alternative text
• Alternative text alerts
• Suspicious alternative text
• Redundant alternative text
• A nearby image has the same alternative text
• Long alternative text
• Alternative text features
• Alternative text
• Null or empty alternative text
• Linked image with alternative text
• Contrast in the Details tab for text or icon colors defined in the template
• Very Low Contrast
• Text in the Details tab for text size defined in the template
• Very small text
• Region structure in the Structure tab
• There are identified regions in the Structure tab like the header, navigation, main content, and footer
• Region types that appear more than once, like multiple navigations or asides, have specific labels
• Form labels and fieldsets in Details tab
• Broken label errors
• Empty form label
• Missing form label
• Multiple form labels
• Label alerts
• Orphaned form label
• Select missing label
• Unlabeled form control with title
• Fieldset alerts
• Fieldset missing legend
• Missing fieldset
• Form labels
• Fieldset
• ARIA descriptions for descriptions and inline error messages
• Navigation results in Details and Order tab
• Broken skip link
• Tab index – any positive tab index should be removed
• Mouse interactions
• Device dependent event handler
• JavaScript jump menu
• Skip link
• Skip link target
• Identified tab order and accessible names of navigable elements in Order tab
• ARIA results in Details tab
• All instances of ARIA are used correctly. Review WebAIM’s Web Accessibility Evaluation Guide: ARIA for more information.
• Page and content areas in different languages on the page are tagged with the right language
• Language missing or invalid
• Language

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:

• Very Low Contrast for text, icons, images, charts, and infographics
• Very small text
• Alternative text – Alternative text should be written by the person who chooses the image because they understand the image’s purpose best. Designers can include alt text notes in their design documents.
• Heading structure
• Link design – poorly designed links can result in accessibility issues
• Form labels, instructions, and error messages – the form design can influence the form’s accessibility

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.