← ClaudeAtlas

accessibility-auditlisted

Audit UI code for WCAG 2.1 AA compliance — color contrast, keyboard navigation, ARIA roles, focus management, and screen reader compatibility. Use when the user asks to "check accessibility", "make this accessible", "WCAG audit", "a11y review", or before marking any public-facing UI as done. Do NOT use for quick pre-delivery checks — use output-enforcement for that. This skill goes deeper: it covers ARIA semantics, focus order, and live regions.
phamlongh230-lgtm/yamtam-engine · ★ 3 · AI & Automation · score 65
Install: claude install-skill phamlongh230-lgtm/yamtam-engine
<!-- Adapted from vercel-labs/agent-skills (MIT) — accessibility audit concept and WCAG rule coverage. All content written original for YAMTAM. Rule descriptions derived from WCAG 2.1 public spec (W3C). --> ## When to Use - Use when: user explicitly asks for an accessibility review - Use when: UI is public-facing and will be used by real users - Use when: product serves regulated industries (healthcare, gov, finance — a11y is often legally required) - Use when: `output-enforcement` L3 check flagged a contrast or label issue and you need the full fix - Do NOT use for quick pre-delivery sweeps — use `output-enforcement` L3 baseline instead - Do NOT use when: there is no UI code to review ## Pre-conditions - [ ] UI code (HTML/JSX/TSX/CSS) is available to read - [ ] Target WCAG level confirmed (default: AA — upgrade to AAA if user requests) ## How It Works 1. **Run the 5-category audit** (see checklist below) 2. **Score each item** PASS / FAIL / ESTIMATED / N/A 3. **For each FAIL**: show the specific line/element, the rule violated, and the fix 4. **Summary**: WCAG AA level reached or not, list of blockers ## Audit Checklist ### Category 1 — Color & Contrast (WCAG 1.4) ``` □ Normal text (< 18pt): contrast ratio ≥ 4.5:1 □ Large text (≥ 18pt or ≥ 14pt bold): contrast ratio ≥ 3:1 □ UI components and icons: contrast ≥ 3:1 against adjacent color □ Focus indicator: contrast ≥ 3:1 against both sides of the boundary □ Information NOT conveyed by color alone (e.g. error state