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

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