Last week, I was staring at a spinning wheel, waiting for a website to load. With each passing second, my frustration grew. That's when it hit me — if I, with no disabilities, felt this annoyed by a simple delay, how much harder must it be for users with visual, auditory, or motor impairments navigating poorly optimized sites?
This made me realize how crucial it is to build websites that work for everyone, and that’s where WAVE (Web Accessibility Evaluation Tool) comes in. This tool helps us build more inclusive websites by identifying accessibility gaps in our code and showing how they affect users with different needs.
Let's explore how WAVE helps developers create accessible web experiences.
Table of Contents
- What Is WAVE?
- How WAVE Helps Web Developers
- My Step-by-Step Guide for Using Wave
- Understanding a WAVE Report
- Tips for Making the Most of WAVE
What Is WAVE?
WAVE (Web Accessibility Evaluation Tool) is a suite of free tools designed to help developers, designers, and content creators identify and fix accessibility issues on websites. WAVE, developed by WebAIM, evaluates content against WCAG 2.1 and Section 508 standards.
WAVE includes browser extensions for Chrome and Firefox, which let you assess accessibility directly. It also offers a web-based tool for single pages and site-wide scanning for multiple pages.
The tool visually overlays icons and indicators on the page to highlight potential issues. This intuitive interface helps you spot issues like low color contrast, missing alt text, and improper structure.
Note that WAVE is powerful but only part of a full accessibility audit and can't catch everything. Check out these tools to target other areas.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
How WAVE Helps Web Developers
More than one in four people in the U.S. have disabilities. This stat demonstrates why web accessibility is so important — not just for compliance, but for inclusivity and reaching a large part of your audience. WAVE helps developers build more accessible websites, making sure everyone can use and enjoy their digital products. Here’s how it helps specifically:
Automated Accessibility Checks
WAVE helps me quickly identify common accessibility issues without manual testing. It's especially helpful for catching missing alt text, empty links, and bad heading structure. In my experience, WAVE catches around 30-40% of accessibility issues on a typical website.
Some key automated checks WAVE performs include:
- Detects missing alternative text for images.
- Identifies low color contrast.
- Flags empty links and buttons.
- Checks for proper heading structure.
- Finds missing form labels.
As W3C notes, “Automated testing can identify some accessibility problems, but human evaluation is required to determine if a site is accessible.” I use WAVE as a first pass but always follow up with manual testing and user feedback. The automated checks give me a solid starting point to find and fix obvious issues quickly.
Detailed Reports
WAVE generates comprehensive reports that pinpoint accessibility issues and help you streamline remediation efforts. In fact, research shows that 56% of pages have at least one functionality issue, illustrating how prevalent accessibility challenges are.
The reports clearly highlight problems using intuitive icons and color-coding, which help me grasp the scope and severity of issues.
WAVE's detailed breakdowns typically identify anywhere from 20 to 30 distinct accessibility problems per page, depending on complexity. For each issue, the report provides:
- A clear description of the problem.
- The exact location in the code.
- References to relevant WCAG success criteria.
- Specific recommendations for fixing the issue.
I love how WAVE contextualizes problems within the page structure. This helps me understand not just what's wrong but why it matters for accessibility.
As the W3C states, “Evaluation reports should include the scope of the evaluation, the evaluation methods used, and the findings.” WAVE's detailed reports align well with this guidance and give me a solid foundation for improving accessibility.
Educational Resources
WAVE provides contextual learning opportunities for about 40-50 different accessibility concepts. These resources typically include:
- Explanations of WCAG guidelines and success criteria.
- Real-world examples of accessible and inaccessible content.
- Best practices for implementation.
- Links to further reading and official documentation.
I particularly appreciate how WAVE connects each issue to relevant WCAG guidelines, helping me build a more comprehensive understanding of accessibility standards.
WAVE's educational components help you make informed decisions about accessibility improvements beyond just following a checklist.
Integration With Development Tools
WAVE integrates into development workflows to catch accessibility issues early.
It offers many integration options:
- Browser extensions for real-time testing.
- API for automated testing in CI/CD pipelines.
- Command-line tools for batch processing.
I found a Reddit thread highlighting how users often combine WAVE with other tools like the Axe browser extension to enhance their accessibility audits. While WAVE excels at visual element analysis, Axe provides deeper insights into WCAG code compliance.
This combination helps you conduct more comprehensive assessments.
User-Friendly Interface
WAVE's intuitive interface is one of its strongest features and makes accessibility testing more approachable and efficient. The visual feedback provided directly in the browser allows me to quickly identify and understand accessibility issues in context.
Key aspects of WAVE's user-friendly interface include:
- Color-coded icons overlaid on the page.
- Interactive error summaries.
- In-context explanations of issues.
A Reddit thread highlighted how user-friendly WAVE is. Since WAVE provides visual feedback directly in the browser, the features help users quickly identify accessibility issues such as missing alt text and structural tags.
My Step-by-Step Guide for Using Wave
In this section, I’ll outline all the steps you need to perform to get your accessibility insights through Wave. I’ll use HubSpot’s homepage as an example.
1. Run the WAVE evaluation.
To run the evaluation, I simply enter the website URL into the WAVE web interface:
I paste the URL into the input field and click the arrow.
Alternatively, if I‘m using the browser extension, I navigate to HubSpot’s homepage and click the WAVE icon in my browser toolbar.
Within seconds, I see the page reload with WAVE's overlay and display various icons and indicators.
2. Interpret the results summary.
As I examine the results summary for HubSpot's homepage, I see a breakdown of multiple accessibility elements.
Let me explain what each of these means:
- 10 Errors: These are critical accessibility issues that I need to address immediately. They violate WCAG guidelines and can significantly hinder users with disabilities from accessing content.
- 42 Contrast Errors: This indicates the number of instances where text doesn't have sufficient contrast with its background. I know this can make reading difficult for users with visual impairments.
- 13 Alerts: These are potential accessibility issues that I should review. While not as critical as errors, they might still cause problems for some users.
- 104 Features: These are represented by green icons and indicate elements that can improve accessibility — if implemented correctly. These features might include things like alternative text for images, form labels, or language declarations.
- 189 Structural Elements: This shows the number of elements that provide structure to the page, such as headings, lists, and tables. I find this useful for assessing the page's organization.
- 315 ARIA: This indicates the number of ARIA (Accessible Rich Internet Applications) attributes used on the page. ARIA is a set of attributes you can add to HTML elements to provide additional information to assistive technologies like screen readers. While a high number of ARIA attributes isn't necessarily better or worse, it suggests that an effort has been made to enhance accessibility for dynamic or complex content on the page.
While these numbers provide a quick overview, they don‘t tell the whole story. I’ll need to investigate each category more deeply to fully understand HubSpot's accessibility status.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
3. Examine specific issues.
The “Details” tab highlights specific accessibility issues. This tab provides a comprehensive list of all errors, alerts, features, and other elements identified on the page.
The tab is quite interactive. When I click on an icon in the Details tab, WAVE redirects me to the corresponding position on the HubSpot homepage so I can examine each issue in its proper context.
For example, when I click on a specific error icon in the Details tab, WAVE takes me right to that element on the HubSpot page. Clicking the same icon on the homepage then brings up a dialog box with more information. In this case, it tells me a spacer image is missing alt text:
This dialog box also provides two crucial jump links: Reference and Code.
The Reference link takes me to a page explaining why this issue matters for accessibility, how to fix it, and which WCAG success criteria it relates to. This helps me understand the impact of the issue and guides me in resolving it correctly.
The Code link is equally important. It shows me the exact HTML where the issue occurs. This is crucial for developers who need to pinpoint and fix the problem in the source code. It saves time and reduces the chance of addressing the wrong element.
I love how these features let me identify, understand, and fix specific accessibility issues.
4. Check the Order tab.
The “Order” tab in WAVE explains how screen reader users and keyboard-only users might experience the page. It shows the linear order of elements as assistive technologies would read it.
Here's why I love this tab:
- Sequential numbering: Each element is numbered, allowing me to trace the exact path a screen reader would follow.
- Element hierarchy: I can see how nested elements are structured, which helps me understand the logical flow of information.
- Hidden elements: The tab reveals elements that are visually hidden but still present in the code, which is crucial for ensuring all content is accessible.
- Tab order: By following the numbered sequence, I can verify if the tab order makes sense for keyboard navigation.
- Content prioritization: This view helps me assess if the most important information is positioned appropriately in the reading order.
This way, the Order tab pinpoints any issues with content structure that might confuse or frustrate users relying on assistive technologies. It ensures any page provides a coherent and logical experience for all users, regardless of how they access the content.
5. Explore structural elements.
The “Structure” tab helps you understand how the page is organized and how users relying on assistive technologies might experience it.
I can see a breakdown of key structural components:
- Header
- Navigation
- H2s and H3s (heading levels)
- Footer
Again, this tab is interactive. For instance, when I click on an element like “H3 Operations Hub,” WAVE instantly directs me to the corresponding location on the HubSpot page. I can quickly assess the context and placement of each structural element.
Here’s why this tab is handy:
- Easily verify if the heading hierarchy is logical and properly nested. This is essential for screen reader users who often navigate by headings.
- Check if the navigation is properly marked up, ensuring it's accessible to keyboard-only users.
- Confirm that important sections like the header and footer are correctly identified, which aids in overall page orientation.
- Spot any missing or improperly used structural elements that might confuse users or hinder navigation.
6. Check color contrast.
When I navigate to the “Contrast” tab in WAVE, I get a detailed breakdown of color contrast issues on the HubSpot homepage. I can then ensure text readability for all users, especially those with visual impairments.
Here's what I see in this tab:
- Foreground and background color pickers: These allow me to see the exact colors being used and even adjust them to test different combinations.
- Contrast ratio: In this case, it's 3.07:1. This ratio compares the luminance of the text color to its background.
- Text size: Labeled as “Normal” here, which affects the required contrast ratio.
- WCAG AA and AAA compliance: I can see that this particular color combination fails both AA and AAA standards, indicated by the “Fail” labels.
- Sample text: This shows how the text appears with the current color settings.
- Contrast error icons: The red icons with ‘x’ marks represent specific instances of contrast errors on the page.
When I click on one of these contrast error icons, WAVE directs me to the exact location on the HubSpot page where this issue occurs. You can see the problematic text in context and better understand its impact on the overall design.
7. Use the code view.
The “Code View” presents the actual HTML source code of the HubSpot homepage, but with a crucial twist — it‘s annotated with WAVE’s accessibility findings.
It pinpoints exactly where in the code accessibility issues occur. Each WAVE icon is inserted directly into the HTML, which makes it easy for me to locate problems in the context of the surrounding code.
The feature lets you quickly identify which specific elements need attention, understand how they‘re structured, and plan the necessary fixes. Whether I’m dealing with missing alt text, improper heading structures, or ARIA implementation issues, the Code View gives me the exact information I need to make accessibility improvements.
Understanding a WAVE Report
The WAVE Accessibility IMpact (AIM) report gives you a detailed look at how accessible your website is. It pulls together WAVE data, your site's AIM score, and expert testing results to show how accessible your web content is for people with disabilities. Higher AIM scores show a bigger positive impact and better accessibility features.
This service costs $500 for a scan of up to 20,000 pages, with an extra $100 for every 20,000 pages after that. For sites with over 100,000 pages, custom pricing is an option, or you could look into alternatives like the WAVE Stand-alone API or Pope Tech.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Automated Accessibility Report
The Automated Accessibility Score shows the site's errors, error density, and potential accessibility issues compared to a sample of 1,000,000 homepages. A higher score means better accessibility. The average homepage with a score of 5 out of 10 has 51.4 detectable errors, so even a high score can still mean there are accessibility barriers.
In this example, NASA’s website scored a 6.7 out of 10.
The report highlights metrics like total accessibility errors, pages analyzed, and average errors per page. WAVE points out the top accessibility errors detected, with very low contrast being the most prevalent issue, accounting for 76% of all errors.
Other major issues include empty links, missing form labels, linked images missing alternative text, and missing alternative text for images.
Manual Accessibility Impact Score
The Manual Accessibility Impact Score section provides a more nuanced evaluation of NASA's website accessibility. The overall score of 7.2 out of 10 comes from manually testing four pages: Home, About, Topics, and a random page.
I noticed that the Topics page scores the highest at 8.4, while the random page scores the lowest at 6.7. This variation tells me that accessibility implementation isn't consistent across the site.
The Reviewer Notes for the Homepage point out issues like contrast problems with the placeholder text in the search form.
These observations highlight issues automated testing might miss, showing why manual reviews are crucial for accessibility. They also provide clear, actionable feedback for improving the site's accessibility.
AIM Score and Report
The AIM Score and Report section score combines the automated accessibility evaluation with the manual assessment to give you a comprehensive view of the site's accessibility.
NASA's website has received an overall Accessibility Impact Score of 7 out of 10.
The report highlights that there are 230,476 detectable errors across 15,016 pages, averaging 15.3 errors per page. There's a lot of room for improvement in WCAG conformance.
The most prevalent issue I notice is very low contrast, accounting for 76.3% of all errors with 175,912 instances. The report helpfully explains why this matters and what to do about it. The second most common error is empty links, with 36,001 instances.
This detailed breakdown helps me prioritize accessibility improvements for the NASA website.
Tips for Making the Most of WAVE
To help you get the most out of WAVE, I've put together some expert-backed tips and best practices. I spoke with web accessibility specialists and WAVE users to get their insights on using the tool effectively. Their combined advice shapes these practical recommendations.
1. Get experienced disabled users to test the website.
Automated tools like WAVE are invaluable, but they're just the first step in creating truly accessible websites. To ensure your site works for everyone, you need real people with disabilities to test it.
Why? Because accessibility isn‘t just about ticking boxes — it’s about creating a seamless experience for all users. Disabled testers can uncover issues that automated tools miss, like unclear navigation or confusing instructions.
As Marie Dobust at Facilitation puts it, “The WAVE accessibility automated check has its limits. You still need experienced disabled users to test the website themselves, such as with a screen reader, to truly assess a website's accessibility and ease of navigation. An automated tool cannot tell (yet) if your navigation links and instructions are unclear or ambiguous to people with cognitive disabilities. Most times, a human will need to assess that.”
Combine WAVE's automated checks with real-world testing to create a more inclusive, user-friendly website that truly serves all your visitors.
2. Try WAVE on different browsers.
Browsers aren‘t created equal. Each one interprets and renders web content in its own unique way. This means that running WAVE on a single browser might not give you the full picture of your site’s accessibility.
Why does this matter? Because your users aren't all using the same browser. Fabio Devin, CEO of Dorve UX, mentions, “Run WAVE in both Firefox and Chrome. Since they render content differently and WAVE only analyzes rendered code, you might notice differences.”
This simple step can uncover hidden accessibility issues that you‘d otherwise miss. It’s a low-effort way to catch potential problems before they impact your users.
3. Incorporate WAVE into your team’s accessibility education and training.
WAVE can become a powerful educational tool for your entire team. Incorporate WAVE into your training processes to build a culture where accessibility is a core value, not an afterthought.
When everyone understands the importance of accessibility and how to achieve it, it becomes a natural part of your workflow. A proactive approach leads to better designs, fewer issues down the line, and a more inclusive product overall.
Dima Lepokhin, co-founder of Heartbeat, a specialized design studio that creates brand identities and product experiences, shares his experience:
“Getting hands-on with WAVE and experiential exercises was found to be quite effective in fostering [my team’s] ‘accessibility attitude.’ From the first phases of projects, accessibility issues naturally surfaced in our discussions. Often seen gathered around a screen, team members would be checking their work using WAVE and generating ideas to address accessibility issues.”
Seeing real-world examples and understanding how accessibility issues impact users helps team members develop an attitude that influences every aspect of their work.
4. Run WAVE in responsive mode.
Your website may look great on desktop, but what about on mobile? As more users access the web through various devices, ensuring accessibility across all screen sizes is crucial.
Responsive design can significantly alter how your content is presented and interacted with. Elements accessible on a large screen might become problematic on smaller devices. Testing in responsive mode makes sure you're addressing accessibility for all your users, regardless of their device.
Devin emphasizes this point: “Since WAVE reads rendered code, media queries will affect the output.”
This simple step exposes hidden accessibility issues that only appear on certain screen sizes. It ensures your efforts to create an accessible site extend to all versions of your design.
Embrace Inclusive Web Design
I've realized that web accessibility is more about empathy than anything else. WAVE has shown me all the ways we can make the web easier to navigate for everyone.
I was surprised by how many accessibility issues can slip through, even when we think we're being thorough. The browser comparison feature really stood out to me, showing how accessibility issues vary across platforms.
Ready to improve your site's accessibility? Download our checklist and make your website easy for everyone to use.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
