How to Use WAVE Tool: Website Accessibility Evaluation Tutorial

WAVE (Web Accessibility Evaluation Tool) from WebAIM is one of the most widely used free accessibility testing tools. Unlike some automated checkers that just list errors, WAVE overlays icons directly on your webpage, making it easy to see exactly where issues occur. This visual approach helps developers and content creators understand accessibility problems in context and fix them more effectively.

This tutorial walks you through installing WAVE, running evaluations, understanding results, and using the insights to improve your website's accessibility.

Getting Started with WAVE

WAVE is available in several forms, each suited to different workflows. The browser extensions are most popular for day-to-day testing, while the API serves teams needing automated or bulk evaluation.

Installing the Browser Extension

The browser extension is the easiest way to start using WAVE. It's available for all major browsers and evaluates pages entirely within your browser—no data is sent to external servers, making it safe for testing authenticated pages and sensitive content.

For Chrome:

1. Visit the Chrome Web Store
2. Search for "WAVE Evaluation Tool"
3. Click "Add to Chrome"
4. Confirm the installation when prompted
5. The WAVE icon appears in your toolbar

For Firefox: Navigate to Firefox Add-ons, search for WAVE, and click "Add to Firefox." The process is similar for Edge—find it in the Microsoft Edge Add-ons store.

After installation, you'll see a small WAVE icon (a circular logo) in your browser toolbar. Click it on any webpage to run an evaluation.

Using the Online Tool

If you prefer not to install anything, WebAIM offers an online version at wave.webaim.org. Simply enter a URL and click "Submit." The tool fetches the page and displays it with accessibility annotations.

Keep in mind that the online version can only evaluate public pages. It won't work for login-protected content, staging environments, or localhost development servers. For those scenarios, you'll need the browser extension.

Running Your First Evaluation

Let's walk through evaluating a webpage step by step.

Starting an Evaluation

Navigate to the page you want to test. This might be your homepage, a product page, a form, or any other content you're concerned about. Once the page has fully loaded, click the WAVE icon in your browser toolbar.

WAVE immediately analyzes the page and transforms the view. You'll notice small icons appearing throughout the page—these are the evaluation indicators. The page itself remains functional; WAVE simply adds an overlay showing accessibility information.

Understanding the Interface

When WAVE runs, a sidebar panel appears on the left side of your browser. This panel contains several tabs:

Summary Tab: Shows the total count of each issue type—errors, alerts, features, structural elements, and ARIA items. This gives you a quick overview of the page's accessibility status.

Details Tab: Lists every issue found, organized by category. Click any item to jump directly to its location on the page.

Reference Tab: Provides detailed information about whatever you've selected, including what the issue means, why it matters, and how to fix it.

Structure Tab: Displays the document outline, showing heading hierarchy, landmark regions, and overall page structure at a glance.

Contrast Tab: Focuses specifically on color contrast issues, letting you test different color combinations.

Interpreting WAVE Results

WAVE uses color-coded icons to indicate different types of findings. Understanding what each color means helps you prioritize your remediation efforts.

Red Icons: Errors

Red icons indicate definite accessibility problems that need to be fixed. These are violations of WCAG guidelines that will cause real barriers for users with disabilities.

Common errors include missing alternative text on images, empty links or buttons, missing form labels, and broken ARIA references. When WAVE shows a red icon, there's no ambiguity—something is wrong and needs attention.

For example, if you see a red icon on an image, clicking it reveals that the image lacks an alt attribute. The fix is straightforward: add meaningful alternative text that describes the image's content or purpose.

Yellow Icons: Alerts

Yellow icons represent potential issues that require human judgment. These aren't necessarily problems, but they warrant review.

A common alert is "Redundant link," which appears when adjacent text and image links go to the same destination. Sometimes this is intentional design; other times it creates an unnecessarily verbose experience for screen reader users. WAVE flags it so you can make an informed decision.

Other alerts include suspicious alternative text (like "image" or "graphic"), very small text, and layout tables. Review each alert to determine whether it represents a real issue in your specific context.

Green Icons: Features

Green icons highlight accessibility features that are working correctly. These include alternative text on images, form labels, linked form controls, and properly implemented ARIA attributes.

Seeing green icons doesn't mean you can ignore them entirely—WAVE can verify that an alt attribute exists, but not whether the text actually describes the image meaningfully. A green checkmark on alt text means the attribute is present, not that it's good.

Blue and Purple Icons: Structure and ARIA

Blue icons represent structural elements like headings, lists, and landmarks. These help you verify that your page is properly organized for screen reader navigation.

Purple icons indicate ARIA attributes. WAVE shows where ARIA is used and helps identify when it might be applied incorrectly.

Common Issues and How to Fix Them

Let's examine the most frequent problems WAVE identifies and walk through fixing each one.

Missing Alternative Text

This is the most common error, appearing as a red icon on images. When WAVE shows this error, the image has no alt attribute at all—screen reader users will hear only "image" or the filename, which is rarely helpful.

