7 must-have accessibility tools every website DIYer needs

What a catchy title, right? Hopefully, I managed to finally master the art of clickbaiting. Since you're already here, why not read what follows!

So, here's the story. When we first started working on our standards for Web accessibility at McGill University, the first question we were asked was: "Well... OK, thanks for the info bro. But dude, is there any way accessibility (a11y) can be easier?" (paraphrasing)

And the answer is, yes.

I could have stopped there, but I figured that this answer, even though it is a pretty good one, was not clear enough. So here are some tools to help you improve your website's a11y score.

[Cue inspiring quote and real content]

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." Tim Berners-Lee, W3C Director and inventor of the World Wide Web

1. WAVE (Web Accessibility Evaluation Tool)

WAVE is a free extension developed by the WebAIM group at Utah State University and it's available on Chrome and Firefox.

To run an audit, simply click on the WAVE icon at the right of your browser address bar or press Control + Shift + U (Command + Shift + U on Mac).

Using the "Details" tab, you can see where you have:

  • Empty heading
  • Low contrast
  • Missing alternative text
  • Empty links
  • etc.

And what's cool about WAVE is that it can check any webpage. For that, I give a note of 15/16.

2. VoiceOver

The industry‑leading screen reader. If you want to test your site diligently, this is a must-have tool. Be aware: steep learning curve ahead. 4.7/5.2

Unfortunately, it's only available on Apple products (iPhone, iPad, Mac, Apple Watch, Apple TV, HomePod, iPod touch). NVDA is a good and free Windows alternative if you don't have a JAWS license. Android Accessibility Suite is what you will need to install for an Android device.

3. Koa11y

Sue me, I love koalas. When I grow up, I am going to be a koala.

This desktop app allows you to automatically detect accessibility issues on a web page and generate a report. Both a simple and cute tool. Perfect score.

(If you don't care about koalas and cuteness, note that this tool is based on Pa11y which offers a command line test runner)

4. Web Developer Toolbar

The name pretty much describes it: The extension adds a toolbar to the browser with various web developer tools.

Using this extension, you can, in a few clicks, disable CSS styles, clear form fields, disable cookies, resize your window, view responsive layouts, and more. Score: 87.34%.

5. a11y.css

Pronounced "Alix", this tool is probably more useful for web developers. It's a CSS file intended to warn developers about possible risks and mistakes that exist in HTML code. I think code geeks will love this one. 11/14.

6. tota11y

Pronounced "totally", this JavaScript file was first created to improve the accessibility of Khan Academy. The script inserts a small button at the bottom of a page that, when clicked, annotates errors on a page. If you have access to the source code, you will love this one. 8/11.

7. Tanaguru Engine

Tanaguru Engine is an open-source website assessment tool. I have to say that this one is also meant for developers, but I recommend you try it if you feel comfortable managing command lines.

More details, Tanaguru Engine is a Java web app that will require you to run a MySQL/Tomcat server with Geckodriver and W3c validator. Plenty of fun lines of code to copy and paste. If you didn't understand a word of this, I recommend Koa11y instead.

In fewer details, this is the Rolls-Royce of open-source accessibility tools (except that it's free and it's not a car). The only problem with this tool is that it follows the RGAA3 (Référentiel général d’amélioration de l’accessibilité 🥖🇫🇷). It's not bad, but it's not exactly the same as the SGQRI 008 2.0 (🇲🇶) standard we need to follow. 7 out of 9 stars.

If you still don't know where to start

It's fine. Web accessibility is pretty complex. Follow the Easy Checks – A First Review of Web Accessibility or the A11Y Project Checklist to start evaluating your site and learn more about a11y.

If you need more tools because you love tools

I recommend you read this Web Accessibility Evaluation Tools List and this Accessibility resources list.

If you need more documentation

I have plenty of that.

Back to top