WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mark Magennis
Date: May 10, 2023 3:26AM

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