Need player icon to work with screen readers for accessibility
-
I’m editing a website for a blind musician. We have some music tracks on one of the pages, and I need for the player icon to work with screen readers. Something like an image alt tag is what I’m looking for, so that the text isn’t visible on the screen, but will be read when the mouse hovers over the player We’re using the icon.sc_embed_player shortcode.
I’ve sort of been able to get it to work if I put some div code around the shortcode like this:
<div role="img" aria-label="Click to play">[sc_embed_player fileurl="**link to mp3 file**"]</div>But it makes the whole sc_player_container1 div active, so the screen reader says “Click to play” across the whole horizontal space, and not just when the mouse is on the player icon.
Help?
The page I need help with: [log in to see the link]
-
Thanks for your speedy answer!
Is there any way to update the plugin kinda like was done to get the expanded player with template 1? So an option could be added to the shortcode something like this:
[sc_embed_player fileurl="**link to mp3 file**" aria-label="**label text for screen readers**"]Then, the aria-label code I added in my previous question could be wrapped around the actual input button tag, or maybe even inserted into the input button tag. Is that possible?
Thanks!
Edited to add: I just went into my page with Developer Tools and found that if I edited the button code like this, the screen reader worked as I wanted it to:
<div class="sc_player_container1"><input role="img" aria-label="Click to play" type="button" id="btnplay_651cf16fb197b6.80784903" ....>If the plugin could be modified to allow adding the aria-label text within the shortcode, then have it add the above code to the web page, that would be a great solution for me (and others who want to add accessibility for blind/sight-impaired page visitors).
- The topic ‘Need player icon to work with screen readers for accessibility’ is closed to new replies.
