Accessibility Audit Command

Command

/accessibility-audit

Description

Performs a thorough WCAG 2.1 (Level AA) compliance check on specified components or pages. Identifies accessibility barriers and provides specific remediation steps with code examples.

Behavior

1. Scan the specified files or directory for UI components
2. Analyze each component against WCAG 2.1 AA criteria:
   • Perceivable: Text alternatives, captions, color contrast (4.5:1 minimum), content reflow
   • Operable: Keyboard access, focus indicators, no keyboard traps, sufficient time
   • Understandable: Error identification, labels, predictable navigation
   • Robust: Valid HTML, ARIA attributes, name/role/value
3. Report findings organized by severity and WCAG criterion
4. Suggest specific code fixes for each issue

Checklist

Images & Media

• All <img> tags have meaningful alt attributes
• Decorative images use alt="" or role="presentation"
• Videos have captions/transcripts
• No information conveyed through color alone

Interactive Elements

• All interactive elements are keyboard accessible
• Focus order follows logical reading order
• Focus indicators are visible (no outline: none without replacement)
• Custom components have correct ARIA roles and states
• Buttons use <button>, not <div onClick>
• Form inputs have associated <label> elements

Structure

• Heading hierarchy is logical (h1 > h2 > h3, no skips)
• Landmark regions used (<main>, <nav>, <aside>)
• Lists use <ul>/<ol>, not styled <div>s
• Tables have <th> headers and scope attributes

Dynamic Content

• Loading states announced to screen readers (aria-live)
• Modals trap focus and return focus on close
• Error messages linked to inputs via aria-describedby
• Toast notifications use role="alert"

Output Format

Copy
## Accessibility Audit: [Component/Page]

### Critical (Must Fix)
| Issue | File:Line | WCAG | Fix |
|-------|-----------|------|-----|
| Missing alt text | Card.tsx:23 | 1.1.1 | Add descriptive alt |
| No keyboard access | Dropdown.tsx:45 | 2.1.1 | Add keyDown handler |

### Serious (Should Fix)
| Issue | File:Line | WCAG | Fix |
|-------|-----------|------|-----|
| Low contrast: 3.2:1 | Button.tsx:12 | 1.4.3 | Darken text to #333 |

### Minor (Consider)
| Issue | File:Line | WCAG | Fix |
|-------|-----------|------|-----|
| Missing lang attr | Layout.tsx:1 | 3.1.1 | Add lang="en" to html |

Score: 72/100 (Level AA)

Examples

Copy
# Audit a specific component
/accessibility-audit src/components/LoginForm.tsx

# Audit an entire page
/accessibility-audit src/pages/checkout/

# Audit with specific WCAG level
/accessibility-audit src/components/ --level AAA