WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessible carousel examples

for

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

From: James L Bailey
Date: Wed, Feb 01 2012 2:03PM
Subject: accessible carousel examples
No previous message | Next message →

Hello all:

Can anyone recommend an example of an accessible carousel? I prefer one
that runs it sequence rather than coming up stopped. I tried the one at
http://nxtbgthng.com/. But I couldn't operate it with JAWS. Maybe just
tell me how to control that one with JAWS. I have several people on
campus wanting to deploy an accessible carousel.

Thanks!

--
Best regards,

James

--

James Bailey M.S.
Adaptive Tech Coordinator
University of Oregon

From: Donald Evans
Date: Wed, Feb 01 2012 3:51PM
Subject: Re: accessible carousel examples
← Previous message | Next message →

One is located here:
http://access.aol.com/aegis/#goto_carousel
This is part of a project to make JQuery Accessible using ARIA.

Here's one I wrote sometime ago and may need some dusting off. It does not
depend on ARIA. To the screen reader (or search engine) it will appear as
4 stories one after the other.The visual user sees the content on the
screen one story at a time. It simply moves all the content off the visual
screen using CSS and then moves one story at at time to the visual side.

http://www.donaldevans.com/guide/bestpractices/carousel.html

Hope this helps...


On Wed, Feb 1, 2012 at 4:01 PM, James L Bailey < = EMAIL ADDRESS REMOVED = > wrote:

> Hello all:
>
> Can anyone recommend an example of an accessible carousel? I prefer one
> that runs it sequence rather than coming up stopped. I tried the one at
> http://nxtbgthng.com/. But I couldn't operate it with JAWS. Maybe just
> tell me how to control that one with JAWS. I have several people on
> campus wanting to deploy an accessible carousel.
>
> Thanks!
>
> --
> Best regards,
>
> James
>
> --
>
> James Bailey M.S.
> Adaptive Tech Coordinator
> University of Oregon
>
>
>

From: Bourne, Sarah (ITD)
Date: Thu, Feb 02 2012 6:33AM
Subject: Re: accessible carousel examples
← Previous message | Next message →

Mass.Gov has a "slideshow" on it's homepage, which I consider to be a variant of a carousel. We're actually quite proud of it and will probably blog about it pretty soon. The latest tweak was put into production yesterday. It was actually quite tricky to get it to be fully usable for keyboard-only users as well as screen reader users!

If anybody notices any issues we missed, please let me know.

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of James L Bailey
Sent: Wednesday, February 01, 2012 4:01 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] accessible carousel examples

Hello all:

Can anyone recommend an example of an accessible carousel? I prefer one that runs it sequence rather than coming up stopped. I tried the one at http://nxtbgthng.com/. But I couldn't operate it with JAWS. Maybe just tell me how to control that one with JAWS. I have several people on campus wanting to deploy an accessible carousel.

Thanks!

--
Best regards,

James

--

James Bailey M.S.
Adaptive Tech Coordinator
University of Oregon

From: David Farough
Date: Thu, Feb 02 2012 9:06AM
Subject: Re: accessible carousel examples
← Previous message | Next message →

Hi Sarah:
Is there a mechanism to stop the rotation in the presentation.

I am using the current version of Jaws and Internet explorer 8. I was
hearing the content spoken as the pages changed, but I noticed that Ie
was a bit sluggish when tabbing through items. I suspect that this
constant changing of content may cause performance issues for some
access technologies. Has anyone raised this issue? I feel that their
should be a stop button preferably at the top of the page with the skip
nav links. As I was tabbing around, I continued to hear the new content
as it changed. I would have preferred to hear the newly focussed item
instead.

I wonder also if it would not be better if the rotation of content
stopped when the tabs had focus. this would allow the user to bring up
the content of choice as they focussed on it.

David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779

>>> "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = > 08:34 AM Thursday,
February 02, 2012 >>>
Mass.Gov has a "slideshow" on it's homepage, which I consider to be a
variant of a carousel. We're actually quite proud of it and will
probably blog about it pretty soon. The latest tweak was put into
production yesterday. It was actually quite tricky to get it to be fully
usable for keyboard-only users as well as screen reader users!

If anybody notices any issues we missed, please let me know.

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of James L
Bailey
Sent: Wednesday, February 01, 2012 4:01 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] accessible carousel examples

Hello all:

Can anyone recommend an example of an accessible carousel? I prefer
one that runs it sequence rather than coming up stopped. I tried the
one at http://nxtbgthng.com/. But I couldn't operate it with JAWS.
Maybe just tell me how to control that one with JAWS. I have several
people on campus wanting to deploy an accessible carousel.

Thanks!

--
Best regards,

James

--

James Bailey M.S.
Adaptive Tech Coordinator
University of Oregon

