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:
- How to use the WAVE extension
- How to determine your testing sample
- Four-page sample for manual audit
- Results to focus on for content writers
- Results to focus on for developers
- Use WAVE to start a manual audit
- Manual audit video demo
- Use WAVE to quickly add accessibility testing to processes
- Testing with WAVE as a content editor video demo
- Testing with WAVE as a developer video demo
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:
- Navigate to the page you want to test.
- 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.
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:
- Errors – Accessibility errors that should be prioritized and fixed.
- Contrast – Specific types of accessibility errors related to color contrast. These should also be prioritized and fixed.
- Alerts – These could be accessibility issues. They should be checked to see if they are or not.
- 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.
- Features – Elements of your website that probably improve accessibility. They should still be checked to make sure they’re implemented correctly.
- 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.
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:
- 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.
- Select an accessibility result icon. When you select an icon, the webpage will scroll to where that result is on the webpage.
- 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.
- 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.
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:
- The first way is to select the information icon in the Details tab.
- The second way is to select the result icon on your webpage. In the popup, select Reference.
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.
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.
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:
- 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.
- Use the sliders to find a new color combination that will pass. The Contrast ratio will update in real-time.
- 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.
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:
- Prominent content page
- Prominent content page
- 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:
- Alternative text results in the Details tab for images in your content
- Alternative text alerts
- Alternative text features
- Heading structure in the Details tab and Structure tab
- Heading alerts
- Identified headings in the Structure tab are only used to describe content below them and not as text –
- Table results in the Details tab
- Identified table headers in the Details tab are correct with the proper scope attribute
- Link results in the Details tab
- Link alerts
- Videos and PDFs in the Details tab
- 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
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)
- Alternative text alerts
- Alternative text features
- Contrast in the Details tab for text or icon colors defined in the template
- Text in the Details tab for text size defined in the template
- 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
- Label alerts
- Fieldset alerts
- ARIA descriptions for descriptions and inline error messages
- Navigation results in Details and Order tab
- Tab index – any positive tab index should be removed
- Mouse interactions
- 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
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
- 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 structureLink design – poorly designed links can result in accessibility issuesForm 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.
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.
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
Visit December Monthly Focus: WAVE for more resources.
- 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
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