Agent Skills
› videojs/video.js
› implement-accessible-ui
implement-accessible-ui
GitHub实现符合无障碍标准的 Video.js UI，涵盖语义化、ARIA、键盘交互、焦点管理及屏幕阅读器支持，确保遵循最佳实践并验证兼容性。
触发场景
需要实现或修复前端组件的无障碍访问功能
涉及 ARIA 属性、键盘导航或焦点管理的开发任务
安装
npx skills add videojs/video.js --skill implement-accessible-ui -g -y
SKILL.md
Frontmatter
{
"name": "implement-accessible-ui",
"description": "Implement accessible Video.js UI. Use for semantics, ARIA, keyboard interaction, focus, screen readers, captions, or live regions."
}
Accessibility
Start from the rendered semantics and interaction contract. Prefer native HTML; add ARIA only where native semantics cannot express the control.
Workflow
- Read the component, its rendered output, interaction tests, and adjacent accessible controls.
- Define expected name, role, value/state, keyboard behavior, focus behavior, and announcements.
- Load only the applicable reference:
- Keyboard:
references/keyboard.md - Focus:
references/focus.md - Roles and states:
references/aria.md - React-specific implementation:
references/react.md - Media-player behavior:
references/media.md - Suspected smell:
references/anti-patterns.md
- Keyboard:
- Implement the smallest semantic change and add behavior-focused tests.
- Verify keyboard and focus behavior in a browser when interaction changed.
Never remove visible focus without a replacement, use positive tabindex, convey meaning only with color, or use a changing label where a state attribute is the correct contract.
Example
Input: “Make the custom volume slider keyboard accessible.”
Output: Correct native or ARIA semantics, keyboard and focus behavior, announcements, focused tests, and browser verification.
版本历史
- 8a0a3d8 当前 2026-10-20 08:03
