accessibility-implementationlisted

# 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 | Implement