WAVE Accessibility Scan Guide for Educators and Course Creators

What You'll Learn:

This QuickStart guide will walk you through using the WAVE (Web Accessibility Evaluation Tool) browser extension to scan a web page for accessibility issues. WAVE helps identify potential barriers that might prevent users from accessing your content.

What You'll Need:

10-15 minutes of time
Chrome, Firefox, or Edge browser
A web page to test

Step 1: Install the WAVE Browser Extension

Navigate to https://wave.webaim.org/.
Click on “Browser Extensions” in the navigation menu.
Find the extension for your preferred browser (Chrome, Firefox, or Edge).
Click the link to be directed to your browser’s extension store.
Click “Add to [Browser]” or “Install Extension”.
Confirm the installation when prompted.

Step 2: Scan Your Web Page

Now that you’ve installed WAVE, you can use it to scan any web page for accessibility issues:

Navigate to the web page you want to analyze.
Click the WAVE icon in your browser’s toolbar.
Wait for the analysis to complete (usually takes a few seconds).
The page will reload with the WAVE interface overlay on the left side.

Step 3: Understanding the WAVE Panel Tabs

Summary Tab

The default view showing six main categories:

Errors: Critical accessibility issues that must be fixed.

Alerts: Potential issues requiring human review.

Features: Properly implemented accessibility elements.

Structural Elements: HTML organization components.

Contrast Errors: Text with insufficient contrast.

ARIA: Accessible Rich Internet Applications elements.

Details Tab

Lists all issues by category:

Click any issue to locate it on the page.
Shows specific instances of each issue type.
Click the info icon (ⓘ) for more information.

Reference Tab

Provides comprehensive information about each accessibility issue:

Select any issue first in the Details tab.
View complete documentation about the selected issue.
Each issue includes four key sections:
- What It Means: Clear explanation of the accessibility issue.
- Why It Matters: How this affects users with disabilities.
- How to Fix It: Step-by-step remediation guidance.
- WCAG Reference: Links to official guidelines and standards.

Other Useful Tabs

Order Tab: Shows the reading sequence for screen readers.
Structure Tab: Displays heading hierarchy and semantic structure.
Contrast Tab: Tests color combinations against accessibility standards.

Step 4: Make Accessibility Adjustments

After analyzing your WAVE results, take these targeted actions:

Prioritize Issues
- Address red errors first (missing alt text, form labels, contrast issues).
- Review yellow alerts to determine which need attention.
Document Findings
- Take screenshots of specific issues for reference.
- Create a task list to track necessary updates for yourself or your team.
Plan Next Steps
- Schedule follow-up testing after making changes.
- Identify issues that require manual verification beyond WAVE.

Complete the Accessibility Cycle

WAVE helps identify accessibility barriers, but true accessibility requires more than automation.

Retest After Fixes
- Run WAVE again to verify your fixes were effective.
- Check that addressing one issue hasn’t created others.
Incorporate Manual Testing
- Navigate using only a keyboard (no mouse).
- Test with a screen reader (e.g., NVDA, JAWS, or VoiceOver).
- Check at different screen sizes and zoom levels.
- Review content clarity and organization.

By combining WAVE’s automated insights with manual review, you can create a fully accessible experience for all users.

Want to learn more? Explore WebAIM’s accessibility resources.

This QuickStart guide was created as an educational resource for the Accessible Online Course Design Toolkit. Screenshots based on WAVE version 3.2.0.

WAVE Accessibility Scan Guide for Educators and Course Creators

Guide Overview