Putting it all together: Accessible HTML5 Audio Player with Yahoo! Media Player Fallback

This is my third in a series of blog posts documenting my efforts to create an accessible audio player. In the first (Creating Your Own Accessible HTML5 Media Player), I tested the current state of accessibility in browsers that support HTML5 audio, and given the shortcomings I found, opted to create my own custom player. In the second related post, I documented my Quest for an Accessible Flash MP3 Player, which concluded with my creating a custom interface for the Yahoo! Media Player. The present post documents the end result: An accessible cross-browser media player, which uses the HTML5 <audio> element for browsers that support it, and the Yahoo! Media Player for those that don't. Browsers that support neither degrade to a list of links to MP3 files. I'm calling this creation Accessible Audio Player (AAP) 1.0.

Check out the AAP 1.0 Test Page to see it in action. I've also ported it to a WordPress plugin and added an additional P for Plugin (i.e., AAPP 1.0). You can see that in action too on my music blog, which also serves as the official AAP/AAPP home site.

Here's a list of AAP's accessibility features:

• Standard HTML player controls for all player functions, including play/pause, seek forward/back, volume up/down, and mute


• All controls are accessible using keyboard alone (no mouse is required).


• All controls are shown with an easy-to-see border when they have focus. This is true for keyboard and mouse users alike.


• All controls include title attributes which are announced by screen readers


• All controls are assigned "access keys" (keyboard shortcuts) so users can control the player from anywhere on the page


• Status and Now Playing are both marked up with ARIA role="alert", which is a cue for screen readers to announce the content of these areas any time it changes.


• The player itself is marked up with role="region", which enables screen reader users to jump to it quickly (JAWS supports region as if it were an ARIA landmark role, reached via the semi-colon key)


• The player also uses aria-label="Audio player", which provides a label to accompany the region for the benefit of users navigating by landmark (e.g., screen readers can inform their users of the "Audio player region" rather than simply announcing "region")

As always, I welcome your feedback! Let me know if you use it, like it, or have recommendations for improvements.