Free accessibility tools that we love
Investing in accessibility is important, but it doesn’t have to be expensive. Starting with free tools can go a long way to build habits and improve processes.
Here is a list of our favourite free accessibility tools, along with who on your team would benefit from them most.
Quick links
Colour contrast
Good colour contrast is key for users with low vision or colorblindness, who have difficulty seeing content that doesn’t contrast with its background. We apply contrast rules to text and graphical content like form elements and icons.
WebAIM’s colour contrast checker
Most colour contrast checkers do basically the same thing, so it’s just a question of which interface you like best. We go with WebAIM’s colour contrast checker for its simplicity: contrast ratio clearly posted and WCAG compliance based on element type.
Why we like it:
Our favourite feature is the colour picker and slider, which allows you to observe how adjustments to the original colour impacts the contrast ratio. This is really useful when looking to suggest a more accessible colour while remaining as close as possible to the original palette.
The permalink can also be useful for sharing across teams.
Finally, because this tool is by WebAIM, we can also trust that it’s accessible to use.
Perfect for:
Product managers and owners; UX designers; Business Analysts; Testers.
Whole-page scanners
Often the tool that people think of when they say, “An automated accessibility checker”. These tools scan the current page against a set of accessibility test cases. Scanners are usually extensions to download into your browser, and most are available on multiple browsers.
axe DevTools
Why we like it:
The extremely clean interface of this scanner makes it easy to use and understand. Selecting “Full page scan”, the issues are grouped in tidy accordions. Inside the accordion, the problem element can be identified by a code snippet or with a “highlight” button that visually highlights the element on the page. It also notes the severity impact of the issue, the relevant WCAG criteria, and a link to read more. All of which is presented in a streamlined aesthetic to maximize readability and minimize information overload.
There is also a section on how to resolve the issue, although we find it tends to be a bit vague and jargon-y.
axe DevTools is powered by axe-core, a set of accessibility test cases that backs a lot of other accessibility scanners, including paid ones. axe-core is liked because it is conservative - as in, it won’t throw any false or opinionated errors.
Perfect for:
Developers; Testers.
This scanner provides more information and customizable options without being overwhelming. We like that we can filter issues by topic like images, errors or colour - this is consistent with how sites are designed, built and remediated, and aligns with our philosophy of providing audit results that are practical and useful. Findings are also grouped by message into neat accordions, that when expanded explain the issue, the relevant WCAG criteria, and how to find it on the page. The element is automatically visually highlighted when the accordion is expanded.
Error, alert and best practice tagging allow us to use our expertise to sift through real accessibility issues versus noise. In this way, ARC is likely to raise more issues than axe, and relies on a bit more expertise to interpret.
Perfect for:
Developers; Testers.
Other page scanners include Lighthouse on Chrome, Wave and IBM Equal Access Toolkit. Like the contrast checker, it often comes down to your interface preferences. All the scanners check against WCAG but might differ in their specific test cases.
Since they’re all free, it can be worth playing with each of them to see what works best to you and your team. That being said, we would recommend picking only one or two scanners - beyond that, it can start to feel overwhelming while not actually providing much new information.
Specific-use tools
These tools specialize in one or many functions that help inspect and assess accessibility. This category is probably endless, but to cut through the noise we’ve listed only our favourites here.
Web Developer Extension
This creatively named extension is simple yet powerful. There are lots of things you can do with it and you can sit for hours playing with all the features. The main thing it tends to do is highlight different types of elements and their attributes. This can be particularly useful during testing, like efficiently highlighting all the alt texts on a page, or during code review to make sure things have been marked up accurately.
Why we love it:
There’s so much you can do with this! Our top favourite feature is the Document Outline, nested under “Information”. This pulls up a hierarchy of the page. It’s a fantastic visualisation of a page’s heading structure.
Options like “Display Table Information”, “Display ARIA roles”, and resizing helps us easily highlight page elements that we want to inspect further.
Perfect for:
Content writers; Business analysts; Developers; Testers.
Accessibility Insights for Web
Available only on Chrome and Edge, this extension actually has a few different tools built into it, including a page scanner. However, our favourite use for it is the Ad hoc tools.
Why we love it:
The Tab Stops feature is perfect to visually map each keyboard tab stop. Each tab stop is numbered, with a line drawn between the stops to track the tab order. A great tool to demonstrate the keyboard experience to others.
Perfect for:
Product owners and managers who want to understand the keyboard user experience; UX designers and Business analysts to demonstrate current state; Testers.
Bookmarklets
These nifty pieces of code are saved to your browser like a bookmark (hence the name). When you click on them, they inject a piece of JavaScript onto the page, usually to highlight elements or attributes.
There are tons of bookmarklets out there, like this series created by Paul J. Adams. Many of the bookmarklet functionalities can be achieved through other tools like the Web Developer Extension, so it’s a matter of preference on how to go about achieving the same thing.
Our favourite bookmarklet is the text spacing bookmarklet.
Why we love it:
WCAG’s 1.4.12 Text Spacing requires that a page’s text can be modified to help users with reading disabilities like dyslexia. WCAG is quite precise about the necessary line, paragraph, word and letter spacing that it’s impossible to manually make these modifications for every accessibility test.
With one click, this bookmarklet applies the exact WCAG specifications for this criteria. It can also be combined with zooming to test text spacing alongside 1.4.10 Reflow and SC 1.4.4 Resize Text.
To reset the text spacing, simply click the bookmarklet again or refresh the page.
Perfect for:
Product owners and managers to understand this user experience; UX Designers; Developers; Testers.
Figma annotations
67% of accessibility issues can be caught during the design phase. Design annotations are key to the shift left approach of getting accessibility into the product development lifecycle early.
A11y Annotation Kit
Created by Indeed, this toolkit follows our preference for simplicity and clarity.
Why we love it:
It covers all the major annotations that are important from a designer: headings, labels, focus order, links and buttons. The labels use words rather than symbols, lowering cognitive load. There are tags for ARIA landmarks but otherwise we find the annotations aren’t too code-specific, which can intimidate some designers.
Perfect for:
UX Designers.
Conclusion
We hope this guide will be useful for you and your organisation when implementing accessibility. Our years of experience in auditing, training and consulting has led us to a wonderful mixed bag of tools that is applicable to a variety of situations.
No matter what stage in your accessibility journey, free tools will always play an important role in efficiently realizing and maintaining your accessibility goals.
Find out more about Aleph Accessibility's auditing, training and consulting services. Or get in touch to start or accelerate your accessibility journey.