# jdan/tota11y

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jdan-tota11y).**

5,067 stars · 275 forks · JavaScript · mit

## Links

- GitHub: https://github.com/jdan/tota11y
- Homepage: http://khan.github.io/tota11y/
- awesome-repositories: https://awesome-repositories.com/repository/jdan-tota11y.md

## Description

tota11y is an in-browser accessibility testing tool that runs as a bookmarklet, scanning any live web page and overlaying visual indicators directly on elements that violate common accessibility guidelines. All analysis happens client-side without any server communication, making it a self-contained auditing and education tool.

The tool uses a plugin-driven rule engine where each accessibility check is encapsulated as a separate module, and results are displayed through a toggleable toolbar interface that uses CSS-based colored labels and icons positioned over the page elements. Users can enable or disable specific checks and see issues such as missing alt text, low contrast, or broken ARIA attributes mapped directly onto the rendered DOM.

Beyond simple detection, tota11y is designed to support an educational workflow — allowing developers and testers to inspect a page and see real examples of accessibility issues in context, without modifying source code or build tools. It is distributed as a bookmarklet that injects a JavaScript bundle on click.

## Tags

### Business & Productivity Software

- [Issue Pattern Extraction](https://awesome-repositories.com/f/business-productivity-software/recurring-transaction-detection/issue-pattern-extraction.md) — Quickly finds and highlights problems like missing alt text, low contrast, or broken ARIA attributes.

### Content Management & Publishing

- [Live Page Accessibility Scanners](https://awesome-repositories.com/f/content-management-publishing/page-insertion/text-page-generation/per-page-content-extractors/live-page-content-readers/live-page-accessibility-scanners.md) — Runs on-demand accessibility checks on any rendered HTML page without modifying source code or build tools.

### Education & Learning Resources

- [Accessibility Scanners](https://awesome-repositories.com/f/education-learning-resources/technical-domain-education/technical-academic-domains/algorithmic-design-analysis/tree-data-structures/tree-traversal-utilities/dom-traversers/accessibility-scanners.md) — Traverses the live DOM tree to identify elements violating WCAG guidelines and common accessibility patterns.
- [Accessibility Education Workflows](https://awesome-repositories.com/f/education-learning-resources/educational-examples/accessibility-education-workflows.md) — Supports learning about accessibility best practices by inspecting a page and seeing real examples of violations.

### Testing & Quality Assurance

- [Accessibility Testing](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/accessibility-testing.md) — Scans live web pages and overlays visual indicators on elements violating accessibility guidelines. ([source](http://khan.github.io/tota11y/))
- [Accessibility Auditing](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards/semantic-document-structures/accessibility-auditing.md) — Scans live web pages to identify common accessibility violations and display visual indicators for each issue.

### User Interface & Experience

- [Accessibility Inspection Tools](https://awesome-repositories.com/f/user-interface-experience/accessibility-inspection-tools.md) — Maps accessibility issues directly onto page elements through colored overlays and annotations.
- [Toggleable Toolbars](https://awesome-repositories.com/f/user-interface-experience/action-toolbars/toolbar-registration/toggleable-toolbars.md) — Provides a persistent collapsible toolbar for enabling and disabling specific accessibility checks.
- [Overlay Systems](https://awesome-repositories.com/f/user-interface-experience/visual-html-css-designers/overlay-systems.md) — Renders colored floating labels and icons over page elements using absolute-positioned HTML and CSS transitions.

### Web Development

- [Bookmarklet Injection Tools](https://awesome-repositories.com/f/web-development/bookmarklet-subscription-tools/bookmarklet-injection-tools.md) — Loads as a bookmarklet that injects a JavaScript bundle into the page context on click.
- [Client-Side Tool Execution](https://awesome-repositories.com/f/web-development/client-side-execution-environments/client-side-tool-execution.md) — All scanning and rendering happens entirely in the user's browser without any server communication.

### Software Engineering & Architecture

- [Plugin-Based Rule Engines](https://awesome-repositories.com/f/software-engineering-architecture/configuration-driven-rule-engines/plugin-based-rule-engines.md) — Each accessibility check is encapsulated in a plugin module that returns flagged elements with severity levels.