← Back to Playground

Accessibility (a11y) Showcase

WCAG 2.1 AA Compliant: Full keyboard navigation, visible focus rings, ARIA live regions, and semantic slider roles.

Screen Reader Live Announcements

This box mirrors what Assistive Technology (NVDA, JAWS, VoiceOver) announces via the aria-live="polite" region:

Player ready. Press Tab to navigate controls.

WCAG 2.1 AA Checklist

  • ✓ 1.4.3 Contrast (Minimum): High contrast ratios > 4.5:1 for UI text and 3:1 for control buttons.
  • ✓ 2.1.1 Keyboard Accessible: All controls operable via Tab, Space, Enter, Arrows.
  • ✓ 2.4.7 Focus Visible: High-contrast focus-visible outline ring with 2px offset.
  • ✓ 2.3.3 Animation from Interactions: Honors prefers-reduced-motion.
  • ✓ 2.5.5 Target Size: Interactive targets have minimum 36×36px to 44×44px bounding area.

Keyboard Shortcut Reference

Key Action Behavior
Space or K Play / Pause Toggles video playback
← / → Seek ±5s Hold Shift for ±10s
↑ / ↓ Volume ±10% Adjusts volume level
M Mute / Unmute Toggles audio mute state
F Fullscreen Toggles browser fullscreen mode
P Picture-in-Picture Toggles floating PiP window
C Captions Toggles subtitle tracks
0 – 9 Seek to percentage Jumps to 0% through 90%
? Help Modal Opens shortcuts cheat sheet modal