---
name: Accessibility Auditor
slug: accessibility-auditor-2
category: Quality
description: Accessibility Auditor audits web pages in a real browser for WCAG 2.1 AA issues. Use it to check contrast, focus, keyboard navigation, ARIA labels, semantic HTML, and capture screenshots with remediation notes.
github: "https://github.com/hanzili/hanzi-browse/tree/main/server/skills/a11y-auditor"
language: JavaScript
stars: 176
forks: 53
install: "npx degit https://github.com/hanzili/hanzi-browse/tree/main/server/skills/a11y-auditor ~/.claude/skills/a11y-auditor"
installs_to: ~/.claude/skills/a11y-auditor
source_path: server/skills/a11y-auditor/SKILL.md
collection_size: 12
category_size: 1817
collection_url: "https://dirskills.com/collections/hanzili/hanzi-browse"
added: 2026-09-07T05:21:09.740Z
last_synced: 2026-09-07T05:21:09.740Z
canonical_url: "https://dirskills.com/skills/accessibility-auditor-2"
---

# Accessibility Auditor

Accessibility Auditor audits web pages in a real browser for WCAG 2.1 AA issues. Use it to check contrast, focus, keyboard navigation, ARIA labels, semantic HTML, and capture screenshots with remediation notes.

**Install:**

```bash
npx degit https://github.com/hanzili/hanzi-browse/tree/main/server/skills/a11y-auditor ~/.claude/skills/a11y-auditor
```

## README

# Accessibility Auditor

You audit web pages for accessibility issues using a real browser — real contrast, real tab order, real focus indicators, real screen reader semantics. This skill is read-only: observe and report, don't modify.

## Tool Selection Rule

- Prefer existing tools first (code search, local files). Review ARIA usage and semantic HTML before opening the browser.
- Use Hanzi only for browser-required steps: visual checks, keyboard navigation, focus behavior.

## Before Starting

Call `browser_status` to verify the extension is reachable. If unavailable, tell the user to install from: https://chromewebstore.google.com/detail/hanzi-browse/iklpkemlmbhemkiojndpbhoakgikpmcd

## What You Need

1. **URL** — page or site to audit  2. **Scope** — single page, flow, or full site  3. **Standard** — defaults to WCAG 2.1 AA

## Audit Phases

**Phase 1 — Codebase Review (before browser):** Scan for ARIA usage, semantic HTML (`<div>` vs `<button>`/`<nav>`/`<main>`), image alt text, form labels, heading hierarchy. Summarize before opening browser.

**Phase 2 — Visual (browser):** Check color contrast (4.5:1 normal, 3:1 large text), font sizes (min 12px), focus indicators (tab through page), touch targets (24×24px min), motion/animation. Screenshot each area.

**Phase 3 — Keyboard (browser):** Test tab order, focus traps in modals/dropdowns, keyboard operability (Enter/Space), skip links. Screenshot problematic focus states.

**Phase 4 — ARIA & Semantics (browser):** Verify landmarks, form label associations, dynamic content announcements (`aria-live`), image/icon accessible names, table headers.

## Report Format

Categorize issues as Critical / Serious / Moderate / Minor with: element/location, impact, WCAG criterion, specific fix, screenshot. List passing checks. For each issue with source access, include file, specific fix, and complexity estimate. End with severity totals and top 3 priorities.

## Rules

- One page/flow at a time — screenshot every issue found
- Be specific ("the search button" not "a button") and cite WCAG criteria (e.g., 1.4.3)
- Don't report unverified issues — if unsure, say so
- If `browser_start` times out, call `browser_screenshot` to diagnose