an accessibility visualization toolkit

from your friends at

Khan Academy Khan Academy

About

tota11y helps visualize how your site performs with assistive technologies. Check out the announcement blog post.

The process of testing for accessibility (a11y) is often tedious and confusing. In many cases, developers must have some prior accessibility knowledge in order to make sense of the results.

Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices.

tota11y pointing out <input> tags without labels, and explaining how to fix the issue


How it works

tota11y is a single JavaScript file that inserts a small button in the bottom corner of your document. (It's on this very page.)

The toolbar consists of several plugins that each provide their own functionality.

Many of these plugins "annotate" elements on the page. Sometimes to show their existence, other times to point out when something's wrong.

tota11y labeling the heading tags on Khan Academy's algebra page


Easy and informative

tota11y makes it easy to spot some of the most common accessibility violations made by page authors today.

Beyond simply pointing out errors, many tota11y plugins also suggest ways to fix these violations - specifically tailored to your document.

tota11y reporting contrast violations and suggesting appropriate color combinations



Installation

tota11y is available as a bookmarklet and can be used in any desktop browser. Simply drag the button below into your bookmarks bar and then click it to add tota11y to the current page.

tota11y

To insert tota11y directly into your own website, first grab a copy from GitHub, then include the script at the bottom of your <body> tag like so:

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

Alternatively, you can build tota11y from source following the instructions on our GitHub page.

tota11y is MIT licensed.



Special thanks

Many of tota11y's features come straight from Google Chrome's Accessibility Developer Tools. We use this library heavily at Khan Academy.

The awesome glasses in our logo were created by Kyle Scott and are licensed under CC BY 3.0.