WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible Image Gallery

for

Number of posts in this thread: 8 (In chronological order)

From: Sarah Ward
Date: Sat, Aug 04 2012 12:32PM
Subject: Accessible Image Gallery
No previous message | Next message →

Hi Everyone,

I'm currently working on designing an accessible image gallery and would like the screen seader to announce when the new image is displayed to the user by reading out the alt text (without moving focus to the image itself). I haven't so far found many good examples of image galleries so would appreciate some help.

I thought this would be possible by adding an aria-live attribute to the container element, and as the image was removed and replaced by a new one, the screen reader would announce the new image's alt text. This seems to work as I would like in VoiceOver, but in NVDA and JAWS (and potentially others) it does not announce anything.

Is there something in the spec that we have missed that indicates aria-live should only work with text nodes?

Thanks,
Sarah

Sent from my iPad

From: Bryan Garaventa
Date: Sat, Aug 04 2012 3:14PM
Subject: Re: Accessible Image Gallery
← Previous message | Next message →

Hi,
There's a LinkedIn article at
http://lnkd.in/vcvyQz
That describes a technique for announcing text unobtrusively, and an
accessible image carousel implementation at
http://whatsock.com/modules/carousel_from_xml_module/demo.htm
Which announces image descriptions for screen readers using this technique.

A word of warning though, having things announced automatically may cause
problems if a person is trying to navigate the page at the same time, since
they won't know if what is being announced is on the same line or paragraph
that is being navigated to, or if it is coming from somewhere else on the
page. This can be very disorienting.


----- Original Message -----
From: "Sarah Ward" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Saturday, August 04, 2012 11:32 AM
Subject: [WebAIM] Accessible Image Gallery


> Hi Everyone,
>
> I'm currently working on designing an accessible image gallery and would
> like the screen seader to announce when the new image is displayed to the
> user by reading out the alt text (without moving focus to the image
> itself). I haven't so far found many good examples of image galleries so
> would appreciate some help.
>
> I thought this would be possible by adding an aria-live attribute to the
> container element, and as the image was removed and replaced by a new one,
> the screen reader would announce the new image's alt text. This seems to
> work as I would like in VoiceOver, but in NVDA and JAWS (and potentially
> others) it does not announce anything.
>
> Is there something in the spec that we have missed that indicates
> aria-live should only work with text nodes?
>
> Thanks,
> Sarah
>
> Sent from my iPad
> > >

From: Stella Mudd
Date: Sat, Aug 04 2012 3:40PM
Subject: Re: Accessible Image Gallery
← Previous message | Next message →

Good point Bryan. I would only announce if the carousel has focus and for
good messure ensure a mechanism is used to stop the announcement which
would probably stop the animation as well such as pressing the escape key.

On Saturday, August 4, 2012, Bryan Garaventa wrote:

> Hi,
> There's a LinkedIn article at
> http://lnkd.in/vcvyQz
> That describes a technique for announcing text unobtrusively, and an
> accessible image carousel implementation at
> http://whatsock.com/modules/carousel_from_xml_module/demo.htm
> Which announces image descriptions for screen readers using this technique.
>
> A word of warning though, having things announced automatically may cause
> problems if a person is trying to navigate the page at the same time, since
> they won't know if what is being announced is on the same line or paragraph
> that is being navigated to, or if it is coming from somewhere else on the
> page. This can be very disorienting.
>
>
> ----- Original Message -----
> From: "Sarah Ward" < = EMAIL ADDRESS REMOVED = <javascript:;>>
> To: < = EMAIL ADDRESS REMOVED = <javascript:;>>
> Sent: Saturday, August 04, 2012 11:32 AM
> Subject: [WebAIM] Accessible Image Gallery
>
>
> > Hi Everyone,
> >
> > I'm currently working on designing an accessible image gallery and would
> > like the screen seader to announce when the new image is displayed to the
> > user by reading out the alt text (without moving focus to the image
> > itself). I haven't so far found many good examples of image galleries so
> > would appreciate some help.
> >
> > I thought this would be possible by adding an aria-live attribute to the
> > container element, and as the image was removed and replaced by a new
> one,
> > the screen reader would announce the new image's alt text. This seems to
> > work as I would like in VoiceOver, but in NVDA and JAWS (and potentially
> > others) it does not announce anything.
> >
> > Is there something in the spec that we have missed that indicates
> > aria-live should only work with text nodes?
> >
> > Thanks,
> > Sarah
> >
> > Sent from my iPad
> > > > > > >
> > > >

