Site Accessibility Auditor

A Chrome DevTools extension that audits web accessibility across five dimensions — touch targets, keyboard flow, color contrast, data visualizations, and interactive states.

Install from Chrome Web Store · Latest Release · Report a Bug · Privacy Policy

---

Screenshots

Touch Target Auditor — undersized targets flagged on-page with WCAG references and iterative fix tracking	Reading & Focus Order — DOM vs. visual vs. accessibility-tree order, with per-element inspection	On-page tab-order overlay — order drift, tab breaks, and unreachable controls made visible
Color Audit — semantic color grouping, contrast warnings, and color-vision-deficiency simulation	Chart / Data-Viz Audit — SVG and canvas charts analyzed with a WCAG-referenced critique	Dynamic States — state-dependent accessibility debt, state matrix, and discovery timeline

Features

Panel	What it does
Touch Target Auditor	Flags interactive elements that fall below WCAG minimum target sizes (2.5.8), highlights them on the page, and tracks issues across fix iterations
Reading Order / Keyboard Flow	Compares DOM, visual, and accessibility-tree order; detects missing accessible names, role mismatches, order drift, tab breaks, and missing tab stops
Color Audit	AI-assisted contrast analysis that groups page colors into semantic sections and simulates low vision, cataracts, contrast loss, and color-vision deficiencies
Chart / Data-Viz Audit	Detects SVG and canvas charts, then reviews text alternatives, data fallbacks, contrast, and keyboard access with WCAG-referenced findings
Dynamic States	Explores hover/focus/active states automatically and quantifies state-dependent accessibility debt with a severity-weighted metric

Installation

From the Chrome Web Store

Install directly from the Chrome Web Store — no build step required.

From a GitHub release

1. Download the site-accessibility-auditor-*.zip from the latest release and extract it.
2. Open chrome://extensions and enable Developer mode (top-right toggle).
3. Click Load unpacked and select the extracted folder.

From source

Requires Node.js 20+ and pnpm 9+ (npm install -g pnpm).

git clone https://github.com/rahatzamancse/site-accessibility-auditor.git
cd site-accessibility-auditor
pnpm install
pnpm build

Then load the generated dist/ folder via Load unpacked as described above.

Usage

1. Open any web page and launch Chrome DevTools (F12).
2. Look for the Accessibility Auditor tabs in DevTools.
3. Grant the extension access to the inspected page when prompted.
4. Run a scan from any panel — results are highlighted both in the panel and on the page itself.

AI-assisted analysis (optional)

The Color Audit and Chart Audit panels can use the OpenAI API for deeper analysis. You'll be prompted for your API key the first time you use them. The key is stored locally in Chrome's extension storage and is only ever sent to api.openai.com — see the privacy policy for details. Everything else runs entirely on your machine.

Development

pnpm dev

This builds in watch mode; after each rebuild, click the reload icon for the extension on chrome://extensions to pick up changes.

Command	Description
pnpm build	Production build to dist/
pnpm dev	Build in watch mode
pnpm lint	Check formatting and types
pnpm format	Auto-format source files

Tech stack

Built with Svelte 5, TypeScript, Tailwind CSS 4, D3, and Vite, packaged as a Manifest V3 DevTools extension.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.