Mell
Assistive technologies are the new norm for web design. Once responsive design went mainstream it was quickly obvious to designers that supporting more users is a necessity.
But there’s a lot of work to do for web accessibility. This is a huge topic and not something you can pick up without handy tools.
Tota11y is a free toolkit for visualizing your website’s accessibility problems. This works right in the browser so you can just load up the toolkit, click around your site (or any site!) to find accessibility recommendations.
This works as a JavaScript library that can be plugged into any page. You could also run it manually on live sites through Chrome DevTools, but that’s not always useful unless you’re working on someone else’s site.
Tota11y adds a small toolbar onto your page and runs dynamically across the entire DOM. Whenever you click an element you’ll get a small expanding boxwith details covering accessibility problems.
One thing I really like about Tota11y is the clear language used with each callout box. Most of the WAI-ARIA documentation feels like reading tax codes. Great for putting yourself to sleep, not so great for debugging a website.
With this library, you’ll find problems and solutions written in plain English. So much easier to consume and the solutions are quick.
If you visit the main page you’ll find a demo of Tota11y running on the site. It’s the small black tab located in the lower-left corner of the screen. Just click that for an expanded view covering all the main page elements.
The whole thing is opensourced under the MIT license so it’s really easy to work with.
You can grab a copy on GitHub and use it for pretty much anything. Tota11y also comes with a bunch of plugins you can extend onto the main script. These add functionality for checking more detailed accessibility concerns.
If you’re big into accessibility testing then you’ll absolutely want a copy of this script in your toolbox.
You may also like to read:
Best Raspberry Pi Alternatives and Their Features