A common accessibility question that we frequently get is “Is my site WCAG compliant?” This is a question that can only be answered through accessibility testing. Fortunately, there are a number of excellent accessibility testing tools that are completely free to use. Or there are at least free aspects of the tools that are still of significant value. So, the “is my site WCAG compliant” question is something you can at least partially answer yourself.
These tools can test your website against several key WCAG criteria. But there is an important caveat to any accessibility testing tools. Any automated testing tool will only cover 40-50% of the issues that make up the Web Content Accessibility Guidelines. The other 50-60% can only be accurately assessed through a comprehensive, manual testing process. Nevertheless, the tools we cover below are fantastic resources that will help you make significant strides on your path to WCAG compliance.
The tools below are divided into two sections – Accessibility testing websites, and browser extensions and dev tools. The websites are sites that you can visit and there is a field where you can plug in the url that you’d like to test. It will then generate a report for you while you remain on that site. Browser extensions and dev tools, on the other, work by installing the extension on your browser. And then when you visit the web page that you’d like to test, you just simply activate the extension or open up dev tools in your browser to get your results.
Accessibility Testing Websites
WebAIM WAVE Web Accessibility Evaluation Tool
The WAVE tool is always at the top of our tools list, and for good reason. It’s completely free, easy to use, and educates as well as informs. There are two ways to use the WAVE tool. The first option is to go to the WebAIM site and enter the URL of the page you’d like to test. (Note that we say page and not site because this is a single page test. So if you want to test an interior page of a website, be sure to enter the URL of that specific page.)
The other option is a browser extension. WAVE has browser extensions for Chrome, Firefox and Edge browsers. If you are using the browser extension, you only need to click the extension icon at the top of your browser and the WAVE tool will immediately scan the page that you’re currently viewing.
The WAVE tool will display the page you’ve requested with several different icons next to the various elements of that page. On the left side of the page is a panel that lists all of the issues that it found on that page.
You can find more information on each issue by clicking an icon on the page itself. Or you can click on the Details tab on the left panel where errors and alerts are grouped by issue. You can also click the “Code” link to see exactly where the issue is present.
Do take note that this tool is not infallible. There are frequently false positives in any scan. But this is not the fault of the tool but more a result of confusing code. Using the example above, WAVE identifies 26 contrast issues on the home page. While there are indeed some actual contrast issues on the page, most of the 26 are not. This frequently occurs whenever there is text on top of an image. The scanner can’t see the the color of the image itself. It only sees the background color of the page. In the screenshot above, it indicates a contrast issue with the white text sitting on top of a dark image. The actual contrast is fine, but the background of the page itself is white. So the tool is only able to see white text on a white background.
So don’t take all results as gospel. A manual review of any automated test result is always essential.
Pros
- Completely free
- Do not need to provide contact information to perform test
- Issues clearly identified inline on page
- Detail provided to explain the issue, why it’s a problem, and how to fix it
- Code view highlights the exact place in the code where the issue is present
- Two testing options – on the WAVE site or with a browser extension
Cons
- False positives require manual review
- The sheer volume of icons can be somewhat overwhelming on the page
- Not always obvious where an issue is present when using the icons on the left panel
AChecker Web Accessibility Checker
While it has an old school look and feel, AChecker offers a useful, free scan of your webpage. The single-page scan returns a report that displays a count of all of the “problems” on the page. It shows both the code and the visual element in question so you can more easily identify the issue.
If there are several instances of the same problem, the report groups them together. This allows you to more easily tackle one issue at a time. It displays the line of code where the issue is present. And if there is a visual component to the issue (such as an image needing alt text), it will display that along with the code.
For those unfamiliar with HTML and source code, the AChecker report may seem confusing and overwhelming. But if you are comfortable with a code view, or even prefer it, then AChecker is a good option for you.
Pros
- Free to use
- No contact information required
- Groups issues of the same type together for easier remediation
- Separates “known problems” and “potential problems” to help prioritize issues
Cons
- Lack of inline view may be a challenge for some users
- Code-focused report will be daunting for unfamiliar users
Accessible Metrics
When you visit the Accessible Metrics homepage, the first thing you see is a field to enter a URL to test. However, after you enter your URL you will be taken to a page to create an account. It is free to create an account, but this step alone will likely deter some people. If you choose to go through with the account creation process, the site will perform an immediate test of the URL you provided on the first screen.
The report format is slick and modern, with a clear breakdown of issues by type. The Accessible Metrics report groups problems by issue. Most other accessibility testing tools will provide a total count of all instances of an issue when providing a total count of accessibility issues on a page. If you have 10 images that don’t have alt text, most tools will indicate that there are 10 issues. Accessible Metrics, provides a count of issue types. So, ten instances of missing alt text is only counted as one issue. This can be a good or bad thing, depending on your perspective.
When you click the “View Occurrences” button, the report presents you with the line(s) of code where the specific issue occurs. There is not a front-end view of the issue, so a little analysis will be necessary to determine where on the page the problem exists. For anyone unfamiliar with code, this could be a non-starter.
One excellent feature in the Accessible Metrics report is a list of broken links. Many other tools do not provide this detail, and it is something that impacts both accessibility and SEO. So a big point to them for including that.
Pros
- Clean, modern interface
- Broken links list included
- Explanation of the issue and how to address it
Cons
- Must create an account to get report
- Code-only report will be challenging for some users
- Free version only allows scan of home page
Accessibility Checker
Like many accessibility testing tools, Accessibility Checker provides a code-only report. However, there are some unique aspects to this tool that make it worth including in this list. First, no contact information is required which is always a plus. You simply enter the url of the page you’d like it to scan and it goes to work. Though, be aware that you are limited to two scans per day if you are only using the free version.
Accessibility Checker’s report view is where it really shines. You see an overall accessibility score for your page, followed by a list of the specific issues. What is particularly nice about AC’s layout is that it describes the issue, along with the disabilities affected, and the specific regulation that requires the fix.
When you click one of the issues, the report expands to provide you with the specific line of code where the issue was present, along with a description of why this is a problem, who’s affected by it and why. Among accessibility testing tools, this is probably the most educational of them all.
One complaint we do have is that they prominently recommend two accessibility widget companies in their reports. We would advise against accessibility widgets as a long-term solution. Instead, you should use the valuable information provided in this accessibility testing report to fix the accessibility issues on your website. Not cover them up.
Pros
- No contact information required
- Offers audit score
- Report lists disabilities affected by certain issues
- Descriptions explain why an issue is a problem for certain users
- Most educational of all the tools listed here
Cons
- Recommendation of accessibility widgets in report runs counter to their focus on accessibility education and making sites accessible to all.
Browser extensions and dev tools
From an ease of use standpoint, browser extensions fare far better than stand-alone websites when it comes to accessibility testing. Since they’re integrated directly into your browser, an extension can highlight issues directly on your webpage. This makes it significantly easier to identify where an issue exists rather than having to parse code. Without further ado, here are some of our favorite browser extensions for accessibility testing.
WAVE
The WAVE tool is, by far, our favorite website-based testing tool. As we noted in our description of the tool above, WAVE also has a browser extension for Chrome, Firefox and Edge. The WAVE extension delivers the exact same report as the website-based tool, but it just makes it simpler. Instead of having to go to a website to enter a url to test, you only need to activate the browser extension to test whatever webpage you are on. The page will then reload with the testing view turned on. Once you have the WAVE browser extension installed, you will quickly forget about the WAVE website and rely on the extension for your testing needs.
Web Accessibility extension from Accessible Web
Once you’ve installed the Web Accessibility extension, visit any page that you’d like to test and click the extension icon to turn it on. A popup will prompt you to scan the page. Simply click the “Scan Page” button and it will open a new page that contains the full list of issues. Alternatively, you can access the same report by using Developer Tools in your browser and navigating to the Accessible Web tab in dev tools.
The scan results page is organized by WCAG issue and multiple instances of an issue are grouped together. For the layperson, such a report is of limited utility. However, anyone working on the remediation side will appreciate this organization.
One thing that we particularly appreciate about this tool is an option to check boxes to visually see where an issue exists on the page. You can check a single instance of an issue, or all instances of an issue, or even all of the issues that are found on the page.
When you check a box, you can return to the webpage to see the issue highlighted on the page itself. This addresses one of the biggest complaints we have about most testing tools, and code-only reports.
If you would like to get full site scans, remediation instructions or the ability to export reports to a CSV, you’ll need to purchase one of their paid plans. But even the free version is well worth checking out.
Pros
- Overall accessibility score can be useful as you get the remediation process underway
- Grouping of issues provides a well-organized breakdown of accessibility concerns
- Ability to highlight an individual issue or issue-type is a clean way to display issues on the webpage without overwhelming the user.
Cons
- Results on a separate page requiring users to bounce between results page and website may confuse some users (the dev tools option resolves that issue)
- Several important features (remediation instructions, export capabilities, site-level scan available only to paid users. Free users may be frustrated by limited information
How to access Developer Tools in your browser
A number of these accessibility testing tools function through the Developer Tools panel in your browser. You can access Developer Tools in a few different ways. The easiest is to use a keyboard shortcut by pressing CTRL + Shift + I.
This will open the dev tools panel and you will see tabs across the top of the panel. One of which should be your accessibility testing tool.
axe DevTools
Deque is an industry leader in the accessibility testing and compliance arena. They offer an extensive suite of testing and remediation services and are well worth exploring for any company that needs comprehensive auditing and remediation. But for those who are currently dipping their toe in the accessibility waters and wanting to see what compliance issues they can address on their own, the axe DevTools browser extension offers some useful features.
Once you add the axe DevTools extension to your browser, open your browser’s Developer Tools. Toward the end of the list of tabs, you should see “axe DevTools.” Click on that and you will find a split screen view. Because Deque primarily offers paid services, the free portion of axe DevTools can be a bit hard to find at first. On the left hand side of the split screen, scroll down to find the “full-page scan.” Click to scan your web page and you will see results almost immediately.
Like some of the other tools, the scanner groups accessibility issues of the same type together. You can click the Highlight button below each issue to visually identify it on the page above. On the left hand side, it calls out the total issues, along with the ones that are “critical” and those that are “serious.”
Axe DevTools is a useful extension for anyone who wants to get a quick snapshot of their WCAG-compliance status on any given page. And while you could use it as a way to address issues on a page-by-page basis, you may want to take a deeper look into Deque’s paid offerings to save yourself some time in the long-run.
Pros
- Ability to highlight issues clearly identifies issues on the page
- Full-page scan is almost instantaneous
- Number of total issues called out and separated by critical, serious, moderate, or minor
- No contact info or payment required to use the extension
Cons
- Free full-page scan option is somewhat buried. Paid options get top billing
- Scan results are limited for free users
Lighthouse
If you have already explored Developer Tools, you may have already noticed the “Lighthouse” tab. Lighthouse is a tool by Google that can scan a web page’s accessibility, along with performance, SEO, Progressive Web App, and best practices. We’d be remiss if we didn’t include Lighthouse in our list because it’s already built into Chrome and Chromium browsers (Edge, Brave, Opera, and the new Arc browser to name a few).
Lighthouse does a serviceable job of identifying accessibility issues, but we’ve found that it is not as thorough as some of the other tools we’ve mentioned above. And aside from the fact that it is already loaded on to your browser, there isn’t anything that makes it stand out from an accessibility testing standpoint.
Pros
- Included in all Chromium browsers
- Offers a total accessibility score
- Includes visual identification of issues
Cons
- Scans seem to capture fewer issues than other tools
- Reports are lacking in comparison to other free tools
Summary
Businesses must comply with the ADA and, by extension, business websites must meet WCAG AA criteria. So it’s essential that accessibility is at the top of any website manager’s mind. The tools mentioned above are all great resources for anyone who wants to start chipping away at accessibility issues on their website. Or just to get a better understanding of what accessibility looks like. Ultimately, you’ll need to perform a comprehensive accessibility audit along with the necessary remediation work. But all of these tools will give you a nice head start on that work. Feel free to contact us should you have any questions about the tools mentioned above, or accessibility in general.
