aria
Review and implement accessibility patterns for UI components following WAI-ARIA and WCAG 2.1. Use when auditing code for a11y issues, implementing accessible controls, adding ARIA attributes, fixing keyboard navigation, handling focus management, building screen reader support, or implementing media player accessibility. Triggers on "accessibility review", "a11y", "ARIA", "keyboard navigation", "screen reader", "focus management", "WCAG", "captions", "live region".
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。
查看来源 ↗使用指南技能说明
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 |
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-01-20
- 索引更新时间
- 2026-01-28
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!