From: bim.egan1
Date: Sun, Aug 05 2012 12:31AM
Subject: Re: Accessible Image Gallery
← Previous message | Next message →

Good to hear that a stop mechanism will be in place but how will users know that the Escape key will activate it?
Bim


Sent from my iPhone

On 4 Aug 2012, at 22:40, Stella Mudd < = EMAIL ADDRESS REMOVED = > wrote:

> Good point Bryan. I would only announce if the carousel has focus and for
> good messure ensure a mechanism is used to stop the announcement which
> would probably stop the animation as well such as pressing the escape key.
>
> On Saturday, August 4, 2012, Bryan Garaventa wrote:
>
>> Hi,
>> There's a LinkedIn article at
>> http://lnkd.in/vcvyQz
>> That describes a technique for announcing text unobtrusively, and an
>> accessible image carousel implementation at
>> http://whatsock.com/modules/carousel_from_xml_module/demo.htm
>> Which announces image descriptions for screen readers using this technique.
>>
>> A word of warning though, having things announced automatically may cause
>> problems if a person is trying to navigate the page at the same time, since
>> they won't know if what is being announced is on the same line or paragraph
>> that is being navigated to, or if it is coming from somewhere else on the
>> page. This can be very disorienting.
>>
>>
>> ----- Original Message -----
>> From: "Sarah Ward" < = EMAIL ADDRESS REMOVED = <javascript:;>>
>> To: < = EMAIL ADDRESS REMOVED = <javascript:;>>
>> Sent: Saturday, August 04, 2012 11:32 AM
>> Subject: [WebAIM] Accessible Image Gallery
>>
>>
>>> Hi Everyone,
>>>
>>> I'm currently working on designing an accessible image gallery and would
>>> like the screen seader to announce when the new image is displayed to the
>>> user by reading out the alt text (without moving focus to the image
>>> itself). I haven't so far found many good examples of image galleries so
>>> would appreciate some help.
>>>
>>> I thought this would be possible by adding an aria-live attribute to the
>>> container element, and as the image was removed and replaced by a new
>> one,
>>> the screen reader would announce the new image's alt text. This seems to
>>> work as I would like in VoiceOver, but in NVDA and JAWS (and potentially
>>> others) it does not announce anything.
>>>
>>> Is there something in the spec that we have missed that indicates
>>> aria-live should only work with text nodes?
>>>
>>> Thanks,
>>> Sarah
>>>
>>> Sent from my iPad
>>> >>> >>> >>
>> >> >> >>
> > >

From: Stella Mudd
Date: Sun, Aug 05 2012 1:41AM
Subject: Re: Accessible Image Gallery
← Previous message | Next message →

If possible, would have a visual stop button, but I always add a standard
message when entering the carousel that let's a user know the escape key
may be used to stop things.

On Sat, Aug 4, 2012 at 11:31 PM, < = EMAIL ADDRESS REMOVED = > wrote:

