WCAG 2.1 Chrome Extension Manifest V3

AccessiAI Documentation

Everything you need to install, configure, and get the most out of your AI-powered accessibility auditing extension.

📅 Last updated March 2026 🌐 Chrome 88+ 📦 28 WCAG rules 🤖 3 AI providers
Introduction

What is AccessiAI?

AccessiAI is a free Chrome extension that audits any webpage for WCAG 2.1 accessibility violations in seconds. It highlights issues directly on the page with colour-coded overlays, lets you navigate through violations one by one, and can generate a professional AI-written accessibility report using your own API key — all without sending a single byte of data to AccessiAI's servers.

It runs entirely in the browser against the live DOM, so it catches issues that only appear after JavaScript executes — unlike static source-code linters.

Who is it for?

Developers

Catch violations before pull requests merge. Integrate issue export into bug trackers.

Designers

Validate contrast ratios, focus visibility, and typographic spacing on live prototypes.

QA Testers

Run a full 28-rule audit, export results to CSV or Excel, and track regressions over time.

Content Creators

Use the readability panel and text-to-speech tools to experience content as your users do.

ℹ️

Free forever. AccessiAI requires no account, no subscription, and no data upload. AI features use your own API key and call your chosen provider directly.

Features

Features Overview

AccessiAI bundles eight tools into a single popup. All operate locally against the current tab — no background permissions required.

Feature What it does
🔍 WCAG Scanner Checks 28 rules across WCAG 2.1 levels A, AA, and AAA. Highlights violations directly on the page with colour-coded overlays (red / orange / yellow). Auto-rescans SPAs on DOM changes via MutationObserver.
🤖 AI-Powered Reports Sends page structure and scan results to OpenAI, Anthropic Claude, or Google Gemini and returns a professional 7-section Markdown report ready to share with your team.
📖 Readability Panel Live CSS overrides for font size (70–200%), line height, letter spacing, OpenDyslexic font, high contrast, grayscale, and colour inversion. Settings persist per tab.
🔊 Text-to-Speech Reads full pages or selected text using native browser speech synthesis. Adjust voice, rate (0.5×–3×), and pitch on the fly. TTS state persists across popup reopens.
🧭 Issue Navigator Steps through every flagged violation one by one. Each step scrolls the page and focuses the affected element — ideal for systematic remediation.
🔎 Issue Search & Filter Live keyword search across rule names, descriptions, and selectors. Filter by WCAG level or rule ID. Drives the Issue Navigator when active.
📊 CSV / Excel Export Exports the full issue list — rule ID, WCAG level, element selector, description — to CSV or Excel (.xlsx) for bug trackers and compliance reports.
🌐 Multi-Language UI Extension interface fully localised in English, Spanish, Portuguese, Japanese, and Chinese. Switch language inside the popup without a page reload.
Installation

Installation

AccessiAI can be installed directly from the Chrome Web Store (recommended) or loaded manually as an unpacked extension for development and testing.

From the Chrome Web Store

1

Open the Chrome Web Store listing

Search for "AccessiAI" in the Chrome Web Store or follow the link from the main page.

2

Click "Add to Chrome"

Confirm the permissions dialog. AccessiAI requests only activeTab, scripting, and storage — no background network access.

3

Pin the extension icon

Click the puzzle-piece icon in Chrome's toolbar, find AccessiAI, and click the pin icon so it's always one click away.

Manual / Developer install (load unpacked)

1

Download the release ZIP

Grab the latest .zip from the GitHub Releases page and extract it to a local folder.

2

Enable Developer Mode

Open chrome://extensions and toggle Developer mode in the top-right corner.

3

Load unpacked

Click Load unpacked and select the extracted folder containing the extension's manifest.json.

4

Pin the icon

Click the puzzle-piece icon → find AccessiAI → click the pin. The ♿ icon will appear in your toolbar.

💡

Requirements: Chrome 88 or newer. The extension uses Manifest V3 and native browser APIs only — no external runtime dependencies.

Usage

How to Use

Click the AccessiAI ♿ icon in your Chrome toolbar while viewing any webpage. The popup opens with four tabs. Each tab is independent — you can use them in any order.

Scanner Tab

Level A Level AA Level AAA
  • Click Scan Page to run all 28 WCAG checks against the current tab's live DOM.
  • Violations appear as coloured overlays on the page — red for Level A (critical), orange for AA (moderate), yellow for AAA (minor).
  • The popup lists each issue with its rule ID, WCAG success criterion, and the CSS selector of the affected element.
  • Use the Search & Filter bar to narrow results by keyword, rule ID, or WCAG level.
  • Click Next / Prev in the Issue Navigator to step through violations one by one — the page scrolls and the element receives focus.
  • Click Export CSV or Export Excel to download the full issue list with rule ID, level, selector, and description columns.
  • On single-page apps the scanner re-runs automatically when the DOM changes (debounced at 800 ms).

Readability Tab

