Skip to content

Instantly share code, notes, and snippets.

@marcysutton

marcysutton/the-deal.md

Last active May 3, 2016 00:07
Show Gist options
  • Save marcysutton/74172563b9477f4b027be9fb49b2e101 to your computer and use it in GitHub Desktop.
Save marcysutton/74172563b9477f4b027be9fb49b2e101 to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility Support in HTML5 Audio
Raw
the-deal.md

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
Copy link
Author

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