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 2:16PM

I agree on both counts. It does seem kinda basic, but I’m sure there’s a valid reason. The whole purpose of these articles is to provide simple and reliable accessibility tips, and I’m voluntarily following a strict format which limits how much info I can share. So involving any kind of scripting goes beyond what I’m interested in providing for these. Which is also why I relied to a simple link following the audio file, as unsatisfying as that may be.

/Denis



On Apr 28, 2014, at 4:09 PM, Paul Bohman < <EMAIL REMOVED> > wrote:

> Well, you could hack it by using JavaScript to push the title and/or
> transcript (or at least say "transcript is available in a link below the
> audio") into a live region when the audio or video player gets focus. That
> would work, but we shouldn't have to resort to that kind of trickery for
> something so basic.
>
>
> Paul Bohman, PhD
> Director of Training
> Deque Systems, Inc
> www.deque.com
> 703-225-0380, ext.121
>
>
> On Mon, Apr 28, 2014 at 3:45 PM, Denis Boudreau < <EMAIL REMOVED> >wrote:
>
>> 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
>>>> >>>> >>>> >>>>
>>> >>> >>> >>
>> >> >> >>
> > >