DEV Community

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

Posted on • Originally published at 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)

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.

brunopulis profile image
Bruno Pulis

I love the tota11y

lkopacz profile image
Lindsey Kopacz

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

bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

Very cool nice work

nickytonline profile image
Nick Taylor

Thanks Benny!

lauragift21 profile image
Gift Egwuenu

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