WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Accessible Carousel Working

for

From: Mark Magennis
Date: Jan 5, 2021 9:43AM

Radhika,

There are different types of carousels. The W3C tutorial that Jerra linked to concerns the 'scrolling banner' type carousel that was very popular for a while a few years ago but less so now. That type of carousel displays a constantly changing sequence of items, typically some site feature or product offering, one at a time. Items may be clickable links taking you to a page for that item of may include a number of links. These carousels usually auto-scroll.

Another typical 'carousel' type that is very popular now is the Netflix style carousel which contains a strip of 'cards' representing media items such as movies. The carousel shows maybe 5-12 cards at a time but does not auto-scroll. It has 'Previous' and 'Next' buttons for displaying the previous or next strip. Individual cards are usually clickable and may also contain other clickable items such as an "Add to Favourites" button.

There are similarities and differences and the appropriate keyboard interaction patterns may be different in each case. What kind of carousel are you taking about?

Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jerra Strong
Sent: 04 January 2021 18:49
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] Re: [WebAIM] Accessible Carousel Working

Hi Radhika,

W3C has an Accessible Carousel Tutorial
<https://www.w3.org/WAI/tutorials/carousels/> available that goes into the accessibility concepts, with code examples. Hope this is helpful to you.

On Mon, Jan 4, 2021 at 10:04 AM Radhika Soni < <EMAIL REMOVED> > wrote:

> I need some help with what is the ideal/ accessible behaviour for a
> carousel. As soon as the user hit the next button, should the focus go
> to the slide or should the focus stay on the next button itself.
> How will users be intimated about the next slide content? Any examples
> which you can share for the best examples for carousels?
>
> Thanks in advance for your help!
>
>
> Regards,
> -Radhika
> > > archives at http://webaim.org/discussion/archives
> >


--
Jerra Strong
Interim Accessible Conformance and Design Specialist
UNLV|Office of Accessibility Resources
Office of the Vice Provost for Academic Programs <EMAIL REMOVED>
*Pronouns: He/Him/His*