Accessible Semantic HTML5 Glossary
Quick follow up to my last post regarding semantic glossaries: dictionary.com uses audio examples to express correct pronunciation. While I don’t think this practice is necessary for most glossaries, I can’t see how it would hurt any of them. If anything, you’d simply be adding accessibility coverage, which should always be a goal for a site, even if it’s in the long-run. Plus, in a very miniscule way, you’re adding more content, so it seemingly should help with seo. So, simple enough, right? Just add audio into the ruby element and we’re good, right? Not so fast, I quickly found out that cross-browser styling of audio isn’t very well documented, even though I’m positive it’s doable.
For starters, I grabbed the speaker icon via the Noun Project to show users that there is audio content to hear. It is an svg and I had planned on adding cross-browser compatibility for it, however considering the audio roadblock I hit, I decided to just publish this now and I’ll work on that once I get it to play in all browsers. Then I grabbed an audio file, I don’t have a microphone, so I couldn’t create the actual word pronunciation which is lame, but I figured this is just for demonstration purposes only. I used media.io to generate .ogg and .wav files for (what I thought was) cross-browser compatibility. And I thought I was good to go, but clearly this was not the case.
Fallback via button
Once I ran into the audio styling roadblock, I lamely wrapped it up into a button element. I thought for sure this would be the silver bullet. Negative, Ghost Rider. I hooked the button into the audio element‘s onclick event handler and provided 3 separate audio formats (.mp3 for Webkit, .ogg for Gecko and .wav for Presto) via source element. Here’s the markup and JavaScript:
Markup
<button type="button" id="play">
<audio id="audiosrc">
<source src="http://dev.bowdenweb.com/a/m/a/clipping_link-finds-a-secret-13908.ogg" />
<source src="http://dev.bowdenweb.com/a/m/a/clipping_link-finds-a-secret-13908.mp3" />
<source src="http://dev.bowdenweb.com/a/m/a/clipping_link-finds-a-secret-13908.wav" />
</audio>
</button>
JavaScript
window.onload = function() {
var audio = document.getElementById("audiosrc");
var play = document.getElementById("play");
play.addEventListener('click', function(){
audio.play();
}, false);
}
Note: this doesn’t work in Opera 11.5, which is baffling to me. From what I can understand, Opera supports .ogg, but once I saw it not working, I actually created the .wav file specifically for Opera, and still no bueno. After struggling with this for a few hours, I’ve given up at the moment, so I’m quite positive that this won’t work in ie without testing. I’ll be sure to follow up on this as soon as I find more out and/or find a more elegant cross-browser solution. You can check out the Accessible Semantic Glossary demo here.
