Audio player

How to design an audio player

WCAG Disabilities

An audio player must meet WCAG principles:

Transcript is available for pre-recorded audio only content (like a podcast) - 1.2.1 A

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

An audio player must work for people with disabilities:

Transcript is available for pre-recorded audio only content (like a podcast) - 1.2.1 A

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

Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 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

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
- Example: When is it okay for video and audio to autoplay?

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