Per-tab settings
  • Drag the Font Size slider to scale all text on the page from 70% to 200% in 10% steps.
  • Adjust Line Height (Normal–3.0, step 0.2), Letter Spacing (0–0.3em), and Word Spacing (0–1.0em) with the steppers.
  • Toggle OpenDyslexic to load the dyslexia-friendly font from CDN and apply it to all page text.
  • Toggle High Contrast, Grayscale, or Invert Colours using the display filter switches.
  • Enable Highlight Links or Highlight Headings to visually outline all interactive or structural elements.
  • All settings persist in chrome.storage.local per tab and restore automatically when you reopen the popup.
  • Click Reset to remove all overrides and restore the page to its original styles.

Speech Tab

Native synthesis
  • Choose a Voice from the dropdown — all voices installed in your operating system are listed.
  • Adjust Rate (0.5×–3×) and Pitch using the sliders.
  • Click Read Page to read the full visible text content of the current tab aloud.
  • Highlight text on the page first, then click Read Selection to read only the selected passage.
  • Use Pause, Resume, and Stop controls at any time — play state is stored so the popup reopens with the correct button labels.
  • Speech uses the native SpeechSynthesis API — no audio data leaves your browser.

AI Tools Tab

Bring your API key
  • Select your AI Provider from the dropdown: OpenAI, Anthropic, or Google Gemini.
  • Choose a Model — each provider offers a fast/affordable option and a more capable one.
  • Paste your API Key into the key field. It is stored only in chrome.storage.local and never sent to AccessiAI servers.
  • Click Generate Report. AccessiAI bundles page structure (headings, landmarks, forms) and scan results into a single prompt and calls the provider directly.
  • The resulting 7-section Markdown report appears in the panel: executive summary, estimated AA compliance %, critical / moderate / minor issues, structural analysis, and top 5 prioritised recommendations.
  • The report is stored in chrome.storage.local and persists after you close the popup — click Clear Report to remove it.
  • See the AI Providers section below for step-by-step key setup instructions.
WCAG Rules

Supported WCAG 2.1 Rules

AccessiAI checks 28 rules organised across three WCAG 2.1 conformance levels. In the extension UI, Level A violations are highlighted in red, Level AA in orange, and Level AAA in yellow.

A

Images missing or empty alt attribute

SC 1.1.1 — img-alt
A

Buttons / role="button" with no accessible name

SC 4.1.2 — button-name
A

Links with empty or vague text ("click here", "more")

SC 2.4.4 — link-name
A

Form inputs with no label, aria-label, or title

SC 3.3.2 — input-label
A

Click-only elements missing keyboard access

SC 2.1.1 — click-keyboard
A

Icon-only interactive elements with no accessible label

SC 4.1.2 — icon-aria
A

Focusable divs/spans missing a semantic role

SC 4.1.2 — custom-role
A

Interactive ARIA roles with no reachable tabindex

SC 2.1.1 — tabindex-required
A

Missing "skip to main content" anchor link

SC 2.4.1 — skip-link
A

Page has no <main> or role="main" landmark

SC 1.3.6 — landmark-missing
A

Page <title> is missing or empty

SC 2.4.2 — page-title
A

<iframe> elements missing a title attribute

SC 4.1.2 — iframe-title
A

Images used as links with empty or missing alt text

SC 1.1.1 — img-link-alt
A

<select> elements without an associated label

SC 1.3.1 — select-label
A

Data tables missing header cells (<th>) or scope

SC 1.3.1 — table-headers
A

Form error messages not programmatically associated with inputs

SC 3.3.1 — error-identification
AA

Text contrast below 4.5:1 (normal) or 3:1 (large)

SC 1.4.3 — low-contrast
AA

Missing or invalid lang attribute (BCP 47)

SC 3.1.1 — language-attr
AA

Interactive elements with outline:none and no fallback

SC 2.4.7 — focus-visible
AA

Videos with no captions or subtitles track

SC 1.2.2 — video-captions
AA

Form control borders below 3:1 contrast

SC 1.4.11 — non-text-contrast
AA

Elements with positive tabindex disrupting tab order

SC 2.4.3 — positive-tabindex
AAA

Text passing AA but below 7:1 enhanced contrast

SC 1.4.6 — enhanced-contrast
AAA

Links with no meaningful word in accessible name

SC 2.4.9 — link-purpose-context
AAA

Skipped heading levels (h1→h3) or multiple h1 elements

SC 2.4.10 — heading-hierarchy
AAA

Line length exceeds 80 characters (measure too wide)

SC 1.4.8 — line-length
AAA

Insufficient text spacing — line-height <1.5 or letter-spacing <0.12em

SC 1.4.12 — text-spacing
AAA

Elements that flash more than 3 times per second

SC 2.3.2 — three-flashes
AI Providers

AI Providers Setup

The AI Tools tab requires an API key from one of three supported providers. Your key is stored only in chrome.storage.local on your device and is sent directly to the provider — never to AccessiAI servers.

⚠️

API calls are made on your behalf and billed to your account. Use the affordable models (gpt-4o-mini, claude-haiku-4-5, gemini-2.0-flash) for everyday audits to keep costs minimal.

🟢 OpenAI
gpt-4o-mini · gpt-4o
  1. Go to platform.openai.com/api-keys and sign in.
  2. Click Create new secret key, give it a name (e.g. "AccessiAI"), and copy the key — it starts with sk-.
  3. In the AccessiAI popup → AI Tools tab → select OpenAI → paste the key → click Generate Report.
