Khan Engineering

Khan Engineering

We're the engineers behind Khan Academy. We're building a free, world-class education for anyone, anywhere.


Latest posts

Making Websites Work with Windows High Contrast Mode

Diedra Rater on March 21

Kotlin for Python developers

Aasmund Eldhuset on Nov 29, 2018

Using static analysis in Python, JavaScript and more to make your system safer

Kevin Dangoor on Jul 26, 2018

Kotlin on the server at Khan Academy

Colin Fuller on Jun 28, 2018

The Original Serverless Architecture is Still Here

Kevin Dangoor on May 31, 2018

What do software architects at Khan Academy do?

Kevin Dangoor on May 14, 2018

New data pipeline management platform at Khan Academy

Ragini Gupta on Apr 30, 2018

Untangling our Python Code

Carter J. Bastian on Apr 16, 2018

Slicker: A Tool for Moving Things in Python

Ben Kraft on Apr 2, 2018

The Great Python Refactor of 2017 And Also 2018

Craig Silverstein on Mar 19, 2018

Working Remotely

Scott Grant on Oct 2, 2017

Tips for giving your first code reviews

Hannah Blumberg on Sep 18, 2017

Let's Reduce! A Gentle Introduction to Javascript's Reduce Method

Josh Comeau on Jul 10, 2017

Creating Query Components with Apollo

Brian Genisio on Jun 12, 2017

Migrating to a Mobile Monorepo for React Native

Jared Forsyth on May 29, 2017

Memcached-Backed Content Infrastructure

Ben Kraft on May 15, 2017

Profiling App Engine Memcached

Ben Kraft on May 1, 2017

App Engine Flex Language Shootout

Amos Latteier on Apr 17, 2017

What's New in OSS at Khan Academy

Brian Genisio on Apr 3, 2017

Automating App Store Screenshots

Bryan Clark on Mar 27, 2017

It's Okay to Break Things: Reflections on Khan Academy's Healthy Hackathon

Kimerie Green on Mar 6, 2017

Interning at Khan Academy: from student to intern

Shadaj Laddad on Dec 12, 2016

Prototyping with Framer

Nick Breen on Oct 3, 2016

Evolving our content infrastructure

William Chargin on Sep 19, 2016

Building a Really, Really Small Android App

Charlie Marsh on Aug 22, 2016

A Case for Time Tracking: Data Driven Time-Management

Oliver Northwood on Aug 8, 2016

Time Management at Khan Academy

Several Authors on Jul 25, 2016

Hackathons Can Be Healthy

Tom Yedwab on Jul 11, 2016

Ensuring transaction-safety in Google App Engine

Craig Silverstein on Jun 27, 2016

The User Write Lock: an Alternative to Transactions for Google App Engine

Craig Silverstein on Jun 20, 2016

Khan Academy's Engineering Principles

Ben Kamens on Jun 6, 2016

Minimizing the length of regular expressions, in practice

Craig Silverstein on May 23, 2016

Introducing SwiftTweaks

Bryan Clark on May 9, 2016

The Autonomous Dumbledore

Evy Kassirer on Apr 25, 2016

Engineering career development at Khan Academy

Ben Eater on Apr 11, 2016

Inline CSS at Khan Academy: Aphrodite

Jamie Wong on Mar 29, 2016

Starting Android at Khan Academy

Ben Komalo on Feb 29, 2016

Automating Highly Similar Translations

Kevin Barabash on Feb 15, 2016

The weekly snippet-server: open-sourced

Craig Silverstein on Feb 1, 2016

Stories from our latest intern class

2015 Interns on Dec 21, 2015

Kanbanning the LearnStorm Dev Process

Kevin Dangoor on Dec 7, 2015

Forgo JS packaging? Not so fast

Craig Silverstein on Nov 23, 2015

Switching to Slack

Benjamin Pollack on Nov 9, 2015

Receiving feedback as an intern at Khan Academy

David Wang on Oct 26, 2015

Schrödinger's deploys no more: how we update translations

Chelsea Voss on Oct 12, 2015

i18nize-templates: Internationalization After the Fact

Craig Silverstein on Sep 28, 2015

Making thumbnails fast

William Chargin on Sep 14, 2015

Copy-pasting more than just text

Sam Lau on Aug 31, 2015

No cheating allowed!!

Phillip Lemons on Aug 17, 2015

Fun with slope fields, css and react

Marcos Ojeda on Aug 5, 2015

Khan Academy: a new employee's primer

Riley Shaw on Jul 20, 2015

