How to design
an
audio player
An
audio player
must meet WCAG principles:
2
Operable
-
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
4
Robust
-
Name, role, state of controls is documented 4.1.2 A
-
Meets criteria across platforms, devices and viewports 4.0.0 AA
An
audio player
must work for people with disabilities:
✓ Deaf or hard of hearing
✓ Motor
-
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
✓ Blindness
-
Name, role, state of controls is documented 4.1.2 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.
Autoplay can be very disruptive or hurt people
- 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
Is it ever okay?
- Media with audio must absolutely never autoplay
- Just because an audio player contains controls to stop the video doesn’t mean it’s okay to autoplay
Annotations for audio
- It’s likely your developers will use an existing platform to deliver audio content
- Review the platform for accessibility with your developers
- If the design calls for a custom audio player, mirror annotations to follow conventions of existing platforms