The fix depends on the image's purpose. For informative images like product photos or diagrams, add descriptive alt text: alt="Blue running shoe with white sole". For decorative images that don't convey information, use an empty alt attribute: alt="". This tells screen readers to skip the image entirely.

WAVE also flags suspicious alt text with a yellow alert. If your alt text says "image of" or "graphic of" or is just the filename, WAVE will warn you that it's probably not helpful.

Empty Links and Buttons

An empty link contains no text for screen readers to announce. This often happens with icon-only links where the icon is a background image. Users who can't see the icon have no idea where the link goes.

The solution is to add text content. You can use visually hidden text:

<a href="/search">
  <span class="visually-hidden">Search</span>
  <svg aria-hidden="true">...</svg>
</a>

Or use an aria-label attribute:

<a href="/search" aria-label="Search">
  <svg aria-hidden="true">...</svg>
</a>

Both approaches ensure screen readers announce something meaningful while maintaining your visual design.

Missing Form Labels

Every form input needs a label that screen readers can announce. WAVE shows an error when inputs lack associated labels. This happens when developers use placeholder text instead of labels, or when the label element exists but isn't properly connected to the input.

The best solution uses explicit label association:

<label for="email">Email Address</label>
<input type="email" id="email">

The for attribute on the label matches the id on the input, creating a programmatic connection that assistive technologies understand. As a bonus, clicking the label focuses the input—better for everyone.

Low Contrast Text

WAVE's contrast checker identifies text that doesn't meet WCAG contrast requirements. Normal text needs a 4.5:1 contrast ratio against its background; large text needs 3:1.

When WAVE flags low contrast, click the issue to see the actual contrast ratio and how far below the threshold it falls. Then adjust your colors—either darken the text or lighten the background—until you reach at least 4.5:1 for normal text.

WAVE's Contrast tab lets you experiment with different colors and see their contrast ratios in real time, making it easy to find colors that both meet requirements and work with your design.

Broken Heading Structure

The Structure tab reveals your page's heading hierarchy. A well-structured page starts with a single H1 and uses subsequent heading levels (H2, H3, etc.) in order without skipping levels.

WAVE alerts you to skipped heading levels (like jumping from H1 to H3) and multiple H1 elements. These structural issues make it harder for screen reader users to navigate and understand your content organization.

Fix heading structure by ensuring each section uses the appropriate heading level. If you've been using headings for visual styling rather than structure, switch to CSS for the visual treatment and use heading tags only for actual headings.

Testing Dynamic Content

Modern web applications don't just load once—they update constantly. Tabs reveal new content, modals appear, form submissions show success or error messages. WAVE evaluates the page at a specific moment, so you need to test these dynamic states deliberately.

Testing Modal Dialogs

To check a modal's accessibility, first open the modal, then run WAVE. The evaluation will include the modal's content and show whether it has proper structure, labels, and ARIA attributes.

Common modal issues include missing focus management (focus should move into the modal when it opens), lack of descriptive headings, and buttons without clear labels.

Testing Form States

Submit forms with invalid data to trigger error messages, then run WAVE. This evaluates whether your error messages are properly associated with form fields and whether error text has sufficient contrast.

Testing Expanded/Collapsed Content

For accordions, tabs, and expandable sections, run WAVE with content in different states. Test with sections collapsed to see if the controls are properly labeled, then expand them and test again to evaluate the revealed content.

Beyond Basic Evaluation

WAVE catches many accessibility issues, but it can't find everything. Understanding its limitations helps you use it effectively as part of a broader testing strategy.

What WAVE Can't Tell You

WAVE verifies that alt text exists, but not that it accurately describes the image. It confirms labels are associated with inputs, but not whether the label text is clear. It checks that ARIA attributes are syntactically correct, but not whether the interaction pattern they describe actually works.

These qualitative aspects require human judgment. After running WAVE, manually review the content it flagged as correct. Is that alt text actually helpful? Does that form label make sense? Does the heading accurately describe its section?

Combining with Manual Testing

WAVE is most valuable when combined with keyboard and screen reader testing. Run WAVE first to catch obvious technical issues. Then navigate the page using only your keyboard—can you reach everything? Is focus visible? Finally, try the page with a screen reader to experience it as a blind user would.

This three-pronged approach—automated scanning, keyboard testing, and screen reader evaluation—catches far more issues than any single method alone.

Taking Action

WAVE is an excellent starting point for accessibility evaluation—free, visual, and easy to use. Make it part of your regular development workflow by checking pages before deployment. Address red errors immediately, review yellow alerts thoughtfully, and use the insights to gradually improve your site's accessibility.

For automated continuous monitoring across your entire site, TestParty catches issues as they're introduced, preventing accessibility debt from accumulating.

Schedule a TestParty demo and get a 14-day compliance implementation plan.

Related Resources

• How to Test Website Accessibility
• Accessibility Audit Guide
• Color Contrast Requirements
• Alt Text Best Practices