aria

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

1. Semantic HTML first — Use native elements before ARIA
2. Keyboard accessible — All interactions work without a mouse
3. Focus visible — Clear indication of current focus
4. Name, Role, Value — Every control has accessible name, correct role, exposed state
5. 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-label to convey state (use aria-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