DEV Community

loading...

The best web accessibility tools for developers in 2021

Jake Tracey
Accessibility, user experience and virtual reality.
・4 min read

The quality of the tools you use defines the speed with which you can diagnose and resolve problems.

Each year the landscape changes dramatically in web technologies, and of late the tooling for accessibility is no exception.

I’ve divided this article into 4 categories - resources, development tools, continuous integration and screen readers.

Resources

These are the pages that I keep bookmarked for reference and to learn new techniques.

There are a number of great accessibility blogs on the web which I suggest browsing - a good jumping off point is available at Digital A11y.

Development tools

  • axe - axe has quickly become the defacto standard for automated accessibility testing. Deque's axe-core testing engine provides the under the hood implementation for most common tools, and they also provide a free Chrome extension that quickly identifies any in page errors for most common issues while providing guidance on how to resolve them. Definitely my first port of call when testing any new code.

  • pa11y - pa11y is an automated testing tool based on axe-core that can be run on your development environment as part of your commit hooks or front-end build pipeline. It's extremely configurable so you can run automated tests for different accessibility standards and viewports, ignoring specific WCAG rule sets as well as triggering actions on pages as a part of your test suite. @f3igao's wonderful blog post, How to automate web accessibility testing is a great starting off point if you are looking to fully integrate pa11y with your front-end build.

  • DomainAccessibilityAudit - I found this tool while researching ways to test an entire website for a11y issues and this was a perfect fit. You can feed it a root URL to start testing on and it will scrape all links on all subsequent pages and perform an audit, essentially crawling the entire site and producing a report of a11y issues. You can also input a sitemap.xml if you want to test a specific set of pages instead of crawling the entire site.

  • Accessibility insights for web - Microsoft's commitment to accessible technologies shines with their free Chrome extension and provides another useful interface to the axe-core framework.

  • Siteimprove Accessibility Checker - The Siteimprove browser extension provides one of the most comprehensive interfaces to resolving issues with detailed recommendations on how to fix them. Highly recommended to keep in your toolbox.

  • Lighthouse - Don't have time or access to install software to run a quick a11y check? Lighthouse comes built in with Chrome DevTools and provides a fast, easy to understand issue checker that integrates perfectly with the Chrome browser. It also offers other suggestions in terms of improving page performance, server configuration and insights into using progressive web applications.

Continuous integration

Catching issues before they are in production is one of the major benefits of adding accessibility tooling to your CI pipeline. Recently there has been huge progress in the ease of integration and reporting in this space, which I expect will continue to improve over the next year.

  • pa11y-ci - A set of command line tools for pa11y, pa11y-ci gives you the opportunity to run your suite of pa11y tests on your CI server.

  • lighthouse-ci - If you're looking to run a comprehensive set of tests in your CI environment, lighthouse-ci brings all the power of Google's Lighthouse app to the table. In addition to accessibility checks, lighthouse-ci will report on your app's performance, SEO and best practices in one of the most polished standalone reports available.

Screen readers

  • JAWS - JAWS is the most popular and oldest screen reader that is still in use. It represents a huge proportion of screen reader users so it is an essential tool when testing for issues.

  • NVDA - NVDA is my screen reader of choice for testing because it's open source and free. It's also updated quite frequently and in my experience, has less quirks than JAWS. I expect in the coming years NVDA will overtake JAWS in terms of popularity, so if you were to pick one to learn, NVDA would be it.

  • VoiceOver - VoiceOver is the defacto standard for screen readers on iOS and Mac OS X. It is extremely easy to use and the documentation is incredible. The vast majority of screen reader users on mobile are using VoiceOver so it is the most important tool you can use if a mobile audience is your primary demographic.

  • TalkBack - TalkBack is the Android OS screen reader. Similarly to VoiceOver, when developing for the mobile web, it is essential to test using TalkBack. Unfortunately, the OS version fragmentation on Android devices varies wildly, so it may be best in your particular scenario to test using a couple of versions older than the latest Android OS when conducting audits using TalkBack.

I hope you find this list helpful - each year I will add an additional update with any new tools I have discovered, and provide any comments on how the landscape is progressing.

Originally published at jaketracey.com

Discussion (10)

Collapse
accessibilityto profile image
Web accessibility tool • Edited

You should use new web wcbessibility tool of atoall.com/ for more growth.

No one can understand this without accessibility testing: -

Open WebAccessibilityTool.com website because this website is using this tool.

See the icon A.

Https://WebAccessibilityTool.com is a big website, if it has been fully opened, then open a new tab.

Press in the new tab ppooii.com or llkkjj.com. This is a unique tool.

You will see WebAccessibilityTool.com again and surprised because of this accessibility testing.

This easy to use the option you can use for your website also. Get this code from Atoall.com and paste it on your website then it will work.

The biggest Government and Educational websites are using this.

Collapse
rapidowl profile image
Sam Strong

Thanks for this!

I wasn't aware of Axe, but I've had a lot of good results from WAVE (wave.webaim.org/) and ARC (paciellogroup.com/toolkit/). Between them, they pick some stuff that Axe doesn't.

Collapse
abhiondemand profile image
Abhi

Thanks for aggregating these resources and tools!

Collapse
jaketracey profile image
Jake Tracey Author

Thanks Abhi! Glad you found it useful.

Collapse
mdhesari profile image
Mohammad Fazel

Cool tools! Thank you.

Collapse
jaketracey profile image
Jake Tracey Author

Thanks Mohammad!

Collapse
mohammedshazad profile image
ShazadBasha

super cool :)

Collapse
l33tingl4dy profile image
Amanda Harris

These are great recommendations! I would also recommend ANDI. ANDI is a bookmarklet accessibility testing tool.

Collapse
azmadik profile image
Kevin Stephen Hupfer

Thanks 😊

Collapse
stritti profile image
Stephan Strittmatter

Very useful. Thank you very much.
I will try to add a11y-tests now to my CI pipeline. Never thought about that before.