Accessibility Review

Review a component or page for WCAG 2.1 compliance, covering contrast, keyboard navigation, screen readers, and motion.

All Prompts

When to Use

  • Before shipping a new component or page
  • During design reviews to catch issues early
  • As part of a quarterly accessibility audit
  • When retrofitting accessibility into existing components

The Prompt

Review this component for WCAG 2.1 AA compliance. Be thorough and specific.

Check:
1. **Color contrast** — Do all text/background pairs meet 4.5:1 (normal text) and 3:1 (large text)? Check every state: default, hover, active, disabled, focus, error.
2. **Keyboard navigation** — Can every interactive element be reached via Tab? Is the focus order logical? Are there keyboard traps?
3. **Screen readers** — Are ARIA roles, labels, and live regions correct? Will state changes be announced?
4. **Focus indicators** — Is focus visible in all states? Does it meet the 3:1 contrast requirement against adjacent colors?
5. **Touch targets** — Are interactive areas at least 44x44px?
6. **Motion** — Does the component respect prefers-reduced-motion? Are animations under 5 seconds?
7. **Content** — Are error messages descriptive? Are form labels associated? Is alt text meaningful?

For each issue, provide:
- The WCAG criterion number and level (e.g., 1.4.3 AA)
- What's wrong
- How to fix it
- Severity: Critical / Major / Minor

Here's the component:
[paste code or describe the component]

Example Output

## Accessibility Review: Login Form

### Critical (2)

1. **Error message not associated with input** — WCAG 1.3.1 (A)
   The error text below the email field is a plain <span>. Screen readers
   won't connect it to the input.
   Fix: Add aria-describedby on the input pointing to the error span's id.

2. **Disabled submit button has no visible focus ring** — WCAG 2.4.7 (AA)
   When Tab reaches the disabled button, there is no visual indicator.
   Fix: Add a focus style even on disabled buttons, or remove them from
   tab order with tabindex="-1".

### Major (1)

1. **Password field contrast in error state** — WCAG 1.4.3 (AA)
   Red error border (#E53E3E) on white background passes, but the
   placeholder text (#A0AEC0) on white is only 2.7:1.
   Fix: Darken placeholder to at least #6B7280 (4.6:1).

### Minor (1)

1. **Loading spinner has no aria-live announcement** — WCAG 4.1.3 (AA)
   When the form submits, a spinner appears but screen readers are silent.
   Fix: Add aria-live="polite" with text like "Signing in, please wait."