accessibility

name	accessibility
description	WCAG 2.2 AA compliance, axe-core auditing, ARIA patterns, keyboard navigation. Use when auditing, writing, or reviewing web UI code for accessibility. Triggers: "accessibility", "a11y", "aria", "wcag", "axe", "screen reader".
category	web-ui

Skill: accessibility

What This Covers

Ensure all web UI code meets WCAG 2.2 AA standards. Zero axe-core violations required.

Checklist

• All interactive elements have aria-label
• Keyboard navigable with visible focus indicators
• Skip link present for main content
• Color contrast >= 4.5:1 (text), >= 3:1 (large text)
• Form inputs have associated <label> elements
• Images have alt text (or alt="" for decorative)
• Dynamic content uses aria-live regions
• Focus trapped in modals/dialogs

Commands

# Run axe-core audit
npx axe-core examples/secondhand-cinema/index.html

# Check ARIA usage
grep -r "aria-" src/ --include='*.html' --include='*.js'

Common Violations

Violation	Fix
Missing aria-label	Add aria-label to interactive elements
Missing alt	Add alt attribute to <img>
Low contrast	Use design tokens from DESIGN.md
Missing focus indicator	Add :focus-visible styles

Rules

• Never use color as the only way to convey information
• All form inputs must have visible labels (not placeholder-only)
• Skip link must be first focusable element
• Focus order must match visual order