WAVE accessibility errors explained: what each one means and how to fix it

You ran your site through WAVE, the free checker from WebAIM, and got a page full of icons and a summary with Errors, Contrast Errors and Alerts. WAVE is a good tool, but it tells you what it found, not how to fix it on your site. This guide translates the items small-business sites see most often, with copy-paste code and the WCAG 2.2 rule behind each one. Item names and descriptions come from WebAIM's WAVE documentation.

First: what the WAVE summary means

• Errors and Contrast Errors are things WAVE is confident are problems. Fix these first.
• Alerts are things to look at. Some are real problems (a skipped heading level, "click here" links), some are fine once you've checked them.
• Features, Structural Elements and ARIA are not errors. They show what's on the page (alt text, headings, landmarks, ARIA attributes) so you can check they're used correctly.

Zero errors in WAVE doesn't mean your site is accessible, and a long list doesn't mean it's unusable. It's one automated check of one page.

1. "Missing alternative text" and "Linked image missing alternative text"

An image has no alt attribute, so a screen reader may read the file name or nothing. When the image is the only thing inside a link (a logo linking home, a product photo), the link has no name at all. Write alt text that says what the image shows or, for a linked image, where the link goes. Decorative images get an empty alt="" (WCAG 1.1.1, 2.4.4).

<!-- Before -->
<a href="/"><img src="logo.png"></a>
<img src="divider-swirl.png">

<!-- After -->
<a href="/"><img src="logo.png" alt="Rosa's Bakery home"></a>
<img src="divider-swirl.png" alt="">

On most builders you add alt text in the image settings rather than in code. See alt text examples and try the free alt text checker.

2. "Empty link" and "Empty button"

A link or button contains no text, usually because it's only an icon: a search magnifier, a cart, a hamburger menu, social icons, slider arrows. Screen reader users hear "link" or "button" and nothing else. Give each one a name (WCAG 2.4.4, 4.1.2).

<!-- Before -->
<a href="https://www.instagram.com/yourshop"><i class="icon-instagram"></i></a>
<button class="menu-toggle"><svg>...</svg></button>

<!-- After -->
<a href="https://www.instagram.com/yourshop" aria-label="Instagram"><i class="icon-instagram" aria-hidden="true"></i></a>
<button class="menu-toggle" aria-expanded="false"><svg aria-hidden="true" focusable="false">...</svg> Menu</button>

Visible text such as "Menu" helps everyone; use aria-label when there's no room. Also delete empty links left behind by a theme (an <a href="#"></a> with nothing in it). See link text and buttons and social media icons.

3. "Missing form label", "Empty form label", "Multiple form labels" and "Orphaned form label"

All four mean a field and its label aren't connected properly. Placeholder text inside a box isn't a label: it disappears when you type and many screen readers don't treat it as one. Each field needs one visible <label> whose for matches the field's id (WCAG 3.3.2, 1.3.1).

<!-- Before: placeholder only, label pointing nowhere -->
<label for="mail"></label>
<input type="email" id="email" placeholder="Email">

<!-- After: one visible label, matching for/id -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email">

"Orphaned form label" usually means the for value has a typo or points at a field that was deleted. Form plugins and builders usually have a "show labels" setting; turn it on rather than relying on placeholders. See accessible contact forms and embedded form builders.

4. "Very low contrast"

Text is too light for its background. WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 18pt, or 14pt bold) (WCAG 1.4.3). The usual culprits are light grey body text, white text on pale brand colours, and placeholder or footer text.

