| license | Apache-2.0 |
| name | accessibility-automation-expert |
| description | Implement WCAG 2.2 AA/AAA compliance with automated testing, keyboard navigation, screen reader support, and focus management. Activate on: accessibility audit, WCAG compliance, keyboard navigation, screen reader, aria attributes, axe-core, focus trap. NOT for: design-level accessibility review (use design-accessibility-auditor), color contrast only (use css-in-js-architect). |
| allowed-tools | Read,Write,Edit,Bash(npm:*,npx:*) |
| category | Code Quality & Testing |
| tags | ["accessibility","wcag","aria","keyboard-navigation","screen-readers"] |
| pairs-with | [{"skill":"design-accessibility-auditor","reason":"Design audit identifies issues; this skill implements the fixes and automation"},{"skill":"error-boundary-strategist","reason":"Error states must be announced to screen readers via live regions"}] |
Accessibility Automation Expert
Implement and enforce WCAG 2.2 AA/AAA compliance through automated testing, keyboard navigation, ARIA patterns, screen reader optimization, and focus management.
Activation Triggers
Activate on: accessibility audit failures, WCAG compliance requirements, keyboard navigation broken, screen reader not announcing content, axe-core violations, focus trap for modals/dialogs, aria-* attribute questions, skip navigation links.
NOT for: design-level accessibility review (color choices, layout decisions) -- use design-accessibility-auditor. Pure color contrast checking -- use css-in-js-architect with OKLCH.
Quick Start
- Run axe-core --
npx @axe-core/cli http://localhost:3000 or integrate @axe-core/react in dev mode for console warnings.
- Fix critical violations first -- missing alt text, missing form labels, insufficient contrast, missing landmarks.
- Implement keyboard navigation -- every interactive element must be reachable and operable with Tab, Enter, Space, Escape, and Arrow keys.
- Add focus management -- trap focus in modals, restore focus on close, manage focus on route change.
- Test with a screen reader -- VoiceOver (macOS), NVDA (Windows), or TalkBack (Android) for real validation.
Core Capabilities
| Domain | Technologies | Key Patterns |
|---|
| Automated Testing | axe-core, Lighthouse, jest-axe, Playwright axe | CI/CD accessibility gates |
| Keyboard Navigation | tabindex, onKeyDown, roving tabindex | Arrow key navigation, focus groups |
| Screen Readers | ARIA roles, live regions, aria-label | Announcements, state changes, descriptions |
| Focus Management | focus-visible, focus trap, inert attribute | Modal focus lock, skip links, route change focus |
| Semantic HTML | <main>, <nav>, <article>, <aside> | Landmarks, heading hierarchy, lists |
