DEV Community

Cover image for An a11y extension coming to a browser near you
Nick Taylor
Nick Taylor Subscriber

Posted on • Originally published at nickyt.co on

An a11y extension coming to a browser near you

Last year when I was looking to take on a new role somewhere, one of the places I interviewed at was Khan Academy. TLDR, I wasn’t hired 😉. However, as a candidate, I wanted to stand out. Relevant post 👇

In a nutshell, I put up a PR to Khan’s tota11y repository to convert their a11y tool to a browser extension.

GitHub logo jdan / tota11y

an accessibility (a11y) visualization toolkit

tota11y Build Status

An accessibility visualization toolkit

tota11y logo

Try tota11y in your browser, or read why we built tota11y.

Deprecation Notice

tota11y was created at a time when tooling to assist in developing accessible solutions was sparse. Since then, not only have some great browser extensions and automated tooling come into existence, like axe and axe-core from deque, but browsers have added specific development tooling to support accessibility. As such, we are no longer actively developing or maintaining tota11y.

After careful consideration of the options available, we decided to archive the repository and deprecate the project. As such, we will no longer be accepting pull requests or issues.

Thank you for all the support this project has received over the years and for all those who work hard to ensure the web is accessible to all.

Special thanks

Many of tota11y's features come straight from Google Chrome's Accessibility Developer Tools

The goal of the PR was, aside from standing out, was to make it an extension without interfering with how their tool works when loaded as a bookmarklet.

I’ll be up front, I’m not an a11y expert, so this tool was actually really good for me to learn a few things. Here’s a shot of it in action.

One of the coolest features is the screen reader wand (Khan's work, not mine).

tota11y screen reader wand in action

The PR isn’t merged yet, but will hopefully be in the next month or so. Regardless, you can try it out today as an unpacked extension in Chrome, FireFox, Brave or any browser that lets you load Chrome Webstore extensions. All you need to do is clone my branch and build it locally. See the README for instructions for loading it as an unpacked extension.

I hope you find it useful and shoutout to the devs at Khan for making this great tool.

Top comments (6)

Collapse
 
moopet profile image
Ben Sinclair

That's a good idea. I've just spent a few minutes playing with their bookmarklet, though, and it doesn't work on most of the sites I've tested. Sometimes there's some functionality, sometimes it doesn't load at all, which limits its use as a testing tool.

Collapse
 
brunopulis profile image
Bruno Pulis

I love the tota11y

Collapse
 
lkopacz profile image
Lindsey Kopacz

oh neat! I'll take a look at this!

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Very cool nice work

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Benny!

Collapse
 
lauragift21 profile image
Gift Egwuenu

This looks great! Can't wait to try it out.