# Implement Accessible UI

> Implement accessible Video.js UI. Use for semantics, ARIA, keyboard interaction, focus, screen readers, captions, or live regions.

- Skill: `videojs/implement-accessible-ui` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add videojs/implement-accessible-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/videojs/implement-accessible-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: videojs (https://skillmd.com/u/videojs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/videojs/implement-accessible-ui

---


# Accessibility

Start from the rendered semantics and interaction contract. Prefer native HTML; add ARIA only where native semantics cannot express the control.

## Workflow

1. Read the component, its rendered output, interaction tests, and adjacent accessible controls.
2. Define expected name, role, value/state, keyboard behavior, focus behavior, and announcements.
3. 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`
4. Implement the smallest semantic change and add behavior-focused tests.
5. 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.