Video/audio player

How to test a video/audio player

Gherkin Condensed

Given that I am on a page with a video/audio player

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a control I SEE focus is strongly visually indicated
Then when I use the spacebar and/or enter key to activate the button I SEE the intended action occurs
Then when I use the arrow keys (left/right) I SEE the media fast forwards/reverses

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a control
- I HEAR The video control purpose is clear (play, pause, stop)
- I HEAR Video controls identify as button, switch etc.
- I HEAR Audio content never autoplays
- I HEAR It expresses it state if applicable (pressed, expanded, disabled)
Then when I use the spacebar and/or enter key to activate the button I HEAR the intended action occurs
Then when I use the arrow keys (left/right) I HEAR the media fast forwards/reverses

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to move focus to a video control
- I HEAR The video control purpose is clear (play, pause, stop)
- I HEAR Video controls identify as button, switch etc.
- I HEAR Audio content never autoplays
- I HEAR It expresses it state if applicable (pressed, expanded, disabled)
Then when I doubletap with the video control in focus I HEAR the intended action occurs

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to each control
Spacebar	Activates the control button
Enter	Activates the control button
Arrow-keys	Fast forward/reverse media

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus visibly moves to each control
Doubletap	Activates the control

3 Screenreader output for all devices

Reads	I hear
Name	The video control purpose is clear (play, pause, stop)
Role	Video controls identify as button, switch etc.
Group	Audio content never autoplays
State	It expresses it state if applicable (pressed, expanded, disabled)

Autoplay can be very disruptive or hurt people

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

Is it ever okay?

Media with audio must not 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

Code examples

A heading can serve as a name

<h2>The Princess Bride</h2>
<video-embed>
</video-embed>

An `aria-label="Media title"` can also be used

<video-embed aria-label="The Princess Bride"></video-embed>

Developer notes

Name

A heading (<h1> <h2> <h3>) above the media can serve as a name
aria-label="Media title" on a wrapper element can also be used

Role

Controls must identify as buttons, switches, etc.
There are accessible video embed options available

Group

Captions are mandatory for spoken audio content
- Do not rely on auto-captioning
- This may require the manual creation of a VTT file
- There are many options online that will create these for you
Transcripts should be HTML based (not a PDF)

State

Controls must identify their state (pressed, checked, selected, value, etc)

Focus

Focus must be visible

Video/audio player

How to test a video/audio player

1 Keyboard for mobile & desktop

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output for all devices

Autoplay can be very disruptive or hurt people

Is it ever okay?

Code examples

A heading can serve as a name

An aria-label="Media title" can also be used

Developer notes

Name

Role

Group

State

Focus

An `aria-label="Media title"` can also be used