Accessible audio player

[Sanghapal]

The current audio player on the site is enabled using the Media Element gem (http://mediaelementjs.com/). This player allows playback of audio files. One is supposed to be able to carry out the following actions on it:

1. Play/Pause
2. Stop
3. Fast-forward and rewind
4. Adjust volume.
   Although the functionality is available to sighted user, the same can't be carried out by screen reader users. Only play/pause button is focusable by keyboard and screen reader. The player needs to be accessible providing all the media player functionalities as it does for its visual perception. For a player to be accessible, screen reader user should be able to carry out all the above 4 operations and not just one.

To achieve this, following steps are involved:

1. Keep visible player as it is for sighted users.
2. Bring up another Accessible UI with play/pause, stop, rewind, forward, decrease volume and increase volume buttons
3. Keep the Accessible UI hidden for sighted users.
4. Keep the visible player hidden for screen reader user.

How to go about it?

1. Get the Accessible UI for player in place ensuring that it makes necessary API calls from Media Element gem.
   Here, we need to come up with another set of buttons namely
2. Play/Pause (toggle button)
3. Stop
4. Increase volume
5. Decrease volume
6. Rewind (jump by5 seconds)
7. Fast-forward (jump by5 seconds)
   We should ensure that all the above buttons carry out the corresponding operations. One need not bother about the visual aspect or design of these buttons as they are going to be hidden for the sighted user anyways.
8. Now, with both current player and the Accessible UI player in place, enable Accessibility.
   Here, using WCAG and WAI-ARIA standards, accessibility needs to be ensured so that
   a. current player stays visible to sighted user but doesn't appear focusable for screen reader user
   b. Accessible player becomes hidden for sighted users but comes within focus for screen reader users.