Accessible Media Players

Media players should remain usable for all users — playback controls must stay understandable and accessible.

01 — Purpose

Playback for everyone

Media players should remain usable for all users — playback controls should stay understandable and accessible.

Video and audio are increasingly central to product UI — tutorials, announcements, onboarding. Custom players often ship beautiful controls that fail keyboard users, screen reader users, and people who need captions or reduced motion.

See keyboard navigation and reduced motion strategy for related expectations.

02 — Principles

Controls that communicate state

Media controls should improve access — not create barriers.

  • captions — synchronised text for spoken content and meaningful sounds
  • transcripts — full text alternative for review and search
  • keyboard support — play, pause, seek, volume, captions toggle
  • visible controls — labelled buttons, not mystery icons alone

03 — Practice

Good media player accessibility

Support screen readers, keyboard users, reduced motion, and hearing-impaired users.

  • use native video and audio where possible — platform controls are a strong baseline
  • label custom controls — aria-label on play/pause, mute, fullscreen
  • expose current time and duration — not only visual scrubber position
  • do not autoplay with sound — respect user control and reduced motion
  • indicate play/pause/muted state with text or icons plus visible focus — not colour alone; see colour and contrast systems

04 — Avoid

Media barriers

Inaccessible players exclude users from content others take for granted.

  • autoplay audio — especially without easy mute or pause
  • inaccessible controls — div-based buttons with no keyboard or AT support
  • hidden pause buttons — controls that disappear until hover
  • colour-only state indication — red/green play state with no label
  • keyboard traps inside the player — focus cannot leave or operate controls

05 — Close

Test with keyboard and captions on

If you cannot operate the player eyes-free, it is not done.

Tab through every control. Toggle captions. Enable reduced motion. Verify seek and volume work without a pointer. Ship captions and transcripts for all non-decorative speech.

See semantic HTML, ARIA usage, and the accessibility QA checklist.