WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousel with multiple items - recommended keyboard operation when activating Next-button

for

From: Jon Gunderson
Date: May 11, 2023 8:32AM

There is design guidance and two carousel examples in the W3C ARIA
Authoring Practices that should be helpful:
https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

If not it would be great to get feedback on what questions you have that
the practices do not address.

Jon


On Wed, May 10, 2023 at 4:27 AM Mark Magennis < <EMAIL REMOVED> >
wrote:

> Very good question. There are pros and cos of each approach. I suspect
> you've already considered all of these but are still wondering if anyone
> has any new insights. I don't know if you'll find any new insights here but
> here are my thoughts.
>
> If focus remains on the button, this supports sighted keyboard users who
> want to view multiple sets of cards without having to interact with any of
> them. Bang bang bang you can skip quickly through them looking for
> something of interest. When the user sees a card they want to interact with
> they can easily tab or reverse tab to it. If focus was moved to the first
> card in the new group each time, they would continually have to tab back to
> the Next button to go to the next group. Depending on how many groups they
> want to view and how much tabbing this would entail it may be a minor
> annoyance or a major annoyance, although I doubt that it would make the
> carousel confusing or particularly difficult to use. Do you have any data
> on how many groups users tend to view? My company uses carousels of this
> type and we recently generated some stats on how many times users use the
> Next button. I can't tell you the results because they are commercial info
> but I can say that some users do view a surprisingly large number of groups
> with one going through over 60! It will depend on the nature of the task of
> course but it might be something you might take into account in your design
> choices if you have that data, or if you have specific use cases you are
> prioritising.
>
> Screen reader users can't view the cards without actually going through
> them of course, so each time they go to the Next group they will always
> have to navigate through the cards. Then after reading them, to go to the
> next group they would have to navigate back to the Next button. How much
> work this is depends on where the Next button is. I expect it will be
> either before or after the group or there will be two Next buttons, one
> before and one after. When considering this aspect of the design bear in
> mind that there will also need to be a corresponding Previous button or
> buttons. The number and positioning of these buttons will affect how
> coherent the control is - how easy it is to create a clear mental model
> which you already know is vital. But it will also affect how much work the
> user has to do to reach the buttons. But if you have one Next button after
> the group and focus remains on it and the reads through the cards backwards
> by reverse tabbing or reverse arrowing then when they get to the start,
> they will have to go back through them or past them to reach the next
> button. Some users may work out very efficient ways of doing this over time
> using the list, button, link, or heading navigation, but many won't.
>
> If focus is moved to the first of the new group of cards then this would
> appear to me to be probably quite coherent for a screen reader user, not
> particularly onerous for a sighted keyboard user, and I would probably go
> for it if. A screen reader user asks for "Next group please" and they are
> at the start of the next group. After reading through the group they find
> the Next button again. Seems straightforward. For screen reader users with
> no vision, the fact that the new group has visually replaced the previous
> group is probably immaterial. They know that to jump between groups they
> use the Next and Previous buttons and it's probably all they need to know.
> I say "probably" because although this supposition is based on my
> experiences working and user testing with screen reader users, I have never
> user tested a carousel and you can never be sure how people are going to
> make sense of it (or not make sense of it) until you actually get a few of
> them to use it. Would it be possible for you to build a couple of mockups
> and get some feedback from real users?
>
> Hope these thoughts are of some use.
>
> Mark
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Sonja Weckenmann
> Sent: Tuesday 9 May 2023 15:20
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] [WebAIM] Carousel with multiple items - recommended
> keyboard operation when activating Next-button
>
> Hi,
>
> What would you recommend in terms of keyboard operation for a carousel
> that shows several items in the displayed area (e.g., 6 cards are
> visible): Assuming that when activating the "Next" button, 3 new cards are
> displayed, should the focus remain on the Next-button or should the focus
> be set to the first new card in the visible area (that is then the fourth
> card)?
>
> Starting point is semantic markup and labelling according to the Authoring
> Practice Guide to help users create a mental model of the widget.
>
>
> Thanks a lot for your thoughts.
> Best,
> Sonja
> > > at http://webaim.org/discussion/archives
> > > > > >