tota11y

an accessibility (a11y) visualization toolkit

Accessibility
Khan/tota11ykhan.github.io/tota11y/@khanacademy/tota11y

README

tota11y Build Status


An accessibility visualization toolkit

tota11y logo

Try tota11y in your browser, or
read why we built tota11y.

Installation


npm install @khanacademy/tota11y

Include it right before `` like so:

  1. ``` html
  2. <script src="tota11y.min.js"></script>
  3. ```

Development


Want to contribute to tota11y? Awesome! Run the following in your terminal:

  1. ``` sh
  2. git clone https://github.com/Khan/tota11y.git
  3. cd tota11y/
  4. npm install
  5. ```

Architecture Overview


Most of the functionality in tota11y comes from its plugins. Each plugin
gets its own directory in [plugins/](https://github.com/Khan/tota11y/tree/master/plugins) and maintains its own JavaScript, CSS,
and even handlebars. Here's what the simple LandmarksPlugin looks like.

[plugins/shared/](https://github.com/Khan/tota11y/tree/master/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](https://github.com/Khan/tota11y/blob/master/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:

  1. ``` sh
  2. npm test
  3. ```

Or lint with:

  1. ``` sh
  2. npm run lint
  3. ```

To perform manual testing as you work, you can run a live dev-server with the
following:

  1. ``` sh
  2. npm start
  3. ```

Building


To create a development build as the test server uses:

  1. ``` sh
  2. npm run build:dev
  3. ```

To create a production build, with minified and unminified output:

  1. ``` sh
  2. npm run build:prod
  3. ```

Releasing


Currently, the following steps must be made to release a new version of tota11y:

1. Update package.json with the version number to be released.
1. Commit the release details to the CHANGELOG.md.
   This should be list of the unique pull requests and commits that contributed to the release (see the CHANGLOG.md file for previous examples).
1. Draft a new release for the version.
   The tag name and name of the release should be of the form v1.2.3 where 1.2.3 is the version from package.json.
1. Login to npm with the Khan Academy credentials.
   This requires someone with appropriate privileges.
1. Run npm publish.
   This step will run tests and pre-publish checks, then perform a production build and publish the new package to NPM.
  

Community Examples

Want to integrate tota11y into your site, but don't know where to start? Here are some examples from the tota11y community to inspire you:
azemetre/webpack-react-typescript-project shows how to integrate tota11y into a webpack build for a React + TypeScript project.

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.

License


MIT License