We frequently get asked how Equalize Digital Accessibility Checker compares to WAVE, the popular browser extension and API for automated accessibility testing. The team at Equalize Digital loves WAVE; most of us use it multiple times a day, every day. This blog post compares our Accessibility Checker WordPress plugin to WAVE, discussing use cases for each tool and how each can fit into your accessibility testing tool chest.
About Equalize Digital Accessibility Checker
Equalize Digital Accessibility Checker is a WordPress plugin designed to help website owners and developers identify and fix accessibility issues on their websites. It scans WordPress websites for compliance with accessibility standards such as the Web Content Accessibility Guidelines (WCAG) and provides detailed reports on issues that may affect users with disabilities.
Key Features of Accessibility Checker
Integration with WordPress
Accessibility Checker is designed to work seamlessly with the WordPress content management system (CMS), making it a valuable tool for developers, content creators, and website owners in that environment.
Accessibility Checker has rules optimized for WordPress websites and many popular WordPress plugins, themes, and core blocks. These WordPress-specific rules help to reduce false positives and improve the accuracy of identified issues.
Real-Time Feedback
The plugin highlights issues directly within the WordPress dashboard, making it easy to address them without switching tools. Posts and pages are scanned every time they are saved (whether as drafts or published posts). Reports in the editor allow authors and developers to find and correct accessibility problems before publishing them to the world.
On the front-end of the website, Accessibility Checker overlays icons and indicators directly on the webpage, allowing users to see exactly where an issue occurs.
Full-site Accessibility Scans and Reports
Paid versions of Accessibility Checker include the ability to perform bulk scans of all posts, pages, and custom post types on the website. The plugin crawls all site pages and provides reports summarizing accessibility status site-wide. It can search for common accessibility problems across hundreds of thousands of pages and quickly show where efforts most need to be focused.
CSV Export
With the CSV Export add-on, reports and issues can be easily exported to CSV for management in a spreadsheet or to be imported into a project management tool.
Automated Fixes
Accessibility Checker includes 14 automated fixes that help website owners fix common accessibility problems with the click of a button. Examples of fixes included in Accessibility Checker are:
- Adding skip links
- Adding focus indicators
- Labeling form fields
- Adding file information to linked documents
- Blocking links from opening in new windows
- Forcing link underlines
- … and more.
Tracking Changes Over Time
With the Audit History add-on, Accessibility Checker allows users to track changes to accessibility over time. It includes a graph that visualizes passed test percentage and total issue counts each day and a table that makes it easy to report how the site compares now to any previous point.
Accessibility Checker Pricing
Accessibility Checker offers both free and paid plans. All plans include unlimited scanning of posts and pages with no per-page fees. Paid plans include additional features and add-ons with pricing from $144-$1800/year. Monthly pricing is available for higher-tier plans. See Accessibility Checker pricing here.
About WAVE
WAVE (Web Accessibility Evaluation Tool) is a suite of accessibility tools developed by WebAIM, an organization from the Institute for Disability Research, Policy & Practice at Utah State University.
WAVE provides automated accessibility testing reports in three ways:
- through a tool built into the WebAIM website,
- via Chrome, Firefox, and Edge browser extensions, and
- through a subscription API.
The WAVE tool on the WebAIM website and browser extension are free and can be used by anyone. The WAVE API requires developer-skills to generate reports.
Key Features of WAVE
Detailed Visualization of Accessibility Issues and Features
WAVE’s web tool and browser extension provide a detailed visualization of the accessibility status of a webpage with icons and indicators overlayed on the page. In addition to flagging errors and alerts (warnings), WAVE also displays accessibility features and ARIA information on the website. Many items being flagged have unique icons, making it easy to assess the page at a glance.
Ability to Test Any Webpage
WAVE’s Chrome, Edge, and Firefox browser extensions allow users to test any web page with the click of a button. While WAVE’s website tool can only test published web pages, the browser extensions can test local, dynamic, or password-protected web pages. WAVE is CMS agnostic and can test any web page regardless of how it was built.
Support for Manual Testing
In addition to automated scanning, WAVE provides information to assist with manual accessibility tests. Features that help with manual accessibility tests include:
- Showing image alt text and aria-label text on the page to reduce the need to inspect the code.
- Outputting heading tags on headings on the front end of the website.
- Adding a numerical representation of the page’s tab order.
- Providing an outline-formatted list of headings and their heading levels.
It helps website owners, developers, and content creators evaluate their web pages for compliance with accessibility standards like the Web Content Accessibility Guidelines (WCAG). WAVE identifies accessibility issues and provides guidance on how to fix them to make websites more accessible to people with disabilities.
Includes a Tool for Experimenting with Color Contrast
In addition to flagging color contrast issues, WAVE also includes a tool where users can enter a foreground and background color (via hex code or by picking from a color picker) and see the contrast ratio of the two colors. This is useful if you’re trying to find a different color combination to replace one that currently fails accessibility.
API Allows Developers to Customize Reporting
The WAVE API (Application Programming Interface) extends the functionality of the WAVE tool by allowing developers to automate accessibility testing within their workflows. This is particularly beneficial for organizations that must ensure ongoing compliance across multiple web pages or applications or want to build a custom reporting interface.
WAVE Pricing
The WAVE website tool and browser extension are entirely free. These tools scan one page at a time and can be used without charge or signup. The WAVE API requires the purchase of credits.
When using the WAVE API, basic analysis of one web page costs you 1 credit. A “basic” analysis will return only the WAVE statistics for the analyzed page – the number of errors, contrast errors, alerts, features, ARIA elements, and structural elements, but will not tell you what the issues are.
If you want the WAVE API to return enough information to find issues on a page and contrast data, each scan will require 4 credits. The cost of credits depends on how many you purchase.
# of Credits | Price |
---|---|
250-999 | $.04/credit. 250 credit ($10) minimum purchase. |
1000-9999 | $.03/credit |
10000+ | $.025/credit |
If you were using the WAVE API, each time you scanned a page, it would cost you between $0.16 and $0.01 per scan (depending upon the volume of credits purchased).
If you had a website with 1,000 posts and pages and you wanted to scan them all one time, the cost would be $10. If you wanted to rescan to test fixes as you release them, each rescan of the entire site would cost $10. Rescanning the entire site once a week would cost $520 per year.
Rule/Check Comparison
Which Checks Exist in Each Tool
Are you wondering how the issues Accessibility Checker tests for compare to what WAVE tests for? This table shows a comparison of all the checks in both Accessibility Checker and WAVE.
Check | ||
---|---|---|
Ambiguous Anchor Text | Error | Alert - "Suspicious link text" |
Blinking or Scrolling Content | Error | Error (includes 2: "Blink content" and "Marquee" |
Broken ARIA Reference | Error | Error |
Broken ARIA menu | - not present | Error |
Broken Skip or Anchor Link | Error | Includes: "Broken skip link" error and "Broken same-page link" alert |
Duplicate Form Label | Error | Error "Multiple form labels" |
Empty Button | Error | Error |
Empty Heading Tag | Error | Error |
Empty Link | Error | Error |
Missing Form Label | Error | Error "Empty Form Label" |
Empty Table Header | Error | Error |
Missing Table Header | Error | Alert "Layout table" |
iFrame Missing Title | Error | - not present |
Image button missing alternative text | Covered by: "Image missing alternative text" error and "Image empty alternative text" warning | Error |
Image Map Missing Alternative Text | Error | Error "Image map area missing alternative text" and "Image map missing alternative text" |
Image Missing Alternative Text | Error | Error |
Improper Use of Link | Error | - not present |
Incorrect Heading Order | Error | Alert "Skipped heading level" |
Insufficient Color Contrast | Error | Error "Very low contrast" |
Linked Image Missing Alternative Text | Error | Error |
Linked Image Empty Alternative Text | Error | Error |
Long Description Invalid | Error | Includes: "Invalid longdesc" error and "Long description" alert |
Missing Language Declaration | Error | Error "Language missing or invalid' |
Missing Title | Error | Error "Missing or uninformative page title" |
Missing Transcript | Error | - not present |
Page refreshes or redirects | - not present | Error |
Readability & Simplified Summary | Error | - not present |
Spacer image missing alternative text | Covered by "Image missing alternative text" error | Error |
Zooming and Scaling Disabled | Error | - not present |
Accesskey | - not present | Alert |
A Slider is Present | Warning | - not present |
A Video is Present | Warning | Alerts: "Audio/Video", "HTML5 video or audio", and "YouTube video" |
ARIA Hidden | Warning | - not present |
Device dependent event handler | - not present | Alert |
Duplicate Alternative Text | Warning | Alerts: "Redundant alternative text" and "A nearby image has the same alternative text" |
Empty Paragraph Tag | Warning | - not present |
Image Animated GIF | Warning | - not present |
Image Empty Alternative Text | Warning | Feature |
Image Long Alternative Text | Warning - flags on 300 characters; filterable so you can change threshold | Alert - flags on 100 characters |
Image with title | - not present | Alert |
Flash, Java applet, Plugin | - not present | Alert |
JavaScript jump menu | - not present | Alert |
Link Opens New Window or Tab | Warning | - not present |
Link to MS Office File | Warning | Alert "Link to Word document", "Link to Excel spreadsheet", and "Link to PowerPoint document" |
Link to Non-HTML File | Warning | Alert "Link to document" |
Link to PDF | Warning | Alert |
Long description | - not present | Alert |
Low-quality Alternative Text | Warning | Alert "Suspicious alternative text" |
Missing fieldset | - not present | Alert |
Fieldset missing legend | - not present | Alert |
Missing Subheadings | Warning | Alert "No heading structure" |
Missing first level heading | - not present | Alert |
No page regions | - not present | Alert |
Noscript element | - not present | Alert |
Orphaned form label | - not present | Alert |
Possible Heading | Warning | Alert |
Possible list | - not present | Alert |
Possible table caption | - not present | Alert |
Redundant link | - not present | Alert |
Redundant title text | Partial coverage by "Duplicate Alternative Text" Warning | Alert |
Select missing label | Included in Missing Form Label error | Alert |
Tab Order Modified | Warning | Alert "Tabindex" |
Text Justified | Warning | Alert |
Text Too Small | Warning | Alert "Very small text" |
Underlined Text | Warning | Alert |
Unlabeled form control with title | Covered by "Missing form label" error | Alert |
The table shows that many checks are the same between the two tools or have only minor naming differences. For example, WAVE calls non-error issues “alerts” and Accessibility Checker calls them “warnings.”
Differences in the Rulesets
Here are some other notable differences in the rulesets:
- Accessibility Checker flags ambiguous links as errors, WAVE flags these as alerts.
- Accessibility Checker flags warnings on images with empty alternative text; WAVE calls these “features.”
- Accessibility Checker groups similar issues under broader categories, e.g., Link to MS Office File is a single rule that covers multiple separate rules in WAVE (Link to Word document, Link to Excel spreadsheet, and Link to PowerPoint document).
- Accessibility Checker detects unique issues like Improper Use of Link, Zooming and Scaling Disabled, and Missing Transcript, which WAVE does not flag.
- WAVE flags Orphaned Form Labels, Fieldset issues, and Missing H1 headings, which Accessibility Checker does not currently flag (though these are on our roadmap).
Comparison of Results on a Website
I ran both Accessibility Checker and WAVE on the home page of our Accessibility Checker demo website. The demo site was created to emulate an e-commerce store selling shoes, and many accessibility problems were intentionally added to make demoing accessibility testing easier. You can create your own demo site here to replicate these tests.
Summary of Findings
Here are high-level counts for each tool running on the same web page:
Issue Type | ||
---|---|---|
Errors | 19 | 4 |
Contrast Errors | 7 | 17 |
Warnings/Alerts | 13 | 26 |
At a glance, WAVE and Accessibility Checker scan results look very different on this page. We have to break this down more to show why.
What Accessibility Checker Flagged
Here are more details on what Accessibility Checker flagged on this web page:
- 19 Errors
- 6 Incorrect heading order
- 4 Linked image empty alternative text
- 4 Empty link
- 2 Missing table header
- 2 Improper use of link
- 1 Ambiguous anchor text
- 7 Insufficient Color Contrast
- 13 Warnings
- 7 Image Empty Alternative Text
- 5 ARIA Hidden
- 1 A Slider is Present
What WAVE Flagged
Here are more details on what WAVE flagged on this web page:
- 4 Errors
- 4 Linked image missing alternative text
- 17 Contrast Errors
- 26 Alerts
- 5 Select missing label (hidden from page)
- 6 Skipped heading level
- 10 Redundant link
- 1 Noscript element
- 4 Layout table
- 20 Features including 14 images with null or empty alternative text
Comparing and Contrasting the Reports
When looking at these two reports, here are helpful things to remember to understand the differences better, as well as my thoughts about why the reports differ.
Differences in Severity
Both WAVE and Accessibility Checker have a test for heading levels. Both tools found the same six headings that were out of order. WAVE flagged these six headings as “alerts” whereas in Accessibility Checker they are errors.
Why the difference? When building Accessibility Checker we had a lot of conversations with real-world screen reader users and they all told us how important headings (and headings in the right order) are for helping them navigate and understand a page. Because of this, we chose to make our Incorrect Heading Order check an error instead of a warning.
Likewise, Accessibility Checker flags images with empty or null alternative text (alt=""
) as a warning when WAVE flags it as a feature. Most users we spoke with interpret a “feature” as a good thing and something to ignore, but in many cases, an image without alt can be bad. We made this check a warning to remind content authors that they need to confirm it is correct to have empty alt on the image.
Based upon Equalize Digital’s experience, accessibility auditing, and our conversations with disabled people, we feel strongly that our approach to rating severity is more correct and user-friendly than WAVE’s.
Differences in Finding and Counting Elements
You may wonder why WAVE finds so many more color contrast issues than Accessibility Checker does. I wondered this myself, and here’s what I found while digging in…
The difference in count is due to how Accessibility Checker finds things on the page. WAVE uses a combination of XPath and CSS to identify elements, whereas, for some checks, Accessibility Checker relies purely on the HTML code snippet. This can sometimes result in lower total counts if the exact same element is on the page multiple times.
Here’s an example: in the products section, there are categories for each product that fail color contrast. All four shoes are in the same category and so have the same text (“Running Shoes”) that fails contrast. This is flagged 4 times in WAVE.
Accessibility Checker also flags this color contrast failure, but only the first instance.
From a count accuracy standpoint, WAVE’s approach to identifying issues is better than Accessibility Checker’s as Accessibility Checker sometimes under-reports repeated or identical elements on the same page. This may be something for Accessibility Checker to address in a future software version.
However, from a remediation standpoint, Accessibility Checker’s report is equally valuable to WAVE’s. These identical elements likely only need to be fixed once, not four times – the same CSS targets all instances of the element. Even if someone were to only fix the first flagged instance, on the next scan would flag the second instance (and so on) until all instance of repeated elements were fixed.
Differences in Algorithms
Accessibility Checker and WAVE have different approaches to assessing elements. WAVE uses a propriety ruleset and provides minimal information (typically one sentence in the WAVE API documentation per check) about how they are identifying issues.
Accessibility Checker has open source rules based on axe-core and custom rules. The logic for evaluating elements is open to the public on Equalize Digital’s Accessibility Checker GitHub repo.
Because WAVE is not open source, it is difficult to understand why some elements flag and others don’t when compared to Accessibility Checker. However, there are definite differences in algorithms that we believe lead to false positives or missed items in WAVE.
Here’s an example of an item Accessibility Checker flags but WAVE missed:
In this image, Accessibility Checker is flagging an Ambiguous Anchor Text error on a link that is styled to look like a button with the text of “Learn More” and an SVG of a right-pointing arrow.
WAVE has a “Suspicious link text” alert as well, but it is failing to flag this element.
Why is WAVE failing to flag this “Learn More” link? Per WAVE documentation, Suspicious link text is flagged when:
a link contains the phrase “click here” or “click”, or the link text is “click here”, “here”, “more”, “more…”, “details”, “more details”, “link”, “this page”, “continue”, “continue reading”, “read more”, or “button”.
Simply put, WAVE is failing to flag this link because its list of ambiguous phrases is less robust than the list in Accessibility Checker.
For an example of false positives in WAVE, one can look at the same two images above and see WAVE is incorrectly flagging white text as failing color contrast because it’s missing the presence of the background image and dark overlay. Accessibility Checker does not flag these items as color contrast failures because it is able to see the overlay and that the text passes for contrast on the overlay, even if the image fails to load.
Feature Comparison
Here’s a full comparison of Accessibility Checker Free and Paid versions versus the WAVE browser extension and API. This table uses the following symbols to denote features:
- Green checkmark: feature is included.
- Red X: feature is not included.
- Black code symbol: feature is possible if you build it yourself.
There is screen reader text present in addition to the symbols.
Feature | ||||
---|---|---|---|---|
Pricing | $0 | $144+/yr | $0 | $0.16-$0.01/scan |
Pricing model | Free | Per site | Free | Per page, per scan |
Scan posts and pages | included | included | included | included |
Scan custom post types | not included | included | included | included |
Scan password protected sites | not included | included | included | included |
Scan non-WordPress web pages | not included | not included | included | included |
Scan website you don't have edit access to | not included | not included | included | included |
Flesch-Kincaid grade level readability scans | included | included | not included | not included |
Visualize page tab order and heading outline | not included | not included | included | possible if you code it |
Bulk, full-site scanning | not included | included | not included | included |
See scan report on post/page edit screen | included | included | not included | not included |
See scan report on front end of website | included | included | included | possible if you code it |
See summary of full-site accessibility status | not included | included | not included | possible if you code it |
Ignore or dismiss issues from showing in future scans | included | included | not included | possible if you code it |
Create global ignores for full site | not included | included | not included | possible if you code it |
Data stays on your server or in your browser | included | included | included | not included |
Fixes some accessibility problems found on site | included | included | not included | not included |
Export issues to CSV | not included | included | not included | possible if you code it |
Access data via API endpoint | Coming soon | Coming soon | not included | included |
Access data via WP-CLI | included | included | not included | not included |
Graphs and tables to track changes overtime | not included | included | not included | possible if you code it |
Support forum access | included | included | not included | not included |
Personalized email support | not included | included | not included | included |
Zoom office hour support and remediation assistance | not included | included | not included | not included |
Provides draft accessibility statement | included | included | not included | not included |
Auto-inserts accessibility statement in your website's footer | included | included | not included | not included |
Which should you use? WAVE or Accessibility Checker?
The short answer on which automated accessibility testing tool you should use, Accessibility Checker or WAVE, is that you should use both! Both WAVE and Equalize Digital Accessibility Checker are helpful tools in specific situations, and there are use cases where each tool stands out.
Is one better than the other?
The longer answer to which tool you should use is that, if you have a WordPress website, you should be accessibility testing with Accessibility Checker (either free or paid versions).
Of course, we’re biased at Equalized Digital. 🙂 Still, when comparing WAVE to Accessibility Checker, as I did above, we believe Accessibility Checker has a more accurate ruleset with fewer false positives. It provides a more thorough evaluation of elements that cause problems for real people with disabilities.
Accessibility Checker also provides robust documentation and guidance on how to fix problems. And if you have a paid Accessibility Checker plan, you get access to email support and, at some tiers, Zoom call support, which WAVE does not offer.
That’s not to say WAVE is not a helpful tool — it is excellent in many cases — but if you have a WordPress website, you will get the best results accessibility testing with Equalize Digital Accessibility Checker either alone or in addition to testing with WAVE.
When to Use WAVE
As I mentioned at the beginning of this article, at Equalize Digital, we use the WAVE browser extension in addition to our Accessibility Checker plugin. I probably use both tools every day.
These are scenarios when the WAVE browser extension is the best tool for the job:
- During sales conversations, when trying to get a picture of how accessible a website is for quoting purposes but don’t have edit access to the site.
- When evaluating the accessibility of a WordPress plugin, running WAVE on the plugin’s demo site can quickly tell you if there are significant issues that might rule out the plugin before you install it.
- When you want to assess the accessibility of a non-WordPress website.
When to Use Accessibility Checker
For WordPress websites, these are the scenarios with Accessibility Checker is the best tool for the job:
- When you want reports in the editor to help content creators resolve accessibility problems before publishing.
- When you want to run a full-site accessibility scan and get a report of accessibility issues across the entire site.
- When you want to be able to export issues to a CSV.
- When you want to be able to mark false positives or manual testing issues (warnings/alerts) in a way that they will never again show up in future scans.
- When you want to save a history of scan stats to show improvement over time.
- When you want a Flesch-Kincaid grade-level readability score in addition to accessibility issues.
Ready to Try Accessibility Checker?
Want to do your own comparison of Accessibility Checker and WAVE? Ready to start incorporating accessibility testing in your WordPress website? Get started with Accessibility Checker free today.
Hopefully, you found this comparison of Equalize Digital Accessibility Checker helpful. If you have any questions about how to transition from using WAVE to Accessibility Checker or how to use both in your website creation workflow, feel free to reach out to our sales team or tag us with a question on social media.