E-mail List Archives
Thread: Question on accessible carousel implementation
Number of posts in this thread: 6 (In chronological order)
From: Kaur, Gurpreet
Date: Mon, Apr 04 2016 2:04PM
Subject: Question on accessible carousel implementation
No previous message | Next message →
Accessibility experts,
Can you please help me with a good example of a carousel implementation from keyboard navigation/screen reader compatibility perspective, that I can use as a reference to design the "Recommendations" carousel on page http://www.charter.net/
Thanks and regards,
Gurpreet Kaur
From: Moore,Michael (Accessibility) (HHSC)
Date: Mon, Apr 04 2016 2:11PM
Subject: Re: Question on accessible carousel implementation
← Previous message | Next message →
The best advice that I have ever seen on carrousel accessibility was created by webAIM's own guru of accessibility Jared Smith and can be found at the following URL: http://shouldiuseacarousel.com/
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
From: Bryan Garaventa
Date: Mon, Apr 04 2016 2:23PM
Subject: Re: Question on accessible carousel implementation
← Previous message | Next message →
Hello, the WAI Carousel Tutorial is a good beginning to end document for implementing an accessible carousel.
https://www.w3.org/WAI/tutorials/carousels/
There is a lot that goes into the functionality for something like this, not just for keyboard only users, but textual equivalents for non-sighted screen reader users, plus mouse events for auto pausing and resuming, etc, so a lot of redundant functionality is needed to cover all of these bases.
Here is an example that includes all of these concepts:
http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wizards/Carousel%20(Flat%20from%20XML%20with%20Overrides)/demo.htm
All the best,
Bryan
From: Jan Richards
Date: Tue, Apr 05 2016 7:27AM
Subject: Re: Question on accessible carousel implementation
← Previous message | Next message →
Bryan's right that there is a lot to consider when designing an accessible carousel.
One approach that I haven't seen discussed too much is to name the slides with text instead of numbers or other ambiguous identifiers. This helps the user understand what the options are even without operating the carousel.
For example, see:
http://www.bell.ca/Accessibility_services
http://www.economist.com/ (does something similar but has some other accessibility issues)
Cheers,
Jan
From: Cousins, Earl
Date: Tue, Apr 05 2016 7:38AM
Subject: Re: Question on accessible carousel implementation
← Previous message | Next message →
Hi All,
I've always considered carousels to be tabbed content from a semantic point of view and therefore feel the selection controls should be at the top.
This would prevent having to backtrack up to consume the content as a keyboard only or screen reader user.
Example: http://catalogue.membershiprewards.ca/l1Category.mtw?categoryNameÊ_new
(yes, there are some alt text issues here - disclaimer: I worked on it years ago)
Thoughts?
Earl Cousins | Web Accessibility Specialist
From: Robert Fentress
Date: Thu, Apr 07 2016 9:00AM
Subject: Re: Question on accessible carousel implementation
← Previous message | No next message
Here is one I've been developing in jQuery, based, very roughly, on the WAI
example referenced earlier.
http://codepen.io/robfentress/pen/pyWveN
I'm still working on it, so I'd appreciate any feedback folks have.
Best,
Rob
On Tue, Apr 5, 2016 at 9:27 AM, Jan Richards < = EMAIL ADDRESS REMOVED = >
wrote:
> Bryan's right that there is a lot to consider when designing an accessible
> carousel.
>
> One approach that I haven't seen discussed too much is to name the slides
> with text instead of numbers or other ambiguous identifiers. This helps the
> user understand what the options are even without operating the carousel.
>
> For example, see:
> http://www.bell.ca/Accessibility_services
> http://www.economist.com/ (does something similar but has some other
> accessibility issues)
>
> Cheers,
> Jan
>
>
>