loading...
Cover image for An a11y extension coming to a browser near you

An a11y extension coming to a browser near you

nickytonline profile image Nick Taylor (he/him) Originally published at iamdeveloper.com on ・2 min read

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>

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

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).

t0ta11y 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

pic
Editor guide
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
Collapse
nickytonline profile image
Collapse
lauragift21 profile image
Gift Egwuenu

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