ARIA Skill
References
| Pattern | Reference |
|---|---|
| Keyboard Navigation | keyboard.md |
| Focus Management | focus.md |
| ARIA Roles & States | aria.md |
| React Patterns | react.md |
| Media Players | media.md |
| Anti-Patterns | anti-patterns.md |
Review
For structured accessibility reviews, load the review workflow:
| File | Contents |
|---|---|
| workflow.md | Review process and severity |
| checklist.md | Comprehensive checklist |
| templates.md | Issue and report formats |
Core Principles
- •Semantic HTML first — Use native elements before ARIA
- •Keyboard accessible — All interactions work without a mouse
- •Focus visible — Clear indication of current focus
- •Name, Role, Value — Every control has accessible name, correct role, exposed state
- •Announce changes — Dynamic content updates reach screen readers
Common Issues (Quick Fixes)
| Issue | Fix |
|---|---|
| Icon button no name | Add aria-label |
| Custom control no role | Add appropriate role attribute |
| Focus outline removed | Use focus-visible instead |
| Toggle state unclear | Use aria-pressed or aria-expanded |
| Dynamic content silent | Add live region with aria-live |
| Click-only handler | Add keydown for Enter/Space |
Anti-Patterns
❌ Never do these:
- •Remove focus outlines without replacement
- •Use
tabindex > 0 - •Rely solely on color to convey information
- •Auto-focus without user intent
- •Trap focus unintentionally
- •Use ARIA where native HTML suffices
- •Change
aria-labelto convey state (usearia-pressed)
Next Steps
- •For keyboard patterns: keyboard.md
- •For focus management: focus.md
- •For ARIA roles and states: aria.md
- •For React-specific patterns: react.md
- •For media player accessibility: media.md
- •For common mistakes: anti-patterns.md
- •For comprehensive checklist: checklist.md
Related Skills
| Need | Use |
|---|---|
| Building UI components | component skill |
| API design principles | api skill |
| Documentation | docs skill |