From: Vincent Young
Date: Thu, Feb 02 2012 3:18PM
Subject: Re: accessible carousel examples
← Previous message | Next message →

I feel like there should be a standard non-obtrusive key combination that
stops all page animation. Maybe this should be announced on page load and
be the first item on the page? Or perhaps, prevent any speaking of
animating content via aria unless the user is actually interacting with the
widget and decides to start the animation. However, I do like the
aria-live="polite" implementation.

The slideshow implementation is very nice. I'm using JAWS 11 and IE8/FF
3.6 and noticed a few things:

1. The first image alt text is "People having fun skiing." while the
second is the same as the heading, "Need help finding a job?". I would be
consistent and describe the image.

2. In FF 3.6 tabbing around the carousel shifts content about, but seems to
be fine in FF 10.

3. I would have put things in an ordered list.

4. When selecting slides the content is read over and over again ad
nauseam.

Thanks for sharing.


On Thu, Feb 2, 2012 at 8:08 AM, David Farough
< = EMAIL ADDRESS REMOVED = >wrote:

> Hi Sarah:
> Is there a mechanism to stop the rotation in the presentation.
>
> I am using the current version of Jaws and Internet explorer 8. I was
> hearing the content spoken as the pages changed, but I noticed that Ie
> was a bit sluggish when tabbing through items. I suspect that this
> constant changing of content may cause performance issues for some
> access technologies. Has anyone raised this issue? I feel that their
> should be a stop button preferably at the top of the page with the skip
> nav links. As I was tabbing around, I continued to hear the new content
> as it changed. I would have preferred to hear the newly focussed item
> instead.
>
> I wonder also if it would not be better if the rotation of content
> stopped when the tabs had focus. this would allow the user to bring up
> the content of choice as they focussed on it.
>
> David Farough
> Application Accessibility Coordinator/coordonateur de l'accessibilité
> Information Technology Services Directorate /
> Direction des services d'information technologiques
> Public Service Commission / Commission de la fonction publique
> Email / Courriel: = EMAIL ADDRESS REMOVED =
> Tel. / Tél: (613) 992-2779
>
> >>> "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = > 08:34 AM Thursday,
> February 02, 2012 >>>
> Mass.Gov has a "slideshow" on it's homepage, which I consider to be a
> variant of a carousel. We're actually quite proud of it and will
> probably blog about it pretty soon. The latest tweak was put into
> production yesterday. It was actually quite tricky to get it to be fully
> usable for keyboard-only users as well as screen reader users!
>
> If anybody notices any issues we missed, please let me know.
>
> sb
>
> Sarah E. Bourne
> Director of Assistive Technology &
> Mass.Gov Chief Technology Strategist
> Information Technology Division
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/itd
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of James L
> Bailey
> Sent: Wednesday, February 01, 2012 4:01 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] accessible carousel examples
>
> Hello all:
>
> Can anyone recommend an example of an accessible carousel? I prefer
> one that runs it sequence rather than coming up stopped. I tried the
> one at http://nxtbgthng.com/. But I couldn't operate it with JAWS.
> Maybe just tell me how to control that one with JAWS. I have several
> people on campus wanting to deploy an accessible carousel.
>
> Thanks!
>
> --
> Best regards,
>
> James
>
> --
>
> James Bailey M.S.
> Adaptive Tech Coordinator
> University of Oregon
>
>
>

From: Jim Allan
Date: Thu, Feb 02 2012 4:12PM
Subject: Re: accessible carousel examples
← Previous message | Next message →

The ESCape key will stop most moving things that the browser
recognizes as moving (animated gif, marque, html things).

Things the browser doesn't know about like Flash, javascript
animation, carousels etc. must be handled by the author.

It would be wonderful if it could be a convention (best practice) that
all authors use the ESCape key to stop what ever they coded to be
moving.
The User Agent Working Group of W3C/WAI has a success criteria for
stopping moving things, but we had to add the caveat for things the
browser recognizes.

Jim Allan, Co-Chair User Agent Working Group

