E-mail List Archives
Thread: Programmatically binding an audio file with its text equivalent
Number of posts in this thread: 7 (In chronological order)
From: Denis Boudreau
Date: Sat, Apr 26 2014 12:23PM
Subject: Programmatically binding an audio file with its text equivalent
No previous message | Next message →
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 cant seem to find a truly satisfying way solution to do so.
Id 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 its the week-end).
HereS 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? Im not looking for a simple link pointing to the transcript right after the audio file - though thats 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
From: Paul Bohman
Date: Mon, Apr 28 2014 1:26PM
Subject: Re: Programmatically binding an audio file with its text equivalent
← Previous message | Next message →
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 ADDRESS 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
> > > >
From: Denis Boudreau
Date: Mon, Apr 28 2014 1:45PM
Subject: Re: Programmatically binding an audio file with its text equivalent
← Previous message | Next message →
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. Ill be testing the same with the video element soon, and Im kind of expecting the same results.
/Denis
On Apr 28, 2014, at 3:26 PM, Paul Bohman < = EMAIL ADDRESS 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 ADDRESS 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 cant seem
>> to find a truly satisfying way solution to do so.
>>
>> Id 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
>> its the week-end).
>>
>> HereS 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? Im not looking for a simple link pointing to the transcript right
>> after the audio file - though thats 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
>> >> >> >>
> > >
From: Paul Bohman
Date: Mon, Apr 28 2014 2:09PM
Subject: Re: Programmatically binding an audio file with its text equivalent
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> >> > >> > >> > >>
> > > > > > >
> > > >
From: Denis Boudreau
Date: Mon, Apr 28 2014 2:16PM
Subject: Re: Programmatically binding an audio file with its text equivalent
← Previous message | Next message →
I agree on both counts. It does seem kinda basic, but Im sure theres a valid reason. The whole purpose of these articles is to provide simple and reliable accessibility tips, and Im voluntarily following a strict format which limits how much info I can share. So involving any kind of scripting goes beyond what Im 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 ADDRESS 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 ADDRESS 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. Ill be
>> testing the same with the video element soon, and Im kind of expecting the
>> same results.
>>
>> /Denis
>>
>>
>> On Apr 28, 2014, at 3:26 PM, Paul Bohman < = EMAIL ADDRESS 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 ADDRESS 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 cant
>> seem
>>>> to find a truly satisfying way solution to do so.
>>>>
>>>> Id 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
>>>> its the week-end).
>>>>
>>>> HereS 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? Im not looking for a simple link pointing to the transcript
>> right
>>>> after the audio file - though thats 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
>>>> >>>> >>>> >>>>
>>> >>> >>> >>
>> >> >> >>
> > >
From: Paul Bohman
Date: Mon, Apr 28 2014 2:53PM
Subject: Re: Programmatically binding an audio file with its text equivalent
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> >>>> > >>>> > >>>> > >>>>
> >>> > >>> > >>> > >>
> >> > >> > >> > >>
> > > > > > >
> > > >
From: Paul Bohman
Date: Mon, Apr 28 2014 2:59PM
Subject: Re: Programmatically binding an audio file with its text equivalent
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>> >>>> >> >>>> >> >>>> >> >>>>
>> >>> >> >>> >> >>> >> >>
>> >> >> >> >> >> >> >>
>> > >> > >> > >>
>> >> >> >>
>
>