Here are some of the some of the tools that we use at Gibe.
Lighthouse
Lighthouse is made by Google and is built into Chrome in the "audits" tab. It is powered by axe accessibility engine, which is open source.
It provides an overall score based on criteria such as "Contrast", "Names and Labels" and "Best Practices".
Here is a report of the homepage of gibe.digital, which reveals there are some improvements that we need to make. I will add these to the top of our backlog.
It also provides a useful list of manual tests that should be run that automated tools cannot test for.
Tests done by the Government accessibility team reveal that this tool only picks up roughly 17% of accessibility issues. However, it is still a super useful tool built into the browser for checking common accessibility issues.
WAVE Web Accessibility Evaluation Tool
WAVE Web Accessibility Evaluation Tool is a browser extension, which tests the current page you are on. Once installed you simply go to the page that you want to test and click on the WAVE button.
The great thing about WAVE is that because it overlays the page it means that you can click on the errors and it takes you to the position in the page where the issue was found. It also provides an explanation of why the issue matters and how you might go about resolving it.
axe
AXE is another browser extension, which when installed appears in developers tools. Again like WAVE, because it's in browser this means that you can "Inspect" the issues easily. It also provides a description on how you solve any violations.
Below is a screenshot of the homepage after an axe report has been run.
In my experience AXE usually finds similar issues as WAVE does, however, there can be differences between them, so I tend to check in both. It also has a paid offering and an API, which could be used as part of a build process.
Accessibility Reporter
Accessibility Reporter I must confess is made by me, because I wanted to find out what you can actually automate in accessibility testing. I also couldn't find any tools that provided a free way of testing your whole website, rather like an SEO crawler would do, rather than just testing one page.
The tool crawls an entire website and runs a number of tests on each page. It updates the user in realtime using web sockets and provides a report of all the issues found and the number of violations for each Web Content Accessibility Guidelines (WCAG) 2.1 level. The use case for this type of tool is for when you want to do an audit a whole website accessibility audit like you would do an SEO audit.
Here is an example report.
It is very much a work in progress and I will concentrate on improving the quality and number of tests.
Manual Testing
There are a number of areas that cannot be tested by automated tools, so it is critical that you use both automated and manual testing. In a government blog article they created a test page with 143 accessibility issues on it and the best tool only discovered 37% of the issues.
Areas which cannot be tested using automated tools include the following:
- Keyboard accessibility
- Focus states
- Forms not marked up correctly
- Images have meaningful alt text
- Using screen readers
There is a handy checklist on the US governments accessibility website, which is far more compreshensive list and great source for testers to use.
Conclusion
There is absolutely no excuse to not to test the accessibility of your web pages with the number of free and easy to use tools available. Every time I do a code review I always run the pages involved quickly through a couple of accessibility testing tools, which is super quick and easy to do. Don't forget that manual accessibility testing is just as important, as some areas can't be tested using automated tools alone.
Further Reading
- Government guide to testing for accessibility
- US Government accessibility checklist
