Accessibility visualisation with Tota11y 2
TL;DR: I’ve forked the splendid but dated Tota11y accessibility visualisation toolkit, added some extra stuff and corrected a bug, and my employer has let me release it for Global Accessibility Awareness Day.
A while ago, my very nice client (and now employer), Babylon Health, asked me to help them with their accessibility testing. One plan of attack is an automated scan integrated with the CI system to catch errors during development (more about this when it’s finished). But for small content changes made by marketing folks, this isn’t appropriate.
We tried lots of things like Wave, which are great but rather overwhelming for non-technical people because they tend to cover the page being analysed with arcane symbols, many of which are beyond a CMS content editor’s control anyway. There are lots of excellent accessibility checks in Microsoft Edge devtools, but to a non-technical user, this is how devtools look:
Then I remembered something I’d used a while ago to demo heading structures, a tool called Tota11y from Khan Academy, which is MIT licensed. Note, this is not designed to check everything. Tota11y is a simple tool to visualise the most widespread web accessibility errors in a non overwhelmingly-techy way. It aims to give content authors and editors insights into things they can control. It’s not a cure-all.
There were a few things I wanted to change, specifically for Babylon’s web sites. I wanted the contrast analyser to ignore content that was visually hidden using the common clip pattern and to correct a bug whereby it didn’t calculate contrast properly on large text, and reported an error where there isn’t one. False positives encourage people to ignore the output and this erodes trust in tools. The fix uses code from Firefox devtools; thank you to the Mozilla people who helped me find it. There’s loads of other small changes.
Khan Academy seemed to have abandoned the tool, so I forked it. Here it is, if you want to try it for Global Accessibility Awareness Day. Drag the attractive link to your bookmarks bar, then activate it and inspect your page. The code is on GitHub–don’t laugh at my crap JavaScript. It was also an “interesting” experience learning about npm, LESS, handlebars and all the stuff I’d managed to avoid so far.
Feel free to use it if it helps you. Pull requests will be gratefully received (as long as they don’t unnecessarily rewrite it in React and Tailwind), and I’ll be making a few enhancements too. Thanks to Khan Academy for releasing the initial project, to my colleagues for testing it, to Jack Roles for making it look pretty, and to Babylon for letting me release the work they were nice enough to pay me for.
Update: Version 1.1 released
17 June 2021: I’ve made some tweaks to the Tota11y UI. A new naming convention replaces “adjective+animal I’ve never eaten”. V 1+ are “adjective+musical instrument I’ve never tried to play”. V1.1 is “Rusty Trombone”.
(Last Updated on )
5 Responses to “ Accessibility visualisation with Tota11y 2 ”
This Article was mentioned on martymcgui.re
Bruce – I can’t get Tota11y working on any browser. I’ve added the bookmarklet. When I go to a site and click on the bookmarklet, nothing happens. I’ve tried it on Firefox, Brave, and Chrome. Any help would be appreciated.
Unfortunately, this tool is blocked by the Content Security Policy my company employs on its websites. I’d love to see a version that works with a CSP in place that is blocked by the script-src setting.
This Article was mentioned on social.johanbove.info