🟣 Anthropic Claude
claude-haiku-4-5 · claude-sonnet-4-6
  1. Go to console.anthropic.com/settings/keys and sign in.
  2. Click Create Key, copy the key — it starts with sk-ant-.
  3. In the AccessiAI popup → AI Tools tab → select Anthropic → paste the key → click Generate Report.
🔵 Google Gemini
gemini-2.0-flash · gemini-1.5-pro
  1. Go to aistudio.google.com/app/apikey and sign in with a Google account.
  2. Click Create API Key, copy it.
  3. In the AccessiAI popup → AI Tools tab → select Google Gemini → paste the key → click Generate Report.
🔒

Key security: Your API key is stored in chrome.storage.local — accessible only to the AccessiAI extension on your device. It is never transmitted to any server other than your chosen AI provider.

Limitations

Known Limitations

AccessiAI covers the most impactful WCAG checks automatically, but some scenarios are outside what a browser extension can reliably detect.

  • 🚫
    chrome:// pages and cross-origin iframes
    Chrome does not permit content scripts on browser internal pages (chrome://, chrome-extension://, or about:) or in cross-origin iframe contexts. Scanning these pages will return no results.
  • 🖱️
    addEventListener click handlers
    The scanner detects non-interactive elements with inline onclick attributes but cannot inspect event listeners attached via addEventListener. Some keyboard-inaccessible click handlers may not be reported.
  • 🎨
    Contrast on gradients and image backgrounds
    The contrast checker samples the computed background colour via getComputedStyle. Gradient or image backgrounds return a single colour value, which may cause false positives or false negatives for contrast rules.
  • ⚡
    Dynamically rendered content
    Content rendered after a significant delay (e.g. lazy-loaded infinite scroll sections) may not be present in the DOM at scan time. Use the manual re-scan button after content loads, or rely on the MutationObserver auto-rescan for SPA route changes.
Privacy

Privacy

AccessiAI was designed with a strict no-telemetry, local-first approach.

  • 🔒
    No data sent to AccessiAI servers
    All scanning, readability adjustments, and text-to-speech processing happen entirely within your browser. Page content never leaves your device unless you explicitly trigger an AI report.
  • 🤖
    AI provider calls are on-demand only
    When you click "Generate Report", AccessiAI sends a structured prompt containing page structure and scan results directly to your chosen AI provider's public API. This call is made under your own API key and account — AccessiAI has no visibility into it.
  • 🗝️
    API keys stored locally
    Your API keys are stored in chrome.storage.local, which is scoped to the extension on your device. They are never transmitted to AccessiAI servers.
  • 📊
    No analytics or usage tracking
    AccessiAI does not embed any analytics SDK or tracking pixel inside the extension. The landing page uses Google Analytics for page-view metrics only — the extension itself is analytics-free.

For the full privacy policy see privacy-policy.html.

Contributing

Contributing & Development Setup

AccessiAI is open source and welcomes contributions. The repository is at github.com/iamakashaher/AccessiAI.

Getting started

# 1. Clone the repo git clone https://github.com/iamakashaher/AccessiAI.git cd AccessiAI # 2. Install dependencies npm install # 3. Build the extension npm run build # 4. Load unpacked in Chrome # Open chrome://extensions → Enable Developer mode → Load unpacked → select /dist

Adding a new WCAG rule

1

Define the rule

Add a new entry to the rules registry (see the project's CLAUDE.md for the exact file path and schema). Each rule needs an ID, WCAG success criterion reference, level, description, and a check() function that receives a DOM node and returns a boolean.

2

Write the check function

The check() function is called once per matching element. Return true if the element passes the rule, false if it violates it. Keep checks fast — they run on every DOM mutation.

3

Add a test case

Create a corresponding test in the /tests directory with both a passing and a failing HTML fixture. Run npm test to verify.

4

Open a pull request

Submit your PR against the main branch. Include the rule ID, WCAG criterion, and a short description of what it checks in the PR description.

📋

Before starting significant work, open a GitHub issue to discuss the approach. This prevents duplicated effort and ensures the rule fits the existing architecture.

License

License & Credits

MIT License

AccessiAI is released under the MIT License. You are free to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, subject to including the original copyright notice. See the LICENSE file in the repository for the full text.

Credits

  • 👤
    Built by Akash Aher
    akashaher.com · LinkedIn · GitHub
  • 📐
    Standards
    WCAG 2.1 guidelines by the W3C Web Accessibility Initiative (WAI). AccessiAI is an independent tool and is not affiliated with W3C or WAI.
  • 🔤
    OpenDyslexic Font
    opendyslexic.org — open-source font designed to improve readability for readers with dyslexia, released under the SIL Open Font License.
  • 🤖
    AI Providers
    OpenAI, Anthropic, and Google are independent companies. AccessiAI integrates with their public APIs. Each provider's own terms of service apply when you use your API key.

Made with ♥ for an accessible web.

AccessiAI · Free forever · MIT License · No data collection

Add to Chrome View Source on GitHub