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:53PM

Adding role="application" seems to solve everything in NVDA, VoiceOver and
JAWS. I say "seems to" because I'm aware that there may be unforeseen
consequences of using role="application" but it works in the three screen
readers you were testing, and hasn't caused any problems for me in my
testing:

<audio role="application" aria-label="Here is the title"
aria-describedby="transcript" controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
<p><div id="transcript">Here is the full text transcript, but it could be
really long, so it may not be the best idea to put it directly in the
aria-describedby attribute. It may be better to put a link to the
transcript in the aria-describedby attribute.</div></p>

Note: I also tested in Window Eyes and sadly Window Eyes says nothing at
all when it comes to the audio, and I doubt there's much we can do about
that. Window Eyes doesn't have the greatest support for ARIA, so this
doesn't come as a surprise.


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


On Mon, Apr 28, 2014 at 4:16 PM, Denis Boudreau < <EMAIL REMOVED> >wrote:

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