DEV Community

Cover image for An a11y extension coming to a browser near you
Nick Taylor (he/him)
Nick Taylor (he/him)

Posted on • Originally published at iamdeveloper.com 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 Khan / 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.

Installation

npm install @khanacademy/tota11y

Include it right before </body> like so:

<script src="tota11y.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Development

Want to contribute to tota11y? Awesome! Run the following in your terminal:

git clone https://github.com/Khan/tota11y.git
cd tota11y/
npm install
Enter fullscreen mode Exit fullscreen mode

Architecture Overview

Most of the functionality in tota11y comes from its plugins. Each plugin gets its own directory in plugins/ and maintains its own JavaScript, CSS and even handlebars. Here's what the simple LandmarksPlugin looks like.

plugins/shared/ contains a variety of shared utilities for the plugins, namely the info-panel and annotate modules, which are used to report accessibility violations on the screen.

index.js brings it all together.

tota11y uses a variety of technologies, including jQuery, webpack, babel, and JSX. There's no need to know allโ€ฆ

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.

Discussion (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 (he/him) Author

Thanks Benny!

Collapse
lauragift21 profile image
Gift Egwuenu

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