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.
- Mozilla Accessibility Docs
- W3C WCAG Guidelines
- Smashing Magazine - Accessibility
- CSS Tricks - Accessibility
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
Top comments (11)
A Journey to Accessibility: How Atoall.com Transformed Lives and Can Transform Your Website
It was a typical evening in the life of Priya Sharma, a dedicated college student with a dream to change the world. But tonight, something was different. As she sat in her room, struggling to type out a web address on her keyboard, the frustration was overwhelming. For Priya, who had been living with a physical disability since birth, even the simplest tasks like browsing the internet felt like insurmountable challenges.
The world of knowledge, opportunities, and connections that the internet offered seemed out of reach. She had tried everything—voice commands, special keyboards—but nothing seemed to work efficiently. The barriers were always there, reminding her of the limits imposed by her condition.
But that night, everything changed.
*The Turning Point:
*
Priya’s life took a turn when she discovered Atoall.com, a tool that promised to revolutionize the way people with disabilities and language barriers accessed the web. Skeptical but desperate, she decided to give it a try. The concept was simple: by pressing any three keys twice, such as “ppooii.com,” she could instantly access any website.
Her fingers trembled as she typed the random keys. And then, as if by magic, the website she needed appeared on her screen. No struggle, no frustration—just seamless access. Tears welled up in her eyes. For the first time, Priya felt the internet was truly accessible to her. The world had opened up in ways she never thought possible.
*Why Atoall.com is a Game-Changer:
*
Atoall.com isn’t just a tool; it’s a beacon of hope for millions like Priya. In a world where accessibility is not just a moral obligation but a legal requirement, Atoall.com ensures that no one is left behind.
Enhance User Accessibility: Atoall.com allows users to access websites with ease, ensuring a smooth and satisfying user experience, regardless of physical abilities or language proficiency.
Promote Social Justice: By making your website accessible to people with disabilities and those who speak indigenous or mother languages, you are taking a stand against discrimination and promoting equality.
Expand Your Reach: Imagine the potential of reaching over 3 billion people who struggle with typing website names due to language or physical limitations. Atoall.com opens up your website to this vast audience.
Ensure Legal Compliance: Ignoring accessibility can result in significant fines, akin to neglecting seatbelt laws. Atoall.com ensures that your website complies with accessibility standards and laws.
*Proven Success and Government Endorsement:
*
Atoall.com has been tested and approved by the Indian government, already in use by various government and educational websites. The Ministry of Electronics and Information Technology (MeitY), Govt. of India, highlights this tool in its Validators / Localization Tools, proving its significance and reliability.
*Simple Implementation:
*
Integrating Atoall.com into your website is effortless. Copy the provided code snippet, insert it into your site’s body tag, upload it to your server, and let the magic happen. Users only need to type any three keys twice to access your site.
*The Power of Accessibility:
*
The story of Priya is just one of many. Atoall.com is not just a tool; it’s a lifeline for those who have been excluded from the digital world for far too long. By integrating Atoall.com, you are not just improving your website—you are changing lives.
*Invest in Accessibility, Invest in Growth:
*
For a small investment of $300 USD per year, you can make your website accessible to millions. Or, choose the 5-year plan for $1500 USD and ensure long-term accessibility. For websites with high traffic, $3000 USD covers 1 million page views.
Imagine the impact you can have. Imagine the lives you can touch.
*Join the Movement:
*
Atoall.com is more than just a web accessibility tool—it’s a movement toward a more inclusive, accessible, and just digital world. Don’t just build a website; build a platform where everyone, regardless of their abilities or language, feels welcome.
Embrace Atoall.com today and take the first step toward transforming your website into a gateway for millions of users worldwide.
*Pricing and Payment Details:
*
1 Year / Website: $300 USD
5 Years / Website: $1500 USD
1 Million Page Views: $3000 USD
*Payment Information:
*
Bank: HDFC
Company: Web Accessibility Tool
Account No: 50200049357701
Branch: Guru Kashi Marg, BATHINDA, Punjab (India)
IFSC Code: HDFC0000187
SWIFT CODE: HDFCINBBDEL
Take action today—make your website accessible with Atoall.com, and watch as your reach and impact grow exponentially.
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.
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.
Thanks for aggregating these resources and tools!
Thanks Abhi! Glad you found it useful.
Cool tools! Thank you.
Thanks Mohammad!
Very useful. Thank you very much.
I will try to add a11y-tests now to my CI pipeline. Never thought about that before.
These are great recommendations! I would also recommend ANDI. ANDI is a bookmarklet accessibility testing tool.
Thanks 😊
super cool :)