an accessibility visualization toolkit
from your friends at
Khan Academy
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 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 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 can be found in the bottom left corner of this page. Here are some UI elements to try it on.
The following UI elements are intentionally inaccessible for demonstration purposes.Here's an input without an explicit label:
Username:Here's one that tries to get by with a placeholder.
EmailThis one looks good.
<h4> heading has an invalid levelOn this background, this text is too light.
A buttonThis image has no alt attribute, and a screen-reader will likely read off its filename.
This image has empty alt text, meaning the screen reader will interpret it as decorative.
This image has proper alt text.
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
install @khanacademy/tota11y using npm
or yarn, 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.
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.