E-mail List Archives
Thread: Accessible Carousel Working
Number of posts in this thread: 6 (In chronological order)
From: Radhika Soni
Date: Mon, Jan 04 2021 11:03AM
Subject: Accessible Carousel Working
No previous message | Next message →
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
From: Jerra Strong
Date: Mon, Jan 04 2021 11:49AM
Subject: Re: Accessible Carousel Working
← Previous message | Next message →
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 ADDRESS 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
> > > > >
--
Jerra Strong
Interim Accessible Conformance and Design Specialist
UNLV|Office of Accessibility Resources
Office of the Vice Provost for Academic Programs
= EMAIL ADDRESS REMOVED =
*Pronouns: He/Him/His*
From: Mark Magennis
Date: Tue, Jan 05 2021 9:43AM
Subject: Re: [EXTERNAL] Accessible Carousel Working
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Jerra Strong
Sent: 04 January 2021 18:49
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
*Pronouns: He/Him/His*
From: Radhika Soni
Date: Tue, Jan 05 2021 3:15PM
Subject: Re: [EXTERNAL]Accessible Carousel Working
← Previous message | Next message →
Thank you so much for your response and examples. My question here is- If
we have a carousel with pagination dots and a next and previous button. If
the user hits the next or previous button, should the focus move on to the
slide which is shown on the screen or should it stay on the previous or
next button. Will it cause any kind of violation if we move the focus on
the slide?
Also, the example you have referred-
https://www.w3.org/WAI/tutorials/carousels/working-example/ if user moves
to the next slide the screen reader has to come back to the slide to read
what is on that slide. Is that ok. Should we not force the focus on the
slide when the user hits the next slide. Let me know, what are your
thoughts on it
Thank you in advance!
Regards,
-Radhika
On Tue, Jan 5, 2021 at 11:43 AM Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:
> 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 ADDRESS REMOVED = > On Behalf Of
> Jerra Strong
> Sent: 04 January 2021 18:49
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> *Pronouns: He/Him/His*
> > > at http://webaim.org/discussion/archives
> > > > > >
From: glen walker
Date: Tue, Jan 05 2021 3:38PM
Subject: Re: [EXTERNAL]Accessible Carousel Working
← Previous message | Next message →
No matter which behavior you choose, you'll make someone unhappy. As a
keyboard user myself, I hate it when my focus gets moved. If I navigate to
the next button and press space/enter to see what's next in the carrousel,
if the contents of the carrousel are not what I want yet, I want to press
space/enter again on the button without having to navigate to it again.
But for other users, if they press next, they might want to hear what was
scrolled into view without having to navigate to the new content.
It's more of a UX issue and you'll have to evaluate which behavior would be
appropriate for your expected audience, if known.
On Tue, Jan 5, 2021 at 3:15 PM Radhika Soni < = EMAIL ADDRESS REMOVED = > wrote:
> Thank you so much for your response and examples. My question here is- If
> we have a carousel with pagination dots and a next and previous button. If
> the user hits the next or previous button, should the focus move on to the
> slide which is shown on the screen or should it stay on the previous or
> next button. Will it cause any kind of violation if we move the focus on
> the slide?
>
> Also, the example you have referred-
> https://www.w3.org/WAI/tutorials/carousels/working-example/ if user moves
> to the next slide the screen reader has to come back to the slide to read
> what is on that slide. Is that ok. Should we not force the focus on the
> slide when the user hits the next slide. Let me know, what are your
> thoughts on it
>
> Thank you in advance!
>
> Regards,
> -Radhika
>
>
>
From: Mark Magennis
Date: Thu, Jan 07 2021 1:21AM
Subject: Re: [EXTERNAL]Accessible Carousel Working
← Previous message | No next message
As Glen says, there isn't a single approach that will work best for all users in all cases. You might think of this by deciding which use case(s) you most want to support. Here are a couple to think about:
1. User wants to skip through the slides quickly, reading but not interacting with them.
2. User wants to go to the next slide and interact with it.
If 1 is your most common or important use case, then the best approach may be to leave focus on the Next Slide button and use a live region to cause screen readers to announce the slide contents (or a summary of them if they are complex) when the slide appears.
If supporting case 2 is more important to you, then it may be best to move focus to the beginning of the slide contents on each transition.
Mark
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Radhika Soni
Sent: 05 January 2021 22:15
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] Re: Accessible Carousel Working
Thank you so much for your response and examples. My question here is- If we have a carousel with pagination dots and a next and previous button. If the user hits the next or previous button, should the focus move on to the slide which is shown on the screen or should it stay on the previous or next button. Will it cause any kind of violation if we move the focus on the slide?
Also, the example you have referred-
https://www.w3.org/WAI/tutorials/carousels/working-example/ if user moves to the next slide the screen reader has to come back to the slide to read what is on that slide. Is that ok. Should we not force the focus on the slide when the user hits the next slide. Let me know, what are your thoughts on it
Thank you in advance!
Regards,
-Radhika
On Tue, Jan 5, 2021 at 11:43 AM Mark Magennis < = EMAIL ADDRESS REMOVED = >
wrote:
> 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 ADDRESS REMOVED = > On Behalf Of
> Jerra Strong
> Sent: 04 January 2021 18:49
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> *Pronouns: He/Him/His*
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >