You ran your home page through the WAVE accessibility checker and the screen filled with little red, yellow and green icons. Some sit on images, some on headings, a few in the footer you forgot existed. The summary says 14 errors and 37 alerts. Now what?
This post is about reading that screen. How to run WAVE on a page, what each kind of icon means, which ones to fix first, and where the tool stops being able to help. It is written for owners and marketing staff, not developers, though developers will recognize the habits.
What WAVE is, in one paragraph
WAVE is a free evaluation tool made by WebAIM, an accessibility organization based at Utah State University. It looks at the code of one page, applies a set of checks drawn from WCAG, and draws icons on top of the page wherever it finds something worth your attention. Its strength is that you see problems in place, on the actual layout, instead of in a list of code selectors. Its limit is the same as every automated checker: it catches only part of the barriers a real visitor might hit.
Two ways to run WAVE on a page
There are two versions, and which one you use matters.
The online tool. Go to wave.webaim.org, paste a URL and press Enter. WAVE fetches the page and shows it with icons in a side panel. This is the quickest way to try it, but it can only see public pages. It cannot log in to your member area, reach a password-protected staging site or test the checkout after something is in the cart.
The browser extension. WAVE is also available as an extension for Chrome, Firefox and Edge. Once installed, you open any page in your browser and click the WAVE button in the toolbar. Because it checks the page as your browser shows it, it works behind logins and on staging, and it tests the current state of the page. That last part is useful: open the mobile menu, expand an accordion or trigger a form error first, then run WAVE, and the newly visible content gets checked too.
For a business site, the extension is usually the better choice. Use the online tool when you want to show a colleague a result with no installation.
How to use WAVE results: reading the icons
The side panel opens on a summary with counts in several groups. Each group has its own icon color and shape on the page:
| Group | What it means | How to treat it |
|---|---|---|
| Errors (red) | Something that almost certainly fails a WCAG check, such as an image with no alt attribute or a button with no text | Fix, after confirming it is real |
| Contrast errors (red) | Text whose color contrast is below the WCAG AA ratio | Fix, unless the text is purely decorative or a logo |
| Alerts (yellow) | Something that might be a problem and needs a human to decide | Review each one; many are fine, some are serious |
| Features (green) | Accessibility features WAVE found, such as alt text or form labels | Check the content is actually good |
| Structural elements (blue) | Headings, lists, landmarks such as header, navigation and main | Use to check the outline makes sense |
| ARIA (purple) | ARIA attributes in the code | Look for misuse, especially on custom widgets |
Click any icon on the page and WAVE shows a short explanation, and there is a reference view that explains what each item means, why it matters and which WCAG criteria it relates to. Read these. They are written in plain language and are one of the best free learning resources around.
Errors you will see most on WordPress sites
- Missing alternative text. An image with no alt attribute at all. Common on images inserted by page builders, sliders and old content. Our guide to adding alt text in WordPress shows where to fix it.
- Empty link and empty button. A link or button with nothing for a screen reader to announce. Almost always icon-only social links, a hamburger menu toggle, a search icon or a slider arrow.
- Missing form label. A field with no programmatic label. Newsletter boxes that use placeholder text instead of a label are the classic case.
- Linked image missing alternative text. Often the site logo, which then announces as nothing or as a file name.
Alerts that deserve a second look
Alerts are where people either panic or give up. Neither helps. Some common ones:
- Skipped heading level. The page jumps from an H2 to an H4. Often a sign that headings are being chosen for their size. The post on logical heading structure explains how to sort it.
- Redundant link. Two links next to each other go to the same place, such as a product image and its title. Usually minor, but it doubles the work for keyboard users.
- Suspicious link text. Links like “click here” or “read more” that make no sense on their own.
- Very small text. Worth checking for legal disclaimers and footer text.
- Possible heading. Text that looks like a heading but is just bold paragraph text, so screen reader users cannot jump to it.
The structure and contrast views
Two views in the panel are worth learning early.
The structure view lists headings and landmarks in order. Read it as if it were a table of contents. Is there one main heading that names the page? Do the sections underneath make sense? Is the main content inside a main landmark, or is everything just loose on the page?
The contrast view lists each text contrast failure with the foreground and background colors and the ratio WAVE measured. You can adjust the colors there and see when they would pass, which is handy when talking to a designer about brand colors. Remember that WAVE measures colors defined in the code. Text sitting on a photo or gradient may not be measured correctly, so check those by hand. More on ratios is in our post about WCAG color contrast rules.
WAVE also lets you turn page styles off. With styles off, you see the content in the order the code presents it, which is close to the order a screen reader reads. If your sidebar appears before the main content, or the footer navigation comes first, this view shows it at once.
What to fix first
A long WAVE report can feel like a wall. Work through it like this:
- Look for repeats. An error in the header, footer or sidebar shows up on every page. Fix it once in the theme or widget and it disappears everywhere.
- Fix errors on forms and buttons next. Missing labels and empty buttons stop people completing tasks, which is the whole point of the site.
- Then contrast errors on body text and buttons. These affect anyone with low vision, older visitors, and everyone reading a phone outdoors.
- Then missing alt text on content images, starting with images that carry information: charts, maps, product photos, staff photos with names.
- Then review alerts, fixing the ones that are genuine problems and noting the ones you decided were fine, so the next person does not re-check them.
Run WAVE again after each batch of fixes. The counts should go down. If a number goes up after an update, something changed in a theme or plugin.
Where the WAVE accessibility checker stops
A page with zero errors in WAVE can still be very hard to use. The tool cannot judge:
- Whether alt text is accurate. alt=”image” or alt=”DSC_0042″ counts as present, so it shows as a green feature, not an error.
- Whether menus, popups and sliders work with a keyboard, or trap focus.
- Whether the focus outline is visible as you tab through.
- Whether error messages are announced and make sense.
- Whether captions on videos are accurate.
- Whether the page works at high zoom.
It also checks one page at a time. A site with 30 templates needs 30 runs, and more if pages behave differently when logged in. For the other passes a full test needs, see the complete testing method. If you are weighing WAVE against other free options, the overview of testing tools by job may help.
Frequently asked questions
Is the WAVE accessibility checker free?
Yes. The online tool at the WAVE website and the browser extensions for Chrome, Firefox and Edge are free for checking pages one at a time. WebAIM also offers paid options for organizations that want to test many pages automatically, but a small business can do a lot with the free versions and some patience.
Does zero errors in WAVE mean my page is accessible?
No. Zero errors means WAVE found none of the problems it can detect from the code. It cannot test keyboard use, judge alt text quality, check focus visibility or listen to how a screen reader announces things. Treat a clean result as the end of the first step, then test by keyboard and with a screen reader.
What should I do with alerts I decide are fine?
Write them down with the page, the alert type and the reason you accepted it, for example a redundant link that is a product image and title pointing to the same product. WAVE shows the same alerts every time you run it, so without a note the next person to scan the page will spend time reviewing them all over again.
Can WAVE check pages that need a login?
The online version cannot, because it fetches pages from outside without your login. The browser extension can, because it checks the page exactly as your browser shows it. Log in, go to the account page or checkout step, then run the extension. This is also the way to test a password-protected staging site.
WAVE is a good place to start and a good habit to keep. When you want someone to take the findings further with keyboard and screen reader checks, our manual accessibility testing does exactly that, and you can see how it fits with audits and fixes on our website accessibility hub.
Next in this series: axe DevTools: A Plain Guide to the Free Extension
