# Accessibility Audit > WCAG 2.2 AA audit — semantic HTML, axe-core + eslint-plugin-jsx-a11y, keyboard navigation, ARIA, color contrast, target size, focus-not-obscured, prefers-reduced-motion. Use when completing a new component, after design system changes, or before shipping. Not for form label/aria-describedby patterns (use form-ux) or baking a11y into shared components from the start (use design-system-construction). - Skill: `jaykim88/accessibility-audit` (Agent Skill) - Install (CLI): `npx skillmds@latest add jaykim88/accessibility-audit` - Raw SKILL.md: https://api.skillmd.com/api/skills/jaykim88/accessibility-audit/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - License: MIT - Author: JayKim88 (https://skillmd.com/u/jaykim88) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/jaykim88/accessibility-audit --- # Accessibility Audit ## Purpose Meet WCAG 2.2 AA (the current W3C standard — 2.2 adds target size, dragging alternatives, and focus-not-obscured on top of 2.1). Automated tools catch ~57% of issues (Deque 2021 study) — combine static lint + axe-core with manual keyboard testing and screen reader sanity checks. **Universal** — WCAG 2.2 AA, axe-core, semantic HTML rules, and keyboard navigation requirements apply to every web framework. Only the syntax for ARIA attributes and motion-reduce variants differs by template language. ## Procedure 1. **Semantic HTML — replace generic with specific** - `

` → ` ``` **Focus indicator removal** ```css /* ❌ Strips focus indicator without replacement — keyboard users lost */ *:focus { outline: none; } /* ✅ Custom focus ring with sufficient contrast */ *:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } ``` ## Anti-patterns | ❌ Anti-pattern | ✅ Correct | |---|---| | `

` with no alt | ` Company Name logo

` or `alt=""` for decorative | ## Severity tiers | Tier | Examples | Action SLA | |---|---|---| | **Critical** | Keyboard-trap (modal can't be closed via keyboard); image with no alt blocking core flow; color contrast < 3:1 for body text; icon-only control with no accessible name on a core action | Block release; fix immediately | | **Major** | Missing focus indicator on interactive elements; heading-skip violations; missing aria-describedby on form errors; meaning conveyed by color alone (1.4.1); no skip link; focused element obscured by sticky header (2.4.11) | Fix this sprint | | **Minor** | Decorative images missing explicit `alt=""`; pointer target < 24px (2.5.8); missing ``; non-critical aria-label improvements | Schedule within 2 sprints | ## Completion Criteria - [ ] axe-core violations = 0 (WCAG 2.2 AA tags); `eslint-plugin-jsx-a11y` clean - [ ] Lighthouse Accessibility ≥ 95 - [ ] Full keyboard navigation tested - [ ] No `outline: none` without replacement focus indicator; focus not obscured by sticky UI (2.4.11) - [ ] Meaning never conveyed by color alone (1.4.1) - [ ] Skip link present; `` set - [ ] Pointer targets ≥ 24px (2.5.8); usable at 200% zoom / 320px reflow - [ ] `prefers-reduced-motion` honored - [ ] Color contrast verified in light and dark mode - [ ] All Critical findings fixed; all Major findings scheduled ## Stop & Ask (AI must pause for user approval) - **Before bulk-renaming semantic markup** across 5+ components (e.g., `

` → `