/accessibility-review

name: accessibility-review
description: Use to audit a design or page for WCAG 2.1 AA — contrast, keyboard, focus, labels, touch targets, screen reader behavior.

Accessibility Review

Catch the issues that block users before they reach engineering. Most accessibility failures are predictable from the design alone.

WCAG 2.1 AA quick reference

**Perceivable**

• 1.1.1 — Non-text content has alt text.
• 1.3.1 — Structure and meaning conveyed semantically, not visually.
• 1.4.3 — Contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text (18px+).
• 1.4.11 — Non-text contrast ≥ 3:1 for UI components and meaningful graphics.

**Operable**

• 2.1.1 — All functionality available by keyboard.
• 2.4.3 — Logical focus order matches the visible reading order.
• 2.4.7 — Focus indicator is visible and not hidden by `outline: none`.
• 2.5.5 — Touch target ≥ 44×44 CSS pixels.

**Understandable**

• 3.2.1 — Predictable on focus; no unexpected context changes.
• 3.3.1 — Errors are identified clearly and tied to the failing field.
• 3.3.2 — Inputs have visible labels or instructions, not just placeholders.

**Robust**

• 4.1.2 — Every interactive control has a name, role, and value exposed to assistive tech.

Common issues to look for first

1. Insufficient color contrast — especially gray-on-white body text and brand-color CTAs. 2. Form fields with placeholder-as-label (placeholder disappears on focus). 3. Click targets under 44×44. 4. Focus indicators removed in CSS without a replacement. 5. Modals that trap focus incorrectly (or don't trap at all). 6. Color used as the only signal (red text alone for errors, green-only success). 7. Icon-only buttons with no accessible name. 8. Auto-playing media with no pause control.

Testing approach

• Automated contrast and structure scan first (catches the easy wins).
• Walk the screen by keyboard only. Tab, Shift+Tab, Enter, Space, Escape, arrow keys.
• Screen reader pass (VoiceOver or NVDA). Listen to how each element announces.
• Zoom to 200%. Does the layout break? Does anything become unreachable?

Output

• **Summary** — total issues, count by severity (critical / major / minor).
• **Findings** — grouped by WCAG principle (Perceivable / Operable / Understandable / Robust). Each finding: element, issue, WCAG criterion, severity, recommended fix.
• **Color contrast check** — table of body text, secondary text, UI elements, with foreground/background/ratio/pass.
• **Keyboard walkthrough** — note any element that cannot be reached, activated, or escaped via keyboard.
• **Priority fixes** — top three, each named with who it blocks and what it unblocks.

Anti-patterns

• Treating accessibility as a final polish pass instead of a design constraint.
• Citing the WCAG number without explaining the user impact.
• Generic "improve contrast" — name the specific element, the current ratio, the required ratio.
• Ignoring screen reader experience because the visual passes.