How wooden puzzles can destroy dev teams

John Sullivan on Jul 6, 2015

Babel in Khan Academy's i18n Toolchain

Kevin Barabash on Jun 22, 2015

tota11y - an accessibility visualization toolkit

Jordan Scales on Jun 8, 2015


tota11y - an accessibility visualization toolkit

by Jordan Scales on Jun 8, 2015

Today we're releasing tota11y (on GitHub), an accessibility visualization toolkit that aims to reduce the friction of a11y testing.

tota11y logo


Accessibility is hard for many reasons. While current tooling provides mechanisms for detecting most accessibility violations, there remains a certain amount of disconnect between the developer and the problems they are causing. Most of these errors are things we can't see, things that won't affect us, and things without a perfect, exact fix.

tota11y aims to solve these problems by providing a fun, interactive way to see accessibility issues. Not only should the web be fully accessible to all, but developers should feel empowered to fix and prevent accessibility violations from happening in the first place.

A bit of history

We've been explicitly working to improve the accessibility of Khan Academy since early January. In that time we've seen first hand what it takes to go through each and every page on our website and fix things that may prove to be troublesome to assistive technologies.

John and I were both very new to this, so we set out and did our research, wrote some tests to detect violations using Chrome's Accessibility Developer Tools, and got to work.

A few weeks later we had fixed a significant chunk of accessibility errors on our site, and learned an immense amount about assistive technologies.

Chrome's Accessibility Developer Tools reporting some errors on our homepage

Then the hard part came.

We felt capable of fixing most accessibility violations on our site, but how could we spread that knowledge to the team efficiently? How could we make every Khan Academy employee feel empowered to report and fix accessibility violations?

We gave talks, wrote docs, sent out emails, but regressions still popped up. Our tests ran, but were flaky, and didn't gain the same level of respect as our unit tests or linter.

Simply put, our dev team still didn't fully understand the problems they were causing, and how to fix them.

Meet tota11y

About a month ago we set out to build tota11y as an internal project for Khan Academy's "Web Frontend" team.

The aim was to make it as simple as possible for developers to do manual accessibility testing as part of their normal work. Rather than requiring our dev team to dig through long-winded audit reports for violations they didn't understand, we wanted provide simple visualizations where they already were - the browser, right in front of them.

So we started off with the idea of "annotations." We highlight parts of the current document, either to point out errors, successes, or just to label important tags like headings or ARIA landmarks.

An early tota11y demo showing heading annotations

A (very) early proof-of-concept for tota11y.

We ran with this core idea of "annotations" and expanded it, as you'll see, to include detailed error messages, suggestions for fixes, and more.

What can tota11y do

tota11y is a single JavaScript file that you can include in your document like so:

<script src="tota11y.min.js"></script>

Once you see the glasses in the bottom left corner of your window, you're good to go.

The collapsed tota11y toolbar, a small button with a glasses icon

tota11y currently includes plugins for the following:

  • detecting images with/without alt text (and presentation images)
  • labeling text with contrast violations (and suggesting appropriate color combinations)
  • outlining a document's heading structure and pointing out any errors with it
  • highlighting input fields without appropriate labels (and suggesting fixes based on context)
  • labeling all ARIA landmarks on the page
  • detecting unclear link text such as "Click here" and "More"

Many of these come directly from Google Chrome's Accessibility Developer Tools.

The expanded tota11y toolbar displaying a list of plugins

Some plugins (like the landmarks plugin) are as simple as labeling parts of the page.

tota11y highlighting aria landmarks on

Others provide an extended summary of the page, like the headings plugin, using what's known as the "info panel."

tota11y highlighting heading tags and structure on

Also using this info panel, we can report errors in more detail and offer suggestions.

tota11y explaining contrast violations and offering suggestions on

While we can't guarantee to solve all of your accessibility troubles, we think this approach makes violations easier to digest and will inspire developers to think differently about accessibility.

What's in store?

We want to see how others use tota11y, and figure out what other sorts of accessibility violations we can help fix. Some ideas include:

  • proper/improper usage of the "tabindex" attribute
  • improper disabling of focus styling
  • buttons that are not keyboard-accessible

We also want to continue building a solid API for tota11y, enabling developers to write their own tota11y plugins which may not be included in the original source.

And we're planning on bundling tota11y as a series of browser extensions to make it easier to test websites without the need to include a script in your application.

We hope using tota11y makes you feel empowered to spot, diagnose, and fix accessibility issues on your webpages. Be sure to check us out on GitHub and let us know how we can help.