WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Programmatically binding an audio file with its text equivalent

for

From: Denis Boudreau
Date: Apr 28, 2014 1:45PM

Thanks for replying Paul. I tried with and without tabindex=“0”, but it made no difference. <audio> grabs keyboard focus by default, and in both cases, NVDA is asleep at the switch when it gets to it.

It looks as though it really is a user agent issue with NVDA simply not supporting aria-label and aria-describedby on the audio element. I’ll be testing the same with the video element soon, and I’m kind of expecting the same results.

/Denis


On Apr 28, 2014, at 3:26 PM, Paul Bohman < <EMAIL REMOVED> > wrote:

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