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.
An accessibility visualization toolkit
npm install @khanacademy/tota11y
Include it right before
</body> like so:
Want to contribute to tota11y? Awesome! Run the following in your terminal:
git clone https://github.com/Khan/tota11y.git cd tota11y/ npm install
Most of the functionality in tota11y comes from its plugins. Each plugin
gets its own directory in
and even handlebars. Here's what the simple LandmarksPlugin looks like.
index.js brings it all together.
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).
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.