Video player

How to design a video player

WCAG Disabilities

A video player must meet WCAG principles:

Captions are available with pre-recorded video with audio content - 1.2.2 A
Transcript is available for pre-recorded video with audio content - 1.2.8 AAA
Descriptive transcript is available for pre-recorded video without audio content - 1.2.8 A
Audio description is available when important information cannot be understood from from the soundtrack alone - 1.2.3 A
Captions can resize up to 200% with no loss of information - 1.4.4 AA
Captions have a 4.5:1 minimum contrast ratio 1.4.3 AA

Control click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
Control click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
Control focus indication is visible (in some way) 2.4.7 AA
Control focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
Control focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

A video player must work for people with disabilities:

Control click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
Control click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
Control focus indication is visible (in some way) 2.4.7 AA
Control focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
Control focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

Name, role, state is documented 4.1.2 A
Descriptive transcript is available for pre-recorded video without audio content - 1.2.8 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Do not autoplay

Let people choose if they’re subjected to video content.

For people using a screen reader, it unexpectedly interferes with their ability to hear/control their machine
For people with cognitive differences, it can make it impossible to focus
For people with light sensitivity or vestibular disorders, some video content can cause illness

Media with audio must absolutely never autoplay
Just because a video contains controls to stop the video doesn’t mean it’s okay to autoplay
- Example: When is it okay for video and audio to autoplay?
Silent video can autoplay under these conditions:
- It must stop after 5 seconds
- The video features accessible controls
- Autoplay is disabled when device reduce motion settings are activated

It’s likely your developers will use an existing platform (like YouTube or Wistia) to deliver video content
Review the platform for accessibility with your developers
If the design calls for a custom video player, mirror annotations to follow conventions of existing platforms (like YouTube)