Product:
Question:
Accessibility is very important, but the buttons to play or pause are not seen by the screen readers. Is there any way to add the feature so the audio player is accessible for blind and vision impaired people?
Answer:
You could add HTML code in the webpage to create extra text controls so they can be read with screen readers. For example:
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').playAudio();return false;" accesskey="p">Play Audio</a>
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').pauseAudio();return false;" accesskey="a">Pause Playing</a>
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').stopAudio();return false;" accesskey="s">Stop Playing</a>
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').audioRun(-1);return false;" accesskey="n">Switch to Next</a>
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').audioRun(-2);return false;" accesskey="r">Switch to Previous</a>
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').rewind(10);return false;" accesskey="e">Rewind 10 Seconds</a>
<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').forward(10);return false;" accesskey="f">Forward 10 Seconds</a>
In the above code, there is a number 1 in the code snippet #wonderpluginaudio-1. It's the ID of the player. If your player has a different ID, change the number accordingly.
The above code also adds accesskey attribute to the text link so the command can be activated by keyboard shortcut keys.
For how does the accesskey work and how to access the shortcut key on different web browsers, please view https://www.w3schools.com/tags/att_global_accesskey.asp
A demo is as follows:
