WAVE Evaluation Tool — Complete Guide

In this tutorial, you will learn about WAVE Evaluation Tool. We cover key concepts, practical examples, and best practices to help you master this topic.

WAVE (Web Accessibility Evaluation Tool) provides a visual overlay of accessibility issues directly on the page, using icons and color coding to indicate errors, alerts, features, and structural elements for quick identification.

What You'll Learn

You will install and use the WAVE browser extension, interpret the visual overlay results, filter by issue type, review contrast reports, and generate evaluation summaries.

Why It Matters

WAVE's visual approach makes accessibility issues accessible to non-developers. Designers, content editors, and QA testers can see problems directly on the page without reading raw audit output.

Real-World Use

A content editor adds a new page with images, tables, and headings. Before publishing, they run WAVE and see that two images are missing alt text, a table has no caption, and heading levels skip from h2 to h4. They fix all issues before the page goes live.

WAVE Analysis Flow

flowchart TD
  A[WAVE Scan] --> B[Page Analysis]
  B --> C[Errors - Red Icons]
  B --> D[Alerts - Yellow Icons]
  B --> E[Features - Green Icons]
  B --> F[Structural - Blue Icons]
  B --> G[Contrast Issues]
  C --> H[Detailed View]
  D --> H
  E --> H
  F --> H
  G --> H

Using WAVE

Install the WAVE browser extension for Chrome or Firefox. Click the WAVE icon to toggle the overlay on any page. Icons appear on elements with issues.

<!-- WAVE would flag this with a red error icon -->
<img src="banner.jpg">

<!-- WAVE would flag this as a contrast error -->
<p style="color: #ccc; background: #fff">Light text on white</p>

<!-- WAVE would show this as a structural feature -->
<h1>Page Title</h1>
<h2>Section Title</h2>

/* WAVE contrast checker evaluates these */
.error-text {
  color: #ff0000;
  background: #ffffff;
  /* WAVE shows contrast ratio and pass/fail */
}

.success-badge {
  color: #28a745;
  background: #ffffff;
}

// WAVE API for automated checks (paid)
const wave = require('wave-api');
wave.evaluate('https://example.com').then(results => {
  console.log(`Errors: ${results.statistics.errores}`);
  console.log(`Contrast errors: ${results.statistics.contrast}`);
});

Common Mistakes

• Relying only on WAVE without other tools
• Ignoring yellow alerts thinking they are not important
• Not using the detail panel to understand each issue
• Running WAVE only on completed pages
• Overlooking the contrast report section
• Not expanding collapsed sections to see all issues
• Using WAVE without understanding WCAG criteria

Practice and Challenge

Practice 1: Install WAVE and scan a page. Identify three errors. Practice 2: Review the contrast report and find one failing element. Practice 3: Use WAVE to check heading structure on a long article. Practice 4: Toggle WAVE styles to see the page without CSS. Practice 5: Compare WAVE results with axe-core results for the same page.

Challenge: Use WAVE to evaluate a 10-page site. Create a spreadsheet with columns for page, error count, alert count, contrast errors, and heading structure issues. Identify the three pages with the most issues.

FAQ

Mini Project

Create a WAVE evaluation checklist for a blog template. List the top 10 things WAVE would check on a typical blog post page. Then scan an actual blog post and document which items passed and which failed.

What's Next

Pa11y Accessibility Tool covers using Pa11y for automated accessibility monitoring.