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 平特五不中, 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鈥憀eading 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鈥檃m茅lioration de l鈥檃ccessibilit茅 馃馃嚝馃嚪). 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 or the to start evaluating your site and learn more about a11y.
If you need more tools because you love tools
I recommend you read this and this .
If you need more documentation
I have plenty of that.