WebAIM - Web Accessibility In Mind

E-mail List Archives

Netflix style carousel - navigating with arrow keys

for

From: Sonja Weckenmann
Date: Dec 7, 2023 2:33PM

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