Stats
Actions
Tags
From a11y-audit
WCAG 2.1 AA/AAA accessibility audit for web components, pages, and apps. Detects contrast failures, missing ARIA labels, keyboard trap issues, focus order problems, and screen-reader gotchas. Use when user wants to audit accessibility, fix a11y warnings, prepare for compliance review, or validate UI against WCAG standards.
How this skill is triggered — by the user, by Claude, or both
Slash command
/a11y-audit:a11y-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
WCAG 2.1 AA/AAA audit — find and fix accessibility issues before they block users or compliance.
WCAG 2.1 AA/AAA audit — find and fix accessibility issues before they block users or compliance.
/a11y-audit — full page audit (reads current UI files)
/a11y-audit --component Button — audit single component
/a11y-audit --wcag AAA — strict AAA audit
/a11y-audit --fix — audit + auto-apply safe fixes
/a11y-audit --report — generate HTML accessibility report
<img>, <svg>, <canvas> have meaningful alt / aria-label<html lang="..."> present and correct<label> or aria-labelledbyrole="alert" or aria-liveClaude will:
--fix: apply non-breaking fixes (add alt="", aria-label, lang, focus styles)A11Y AUDIT REPORT — 2026-06-14
================================
SCORE: 68/100 WCAG 2.1 AA
CRITICAL (blocks WCAG compliance)
[C1] src/Button.tsx:12 — Interactive element has no accessible name
→ Add aria-label="Close dialog" or visible text content
[C2] src/Card.tsx:8 — Contrast ratio 2.1:1 (required: 4.5:1)
→ Change text from #9ca3af → #6b7280 (ratio 4.6:1)
HIGH (fails WCAG AA)
[H1] src/Modal.tsx:45 — No focus trap in modal
→ Use focus-trap-react or implement manual Tab/Shift+Tab containment
[H2] src/Form.tsx:23 — Input has no associated label
→ Add <label htmlFor="email"> or aria-labelledby
MEDIUM
[M1] src/Nav.tsx:5 — Missing skip-to-content link
→ Add <a href="#main" className="skip-link">Skip to content</a>
// ❌
<img src="/hero.png" />
// ✅ decorative
<img src="/hero.png" alt="" />
// ✅ meaningful
<img src="/avatar.png" alt="Profile photo of Jane Doe" />
/* ❌ never do this */
:focus { outline: none; }
/* ✅ */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
// ❌ toast appears but screen readers don't announce
<Toast>{message}</Toast>
// ✅
<div role="alert" aria-live="polite">{message}</div>
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub andersonlimahw/lemon-ai-hub --plugin a11y-audit