Skill

Accessibility audits, automated.

One command. Your AI agent opens your site in a real browser, checks contrast, keyboard navigation, ARIA labels, and semantic HTML against WCAG 2.1 AA. Screenshots every issue it finds.

$ npx hanzi-browse setup
$ /a11y-auditor

$ npx hanzi-browse setup
$ hanzi-browser start "audit accessibility" --skill a11y-auditor --url https://your-site.com

Demo video

Sample audit report

Critical

Search button has no accessible name — screen readers announce it as "button".

WCAG 4.1.2 — Name, Role, Value

Serious

Body text contrast ratio is 3.2:1 — requires 4.5:1 for normal text.

WCAG 1.4.3 — Contrast (Minimum)

Serious

Modal dialog traps keyboard focus — no way to close with Escape key.

WCAG 2.1.2 — No Keyboard Trap

Moderate

Navigation uses div elements instead of nav landmark — breaks screen reader navigation.

WCAG 1.3.1 — Info and Relationships

What it checks

Real browser. Real issues.

🎨 Color contrast

⌨️ Keyboard navigation

🏷️ ARIA labels

📐 Semantic HTML

🔍 Focus indicators

📏 Font sizes

👆 Touch targets

🔗 Skip links

📊 Heading hierarchy

🖼️ Alt text

How it works

Four phases. Full coverage.

Codebase review

Scans your source for ARIA usage, semantic HTML, image alt text, form labels, and heading hierarchy — before opening the browser.

Visual checks

Opens the page in your real Chrome. Checks color contrast ratios, font sizes, focus indicators, touch target sizes, and animations. Screenshots every issue.

Keyboard testing

Tabs through the entire page. Tests focus order, keyboard traps in modals, Enter/Space operability, and skip links. Screenshots problematic states.

ARIA & semantics

Verifies landmarks, form label associations, live regions for dynamic content, accessible names on icons, and table headers.

Structured report

Every issue gets a severity level, the specific element, WCAG criterion, and a concrete fix. Includes file paths and complexity estimates when source is available.

Prioritized action plan

Ends with severity totals and the top 3 priorities to fix first. No guessing — every finding is verified in the real browser.

Why this is different

Not another Lighthouse wrapper.

Your real browser

Runs in your actual Chrome — real contrast, real tab order, real focus indicators. Not a synthetic test environment.

AI-powered understanding

Understands context. Knows that a "close" icon needs an accessible name, that a div acting as a button needs a role. Not just rule-matching.

Code + browser

Reviews your source code first, then verifies in the browser. Gives you the exact file, line, and fix — not just a generic recommendation.

Get started

One command. Start auditing.

npx hanzi-browse setup