Way back before the world was turned upside down, I wrote a post about website accessibility. At the end I mentioned that soon I would share some free tools to assist you in testing your own site. Unfortunately, a number of circumstances delayed this post for far too long.
The tools I’m going to focus on have a couple things in common. First of all they are all free to use. If you are interested in how your site stacks up against accessibility rules, and want to take the first step towards ensuring your site is compliant, these are great tools to start with.
Another thing in common between all of them is that they are Chrome extensions, or in one case come built into Chrome’s dev tools. Chrome is my personal default browser, so these are all tools I have used. I like the fact that these are ‘built-in’ to the browser, and you do not have to install a separate application on your computer.
In no particular order, here are 5 testing tools.
Access Assistant
Upon initiation, Access Assistant pops open in a new modal window. There are two different tools you can you can run once inside of Access Assistant.
Quick Test runs an automated test on the page that you have open. It will identify the highest priority accessibility issues that the page has.
The test results are grouped into categories of like issues. The heading of each grouping can be clicked on to see an explanation of the overall issue, as well as a recommendation on how to fix it. Examples shown, which can further help you determine how fix your specific issues.
You can click on each individual issue that has been found, and get an explanation of what is specifically wrong. There is also a toggle feature which will highlight where the issue is on your page.
The second tool available through Access Assistant is Preview Modes. This tool lets you toggle on and off items on a page – images, lists, iframes, heading, etc. Honestly, I have not found a ton of value here.
https://chrome.google.com/webstore/detail/access-assistant/ojiighldhdmahfdnhfdebnpmlbiemdfm?hl=en-US
Siteimprove Accessibility Checker
Siteimprove’s offering is pretty robust. Upon initiation it pops open a tool bar on the left-hand side of your browser. You are given the opportunity to test your page against different defined WCAG conformance levels. You can set the level of severity that you like to see – review, warning, or error. You can also filter the results based on who may need to be involved to fix the issues. For example, if your role is entering and editing content on pages, and that is all you have access to, you would select the editor view.
Issues that have been found on your page are listed in the panel. Again, like issues are grouped. Each of these grouped issue headings can be clicked on to get more detailed information. Here you can see where each individual instance appears on the page. Each of the issue groupings also provides a link to the W3.org site referencing that problem. There you will find more detailed information, and examples.
If you do understand html and css, this tool does work very well with Chrome’s dev tools. With dev tools open, clicking on an issue will highlight the code that should be addressed in the dev tools window.
Overall I find this to be one of the better tools. I think it is very easy to use, and the feedback it provides is clear. I also really like how you adjust the level of conformity that you want to test against.
WAVE: Website Accessibility Evaluation Tool
Another browser extension for testing is WAVE (this is available for Firefox as well). Similar to Siteimprove, it will pop open a sidebar next to your page that lists errors, warnings, and accessibility features found on your page. Results are broken into 6 categories. Errors and alerts refer to issues on the page, with errors being the more severe. Additionally, items on the page that do not meet color contrast recommendations are called out separately. Aria items are noted, these are items on screen with specific code that addresses screen readers. Finally structural and page features are noted.
A really nice feature is that it overlays your page with icons showing you where the errors exist.
You can navigate the results in a couple different ways. First off, you can click on the individual icons on the screen. These will pop up a description of what the issue is, as well as links to reference material about the issue, and a view of the code for that item.
If you prefer to walk through all warnings or errors together, you can go to the details screen. Here all like issues are grouped to together. You can click on icons to view where they are onscreen, along with details and recommendations.
The reference information that this tool provides for issues is very detailed. You are provided information about what the issue may be, why it matters, and how to fix it. Links are also provided to more information at webaim.org.
Another really nice feature of this tool is the color contrast portion. Not only does the tool call out where there might be contrast issues, but it provides a tool for adjusting the colors. This lets you make modifications on screen until your colors pass.
I think this is a really useful tool. The detailed reference information, and the color contrast tool make it worth checking out.
https://wave.webaim.org/extension/
The next two tools are probably a little more developer focused, as you access them through Chrome’s web developer tools. At the very minimum, you will need to know how to open these tools.
Axe
When you run the report on your page, like the other tools, you get a list of all issues. From there you can filter items based on severity.
As with the other tools, similar issues are grouped. You can click through each individual item via the navigation in the tool. For each you will see the class or id of the element as well as it’s source code. You will also be provided with information on how to solve the issue. There is a link that will jump you to the code in the element inspector. Lastly, you have the opportunity to learn more about that type of issue via offsite links to dequeuniversity.com.
A final feature, that I have not used, is the ability to save off the report that has been run. However, to use this feature you must have an account set up with deque.
Chrome Developers Tools – Lighthouse
Chrome’s offering, which is built into their web developer tools, is Lighthouse. Lighthouse can review your site for issues related to Accessibility, Best Practices, Performance, and SEO. For the purposes of this discussion, we are only looking at Accessibility.
Before running the tool you can select some criteria to tailor your report. Choose between the types of issues you are concerned about, as well as the type of device you want to test against: mobile or desktop.
Results are presented in and easy to read format. Initially you are presented with a score out of 100. Each individual issue can be expanded for more information. You can also click on the element to view its code in the element inspector. A link is also provided to learn more information about that type of issue, and how you may fix it, at web.dev.
I really like the simplicity of this tool, and the information that it returns. But it seems there may be a catch…
Once it came time to write this post, I ran each of the tools discussed on the exact same web page. Each of the other tools returned many of the same issues. However, Google’s Lighthouse gave the page a 100 Accessibility rating. This raises some real concerns, and really leads me to a last bit of advice.
These tools are great for getting a general idea of where you may have issues, but they are not a true accessibility audit of your site. If this is as far as you plan on going with testing for accessibility, I certainly recommend testing your site with more than on tool.
If this seems like too big of an undertaking, or you just are not sure where to start – we would love to help.