WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Netflix style carousel - navigating with arrow keys

for

From: Bryan Garaventa
Date: Dec 7, 2023 3:27PM

I don't recommend the use of role=application, mainly because it then causes issues for screen reader users who may not understand the pronunciation of some text and then they will have difficulty reviewing it out in word by word or even character navigation.

It's always best to provide accompanying buttons for previous and next slide navigation, not just for screen reader users but also for touch device users.

Here is an example that uses this method, and also includes left-right arrow navigation for sighted keyboard users.
https://whatsock.com/Templates/Carousels/Slideshow/index.htm

All the best,
Bryan


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Sonja Weckenmann
Sent: Thursday, December 7, 2023 1:34 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Netflix style carousel - navigating with arrow keys

Hi,

We are currently testing a website that offers four to five Netflix style coaursels on a page, each of which shows maybe 5-8 cards at a time. Each card represents some piece of content and serves as a link.

Keyboard users move focus to the first card, then use arrow keys to navigate from card to card. Tab sets focus to the next focusable element after the carousel. The implementation follwos the concept of a composite widget.

Arrow key navigation may not be self-explanatory for keyboard users (you would have to provide hints), but they benefit from not having to go through lots of tab stops.

However, it does not work using a screen reader, because the screen reader does not automatically switch to application mode when focusing the widget. What would be the best solution for this?

Setting role="application" on the wrapping div helps, but it results in the card being read out as one text string (you can't explore the card in reading mode any more) which is not ideal but perhaps tolerable because the content is very compact (more or less a tag, a heading and a subline).
One could change role="group" to role="application" just when the card gets focus to keep heading navigation available as long as users do not navigate through the cards.

I was wondering if there are better approaches? There is no appropriate widget role that could be used to evoke that switch of mode.

Thanks, best
sonja