Getting Started

1. Install the Extension

A11y Scan is a free Chrome extension. Install it from the Chrome Web Store in one click.

1. Visit the A11y Scan page on the Chrome Web Store
2. Click "Add to Chrome"
3. Confirm the installation when prompted
4. The A11y Scan icon appears in your Chrome toolbar

The extension is also available on GitHub if you prefer to build from source.

2. Open the Side Panel

Click the A11y Scan icon in your Chrome toolbar. The side panel opens on the right side of the browser with scan controls, preset cards, and configuration options.

3. Choose Your Scan Mode

At the top of the side panel, select the WCAG version and conformance level:

1. WCAG Version: 2.0, 2.1, or 2.2 (default: 2.2)
2. Conformance Level: A, AA, or AAA (default: AA)

Below the scan button, you'll see scan preset cards. These are optional — select them to change what the scan does:

1. Multi-Viewport — scans at mobile (375px), tablet (768px), and desktop (1280px) widths to catch responsive-only issues
2. Site Crawl — crawls the entire site depth-first, following links page by page. You can pause to interact with any page, then resume.

With no presets selected, clicking Start Scan runs a standard single-page scan.

4. Start a Scan

Navigate to any web page and click Start Scan. The extension runs axe-core against the page's DOM and maps results to WCAG criteria.

Results appear in three tabs:

1. Results — automated violations grouped by WCAG criterion, sorted by severity. Click any violation to see affected elements.
2. Manual Review — checklist of criteria that cannot be automated, filtered by what's relevant to the page. Mark each as Pass, Fail, or N/A.
3. ARIA — validates tabs, accordions, menus, dialogs, and 12+ ARIA widget patterns against the WAI spec.

5. Use Visual Overlays

After scanning, the action bar at the bottom provides overlay toggles:

1. Violations — highlights violations directly on the page with colored outlines
2. Tab Order — shows numbered badges on every focusable element in keyboard tab order
3. Gaps — highlights interactive elements that are not keyboard-accessible

Movie Mode — available from the action bar. Animates through the tab order one element at a time so you can watch keyboard focus move through the page. Adjustable speed with play/pause/stop controls.

6. Simulate Color Blindness

The dropdown in the header bar (next to "Normal vision") lets you simulate 9 types of color vision deficiency on the current page: protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, achromatopsia, and achromatomaly.

7. Export Reports

After scanning, download results in three formats from the Export section of the action bar:

1. JSON — enriched with WCAG mappings, fix suggestions, DOM context, CSS styles, framework component names, and file path guesses. Designed for AI agents to read and act on.
2. HTML — self-contained report with inline styles, print-friendly layout. Share with teammates or stakeholders.
3. PDF — generated client-side via jsPDF. Multi-page with headers and footers.

8. Advanced Configuration

Click the gear icon in the header bar to open the config panel. You can paste or upload a JSON test config to override default scan settings:

1. Custom viewport widths for multi-viewport scans
2. WCAG version and level
3. Timing (page load timeout, scan timeout, delay between pages)
4. Authentication (login URL, selectors, credentials)
5. Rule inclusion/exclusion (axe-core rule IDs)
6. Enriched export options (DOM context, CSS, framework hints, file paths)

Use the Test Config Builder on this website to create configs with a step-by-step wizard — no JSON editing needed.

9. Navigate Without Losing Results

Scan results persist when you navigate within the same tab. After a site crawl, you can click any URL in the results to navigate to that page and toggle overlays on it. Results are only cleared when you switch to a different tab or click Clear.

10. Observer Mode

Observer Mode is a passive scanning mode: you enable it once, then browse the web normally. The extension watches as you navigate and automatically runs an accessibility scan on every page you visit. Results collect in the background so you can review them later.

How to enable

1. Open the side panel and select the Observer Mode preset card
2. Accept the one-time privacy notice (Observer Mode stores data locally only)
3. Click Start Scan — the scan runs and is logged in the Observer tab
4. Browse the web as you normally would — every page navigation also triggers an automatic scan
5. Click Start Scan again on any page to capture a new snapshot — each scan is recorded with its own timestamp, never overwritten

Reviewing scans

Every auto-scan appears in the Observer tab, grouped by day. Each row shows the page title, URL, violation count, and time. Click any row to expand the full violation list. Filter by domain or minimum issue count to narrow the view.

Settings

Click the gear icon in the header to find Observer Mode settings at the bottom of the config panel. You can:

1. Restrict observation to specific domains using wildcard patterns (e.g., *.example.com)
2. Exclude domains you never want scanned
3. Set a throttle so the same URL isn't rescanned within N seconds
4. Choose the WCAG version and level for observer scans
5. Cap the maximum number of history entries (oldest are removed when the cap is hit)
6. Clear all observer history at any time

Export your full history as JSON from the Observer tab for archiving or offline review. Chrome-internal pages, extension pages, and file:// URLs are automatically skipped.

Next Steps