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

I'll also note that NVDA did read aria-label in IE even without
role="application" so there are some differences in how the browsers are
communicating that information to screen readers.

Oh, and ignore the accidental nesting of the div within the paragraph in
the example I sent previously!


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


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

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