On Thu, Feb 2, 2012 at 4:18 PM, Vincent Young < = EMAIL ADDRESS REMOVED = > wrote:
> I feel like there should be a standard non-obtrusive key combination that
> stops all page animation.  Maybe this should be announced on page load and
> be the first item on the page?  Or perhaps, prevent any speaking of
> animating content via aria unless the user is actually interacting with the
> widget and decides to start the animation.   However, I do like the
> aria-live="polite" implementation.
>
> The slideshow implementation is very nice.  I'm using JAWS 11 and IE8/FF
> 3.6 and noticed a few things:
>
> 1.  The first image alt text is "People having fun skiing." while the
> second is the same as the heading, "Need help finding a job?".  I would be
> consistent and describe the image.
>
> 2. In FF 3.6 tabbing around the carousel shifts content about, but seems to
> be fine in FF 10.
>
> 3. I would have put things in an ordered list.
>
> 4.  When selecting slides the content is read over and over again ad
> nauseam.
>
> Thanks for sharing.
>
>
> On Thu, Feb 2, 2012 at 8:08 AM, David Farough
> < = EMAIL ADDRESS REMOVED = >wrote:
>
>> Hi Sarah:
>> Is there a mechanism to stop the rotation in the presentation.
>>
>> I am using the current version of Jaws and Internet explorer 8.  I was
>> hearing the content spoken as the pages changed, but I noticed that Ie
>> was a bit sluggish when tabbing through items.  I suspect that this
>> constant changing of content may cause performance issues for some
>> access technologies.  Has anyone raised this issue?  I feel that their
>> should be a stop button preferably at the top of the page with the skip
>> nav links.  As I was tabbing around, I continued to hear the new content
>> as it changed.  I would have preferred to hear the newly focussed item
>> instead.
>>
>> I wonder also if it would not be better if the rotation of content
>> stopped when the tabs had focus.  this would allow the user to bring up
>> the content of choice as they focussed on it.
>>
>> David Farough
>> Application Accessibility Coordinator/coordonateur de l'accessibilité
>> Information Technology Services Directorate /
>> Direction des services d'information technologiques
>> Public Service Commission / Commission de la fonction publique
>> Email / Courriel:   = EMAIL ADDRESS REMOVED =
>> Tel. / Tél:    (613) 992-2779
>>
>> >>> "Bourne, Sarah (ITD)" < = EMAIL ADDRESS REMOVED = > 08:34 AM Thursday,
>> February 02, 2012 >>>
>> Mass.Gov has a "slideshow" on it's homepage, which I consider to be a
>> variant of a carousel. We're actually quite proud of it and will
>> probably blog about it pretty soon. The latest tweak was put into
>> production yesterday. It was actually quite tricky to get it to be fully
>> usable for keyboard-only users as well as screen reader users!
>>
>> If anybody notices any issues we missed, please let me know.
>>
>> sb
>>
>> Sarah E. Bourne
>> Director of Assistive Technology &
>> Mass.Gov Chief Technology Strategist
>> Information Technology Division
>> Commonwealth of Massachusetts
>> 1 Ashburton Pl. rm 1601 Boston MA 02108
>> 617-626-4502
>> = EMAIL ADDRESS REMOVED =
>> http://www.mass.gov/itd
>>
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED =
>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of James L
>> Bailey
>> Sent: Wednesday, February 01, 2012 4:01 PM
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: [WebAIM] accessible carousel examples
>>
>>  Hello all:
>>
>>  Can anyone recommend an example of an accessible carousel? I prefer
>> one  that runs it sequence rather than coming up stopped. I tried the
>> one at  http://nxtbgthng.com/. But I couldn't operate it with JAWS.
>> Maybe just  tell me how to control that one with JAWS. I have several
>> people on  campus wanting to deploy an accessible carousel.
>>
>>  Thanks!
>>
>> --
>>  Best regards,
>>
>>  James
>>
>>  --
>>
>>  James Bailey M.S.
>>  Adaptive Tech Coordinator
>>  University of Oregon
>>
>>
>>

From: Bourne, Sarah (ITD)
Date: Fri, Feb 03 2012 1:12PM
Subject: Re: accessible carousel examples
← Previous message | No next message

Jim, David, and Vincent,

Thank you for your observations! I've passed them along to our developer.

David and Vincent, you shouldn't be hearing the slide changes while you are elsewhere on the page. It should only be doing that if the focus is within the "widget" itself. And David , it should also be paused when you are in the widget. We'll check again - perhaps we broke something on the last round of fixes.

Vincent, we're still working on getting our content creators to use the correct alternative text. We provide the template and the training and then, well, errors get made. This is a new feature for them, so I expect we'll need to remind them a few times. :)

Since Firefox is ceasing support for 3.6, we decided not to spend a whole lot of time on anomalies in that version. (IE6 was likewise neglected.) You also suggested using an unordered list. Each slide is a list item in an unordered list, and each slide control is a list item in another unordered list. Were you thinking of someplace else?

The repeating text is because screen reader users wanted the full slide title on the slide control links for when they used the JAWS link list. Now that it's implemented, they may agree with you that it's a little too noisy when using the slideshow itself. Visual users don't get that information, so perhaps they will agree that something like "Feature story 2", etc., is equivalent and more suitable.

Jim, we're experimenting to see if we can put a pause control at the top of the page (although, again, it's not supposed to be reading it if you're not in the widget) and/or to see if we can get esc to work when not in the widget - great suggestion.

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd