WebAIM - Web Accessibility In Mind

E-mail List Archives

Programmatically binding an audio file with its text equivalent

for

From: Denis Boudreau
Date: Apr 26, 2014 12:23PM

Hi list,

I was writing my latest daily a11yTip [1] and ran into a problem while I was playing with the concept of programmatically binding an audio file with its text equivalent (in this case, a transcript). Simply put, I can’t seem to find a truly satisfying way solution to do so.

I’d like the presence of the transcript to be announced as the screen reader user tabs to the audio file itself, not just a link adjacent to it. I thought something as simple as using aria-describedby and aria-label would do the trick and work nicely across the most popular ATs (jaws, nvda and voiceover), but the results are disappointing - VoiceOver and Jaws convey the value of the transcript ID as I expected, though VoiceOver does not announce the aria-label value. NVDA does nothing at all (maybe because it’s the week-end).

Here’S what I played with. Simple enough.

<audio controls src="example.ogg" aria-label="Podcast no X." aria-describedby="transcript"></audio>
<div id="transcript">… Full text transcript …</div>

Can anyone think of another solution to achieve the same thing, where the announcement of a transcript comes straight from tabbing into the audio element? I’m not looking for a simple link pointing to the transcript right after the audio file - though that’s my only solution so far (below) - but really a way to directly associate the audio file with the transcript itself.

I also played with the following two snippets:

<div id="test2">
<audio controls src="example.ogg" aria-label="Podcast no X." aria-describedby="transcript2"></audio>
<p><a href="#transcript">Link to the transcript</a></p>
</div>
<div id="transcript2">… Full text transcript …</div>

Or...

<div aria-describedby="transcript3" aria-label="Podcast no X." tabindex=“0” id=“test3">
<audio controls src="example.ogg"></audio>
<a href="#transcript3">Link to the transcript</a>
</div>
<div id="transcript3">… Full text transcript …</div>

But none of them are really satisfying either. So, any idea would be appreciated. :)

Thanks all!

[1] http://dboudreau.tumblr.com/post/83929427690/programmatically-associate-an-audio-file-with-its-text

/Denis