> Good to hear that a stop mechanism will be in place but how will users
> know that the Escape key will activate it?
> Bim
>
>
> Sent from my iPhone
>
> On 4 Aug 2012, at 22:40, Stella Mudd < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Good point Bryan. I would only announce if the carousel has focus and
> for
> > good messure ensure a mechanism is used to stop the announcement which
> > would probably stop the animation as well such as pressing the escape
> key.
> >
> > On Saturday, August 4, 2012, Bryan Garaventa wrote:
> >
> >> Hi,
> >> There's a LinkedIn article at
> >> http://lnkd.in/vcvyQz
> >> That describes a technique for announcing text unobtrusively, and an
> >> accessible image carousel implementation at
> >> http://whatsock.com/modules/carousel_from_xml_module/demo.htm
> >> Which announces image descriptions for screen readers using this
> technique.
> >>
> >> A word of warning though, having things announced automatically may
> cause
> >> problems if a person is trying to navigate the page at the same time,
> since
> >> they won't know if what is being announced is on the same line or
> paragraph
> >> that is being navigated to, or if it is coming from somewhere else on
> the
> >> page. This can be very disorienting.
> >>
> >>
> >> ----- Original Message -----
> >> From: "Sarah Ward" < = EMAIL ADDRESS REMOVED = <javascript:;>>
> >> To: < = EMAIL ADDRESS REMOVED = <javascript:;>>
> >> Sent: Saturday, August 04, 2012 11:32 AM
> >> Subject: [WebAIM] Accessible Image Gallery
> >>
> >>
> >>> Hi Everyone,
> >>>
> >>> I'm currently working on designing an accessible image gallery and
> would
> >>> like the screen seader to announce when the new image is displayed to
> the
> >>> user by reading out the alt text (without moving focus to the image
> >>> itself). I haven't so far found many good examples of image galleries
> so
> >>> would appreciate some help.
> >>>
> >>> I thought this would be possible by adding an aria-live attribute to
> the
> >>> container element, and as the image was removed and replaced by a new
> >> one,
> >>> the screen reader would announce the new image's alt text. This seems
> to
> >>> work as I would like in VoiceOver, but in NVDA and JAWS (and
> potentially
> >>> others) it does not announce anything.
> >>>
> >>> Is there something in the spec that we have missed that indicates
> >>> aria-live should only work with text nodes?
> >>>
> >>> Thanks,
> >>> Sarah
> >>>
> >>> Sent from my iPad
> >>> > >>> > >>> > >>
> >> > >> > >> > >>
> > > > > > > > > >

From: Sarah Ward
Date: Wed, Aug 08 2012 2:41AM
Subject: Re: Accessible Image Gallery
← Previous message | Next message →

Thank you all for the advice on accessible image gallery topic. But I am still wondering about whether or not I should file a bug with JAWS and NVDA as they are not announcing the image change in the live region. Shouldn't they according to the spec announce alt text changes?

Thanks,
Sarah

From: Benjamin Hawkes-Lewis
Date: Wed, Aug 08 2012 2:52AM
Subject: Re: Accessible Image Gallery
← Previous message | Next message →

On Wed, Aug 8, 2012 at 9:41 AM, Sarah Ward < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you all for the advice on accessible image gallery topic. But I am still wondering about whether or not I should file a bug with JAWS and NVDA as they are not announcing the image change in the live region.

If you think they aren't following the spec, yes.

> Shouldn't they according to the spec announce alt text changes?

Hard to say without a minimal reproducible test case. I suggest
producing one anyway if you want to file a bug. Makes it a lot easier
for them to triage and fix.

http://sscce.org/

https://www.webkit.org/quality/reduction.html

--
Benjamin Hawkes-Lewis

From: Ryan Hemphill
Date: Wed, Aug 08 2012 7:24AM
Subject: Re: Accessible Image Gallery
← Previous message | No next message

I think the matter of aria-live needs a lot more investigation. With all
the information that a complex web app would/can entail, there is the
potential for a lot of contextually relevant information that would not be
available otherwise. My work entails a lot of places where something
important is happening somewhere else in the platform (multiple
applications running at once in the same web browser, just to give a sense
of the problem depth). On the other hand, the information may not be
desired by some users while crucial to others.

I agree with Bryan about the disorienting aspect of it. Walking a thin line
in a lot of cases. It's a struggle, no doubt.

Ryan.