/* Before: #9ca3af on white is about 2.5:1 */
.footer p, .card .meta { color: #9ca3af; }

/* After: #4b5563 on white is about 7.6:1 */
.footer p, .card .meta { color: #4b5563; }

Check your own colour pairs with our free contrast checker; the numbers above are examples. WebAIM notes that WAVE doesn't identify contrast problems in text with CSS transparency, gradients or filters, and text on a photo needs checking by eye, so look at hero banners and buttons on images yourself. See the contrast guide.

5. "Language missing or invalid" and "Missing or uninformative page title"

The page doesn't say what language it's in, so a screen reader may read it with the wrong pronunciation, or the page title is missing, empty or "Untitled" (WCAG 3.1.1, 2.4.2).

<html lang="en">
<head>
  <title>Wedding cakes and custom orders | Rosa's Bakery, Tulsa</title>
</head>

Builders set both in the site language setting and each page's SEO title. See page titles and language.

6. "Empty heading", "Broken skip link" and "Empty table header"

• Empty heading: a heading tag with nothing in it, often a spacer a theme added. Delete it, or put real text in it (WCAG 1.3.1, 2.4.6).
• Broken skip link: a "Skip to content" link whose target doesn't exist, or which is hidden with display:none so keyboard users can't use it. Point it at the main content's id and show it on focus (WCAG 2.4.1). See focus and skip links.
• Empty table header: a <th> with no text, often the top-left cell. Give it text, or make it a <td>. See accessible tables.

<a class="skip" href="#main">Skip to main content</a>
...
<main id="main">...</main>

<style>
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 1000; background: #fff; padding: .5rem 1rem; }
</style>

7. "Broken ARIA reference" and "Broken ARIA menu"

Broken ARIA reference means aria-labelledby or aria-describedby points at an id that isn't on the page, so the label or hint is never read. Fix the id or remove the attribute (WCAG 4.1.2).

Broken ARIA menu usually means a website's navigation has role="menu". That role is for app-style menus operated with arrow keys, not for a list of site links. For normal navigation, removing the role is usually the right fix (WCAG 2.1.1).

<!-- Before -->
<ul role="menu"><li><a href="/services">Services</a></li>...</ul>

<!-- After -->
<nav aria-label="Main">
  <ul><li><a href="/services">Services</a></li>...</ul>
</nav>

See accessible navigation menus.

8. Alerts worth acting on

• Skipped heading level and Missing first level heading: use one H1 for the page's main topic and don't jump from H2 to H4 just for size. Restyle the heading instead. See heading structure.
• Possible heading: large or bold text that looks like a heading but isn't one. If it's a section title, make it a real heading.
• Suspicious link text: "click here", "read more", "more". Name the destination: "Read our catering menu".
• Redundant link: a product photo and the product name next to it both link to the same page. Combine them into one link, or give the image alt="" inside the combined link.
• Suspicious alternative text: alt text such as "image", "logo", "photo" or a file name like "IMG_2041.jpg". Describe what it shows instead. See reviewing AI-generated alt text.
• Missing fieldset: a group of radio buttons or checkboxes without a <fieldset> and <legend> that says what the group is ("Preferred contact method").
• Link to PDF document and YouTube video: WAVE can't check inside them. Make sure the PDF is tagged or also on a web page, and that videos have accurate captions, not just auto-captions. See accessible PDFs and video captions.
• Device dependent event handler and Tabindex (a positive value): something may only work with a mouse, or the Tab order has been forced. Test it with the keyboard test.

WAVE names vs other checkers

Different checkers use different engines and names for similar problems. If you also use Lighthouse, axe DevTools or our snapshot (which all use the axe-core engine), these items usually line up:

The two tools won't always agree, and that's normal: each one checks things the other doesn't. See free checkers compared and fixing Lighthouse errors.

Where to fix it on your platform

• WordPress: alt text in the Media Library, labels in your form plugin's field settings, headings in the block editor. Theme output (menus, icons, skip links) may need a theme setting, a child theme or a developer. See WordPress fixes.
• Shopify: alt text on product media, theme items in the theme editor or the theme code (test on a duplicate theme first). See Shopify fixes.
• Squarespace, Wix and GoDaddy: most items are fixed through the editor's image, text-style and form settings rather than code; some template items can only be reported to the platform. See the Squarespace, Wix and GoDaddy guides.
• Webflow: element settings for alt text, labels and heading levels; custom code embeds for anything else. See Webflow fixes.

Settings move around, so check each platform's own help pages for the current option names.

Common mistakes

• Chasing zero WAVE errors by adding aria-label or aria-hidden="true" everywhere. Hiding a link or button from screen readers doesn't fix it, and wrong ARIA can be worse than none.
• Silencing "Missing alternative text" with alt="image" or the file name. WAVE then flags it as suspicious, and it still doesn't help anyone.
• Deleting the skip link instead of fixing its target.
• Fixing the homepage only. Run WAVE on your booking, contact, product and checkout pages too.
• Treating "0 errors" as proof the site is accessible or meets the ADA. It's one automated check.

A 10-minute check you can do today

1. Run WAVE (or the free snapshot at the top of this page) on your homepage and your main contact or booking page.
2. Fix every Empty link, Empty button and Missing form label first: those stop people completing tasks.
3. Fix Very low contrast on body text, buttons and form hints.
4. Read through the Alerts and act on skipped headings and "click here" links.
5. Press Tab through the page. Can you see where you are and reach everything, including the menu?
6. Run the check again to confirm the count went down.

What a scan can and can't check here

WAVE and our snapshot are both automated checks, and automated checks find only part of the barriers on the pages they visit. They can flag missing alt attributes, unnamed links and buttons, unlabelled fields, many contrast problems, missing titles and language. They can't tell whether alt text is accurate, whether a whole task works with a keyboard and screen reader, how text over photos reads, or what's inside PDFs, videos and third-party widgets, and they can't tell you whether your site meets any law. Our Fix-Pack scans up to 10 pages with axe-core and gives copy-paste fixes for what it finds, ranked by impact; the manual checks above are still yours to do.

Fixing WAVE results on client sites? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

WAVE is a free tool from WebAIM at Utah State University; Altwise isn't affiliated with WebAIM. This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Square Online website accessibility fixes: alt text, menus, contrast and ordering
• Age gate pop-up accessibility: "Are you 21?" checks that work with a keyboard and screen reader
• Link-in-bio page accessibility: button text, contrast and images for Instagram and TikTok links
• Pay-your-bill page accessibility: invoice and online payment forms for small businesses

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.