WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Programmatically binding an audio file with its text equivalent

for

From: Paul Bohman
Date: Apr 28, 2014 1:26PM

Adding tabindex="0" to the audio tag can help. VoiceOver reads the
aria-title this way. I'm not in a place where I can test the other screen
readers at the moment, but I'm cautiously optimistic this will help.

<audio tabindex="0"... etc.


Paul Bohman, PhD
Director of Training
Deque Systems, Inc
www.deque.com
703-225-0380, ext.121


On Sat, Apr 26, 2014 at 2:23 PM, Denis Boudreau < <EMAIL REMOVED> >wrote:

> 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
> > > >