Skip to content

Instantly share code, notes, and snippets.

@marcysutton

marcysutton/the-deal.md

Last active May 3, 2016
Embed
What would you like to do?
Accessibility Support in HTML5 Audio

Here are a few things I found in testing HTML5 Audio in various browsers and screen readers:

  • The controls do work in Safari and Voiceover, they just require more key commands than "space". You have to press Control + Option + Space to toggle playback.
  • I had trouble toggling playback in Safari and Chrome with just the keyboard.
  • Mobile Safari and Voiceover worked fine.
  • Firefox and Edge both work from the keyboard alone
  • Firefox and JAWS required two taps of the space key.
  • Edge and JAWS did not work at all–probably because of immature accessibility support in the new browser.
  • Labeling the audio element with an aria-label attribute would help to give the track a title. It won't work in every browser due to accessible name calculation specs, but it's better than none.

Test file: http://codepen.io/marcysutton/pen/MyzVWz/?editors=1000

Bugs may be filed with browsers when I confirm these issues on other machines. This Gist was a collection of the pain I noted making a native audio element accessible. My recommendation was to add custom controls because they can be more consistently supported at this time.

@marcysutton

This comment has been minimized.

Copy link
Owner Author

@marcysutton marcysutton commented May 2, 2016

Note: the Voiceover and Safari key command comment is in response to an internal bug filed by someone else.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.