tota11y 
An accessibility visualization toolkit
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 (or any!) of these to contribute to tota11y, but we hope tota11y is a good place to learn something new and interesting.
Testing
You can run unit tests on tota11y with the following:
npm test
Or lint with:
npm run lint
To perform manual testing as you work, you can run a live dev-server with the following:
npm start
Building
To create a development build as the test server uses:
npm run build:dev
To create a production build, with minified and unminified output:
npm run build:prod
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.