Is it possible to use an image as a link to an audio file - and have the audio play while still on the page with the image? Currently when the image is clicked the player replaces the initial image/link page. Here’s the code I’m using.
How are visitors to your website going to know that they can hear audio if they click on the image?
You could place an HTML audio player (with controls) just under the image and the with same width as the image. If the width of the player is insufficient to display the normal controls, some controls will automatically not be displayed. Note that browsers display very different styles of audio player (I don’t like the player in Chrome). If you use an HTML player, there is no need to add your own code to control the starting and stopping.
I illustrate these two options below but there are other options:
Some of our users have trouble with technology, to be nice. We’ve had other similar audio messages in the past, with the player displayed - we’ve gotten messages that it didn’t work for me, nothing happens when it’s clicked, etc… a little support from us generally revealed user error or lack of technical savvy. We were hoping to avoid all of that with a simple image link to audio. Which is do-able. The icing here would be if the image was to remain visible. Here’s a link to the beta page at the moment. I think I will add a player below the image as well. https://ktbb.com/afterrush/failla.php
(current audio is for test purposes only)
My comment above that audio element controls are not really accessible was based on this from MDN (link)
However, there are problems with these controls:
They are not keyboard-accessible in most browsers, i.e. you can’t tab between the controls inside the native player. Opera and Chrome provide this to some degree, but it still isn’t ideal.
Perhaps that information is out of date because I find I can tab between controls. Also the arrow keys work for volume and forward/rewind.
I think my Codepen above can be made accessible for keyboard users (without displaying player controls) by putting the <svg> elements in <button> elements so keyboard users can tab to them.
How do keyboard users know they have to press keyboard key “K”?