Accessibility Implementation
Technical implementation of WCAG guidelines, ARIA patterns, and assistive technology support.
When to Use This Skill
| Use this skill when... |
Use design-tokens instead when... |
| Implementing WCAG 2.1/2.2 success criteria in code |
Setting up CSS custom properties or theme systems |
| Adding ARIA roles, states, or live regions |
Defining semantic colour tokens used by themes |
| Wiring keyboard navigation, focus traps, or skip links |
Organizing primitive/semantic/component token tiers |
| Auditing components with axe-core, jest-axe, or Playwright |
Implementing light/dark mode token overrides |
Core Expertise
- WCAG Compliance: Implementing WCAG 2.1/2.2 success criteria in code
- ARIA Patterns: Correct usage of roles, states, and properties
- Keyboard Navigation: Focus management, key handlers, logical tab order
- Screen Readers: Content structure, announcements, live regions
- Testing: Automated and manual accessibility testing
WCAG Quick Reference
Level A (Must Have)
| Criterion |
Implementation |
| 1.1.1 Non-text Content |
alt for images, labels for inputs |
| 1.3.1 Info and Relationships |
Semantic HTML, ARIA relationships |
| 2.1.1 Keyboard |
All interactive elements keyboard accessible |
| 2.4.1 Bypass Blocks |
Skip links, landmarks |
| 4.1.2 Name, Role, Value |
ARIA labels, roles for custom widgets |
Level AA (Should Have)
| Criterion |
Implementation |
| 1.4.3 Contrast (Minimum) |
4.5:1 text, 3:1 large text |
| 1.4.11 Non-text Contrast |
3:1 for UI components |
| 2.4.6 Headings and Labels |
Descriptive, hierarchical headings |
| 2.4.7 Focus Visible |
Visible focus indicator (2px+ outline) |
Best Practices
Semantic HTML First
Use native HTML elements before ARIA. A <button> is better than <div role="button">.
Don't Override Default Behavior
Native elements have built-in accessibility. Don't break it with JavaScript.
Test with Real Users
Automated tools catch ~30% of issues. Manual testing with assistive technology is essential.
Provide Multiple Ways
Offer keyboard, mouse, and touch alternatives for all interactions.
References
For full ARIA widget patterns, keyboard navigation implementations, testing recipes, common fixes, and CSS utilities, see REFERENCE.md.
