accessibility-implementation

# 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 - WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/ - ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/ - axe-core Rules: https://dequeuniversity.com/rules/axe/ - A11y Project Checklist: https://www.a11yproject.com/checklist/ For full ARIA widget patterns, keyboard navigation implementations, testing recipes, common fixes, and CSS utilities, see [REFERENCE.md](REFERENCE.md).