WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Netflix style carousel - navigating with arrow keys

for

From: Mark Magennis
Date: Dec 8, 2023 2:12AM

For each carousel you're saving 4-7 Tab key presses. Maybe up to 35 maximum for the whole page. I wonder whether this saving makes it worth implementing this as a composite widget with all the issues you describe? Screen reader users will likely have other quick navigation methods that they prefer, such as jumping between headings (I would assume each carousel has a title which is its heading) to find the carousel they're interested in. So the saving is only for sighted keyboard users who only have the Tab key as a navigation method.

Not all 'keyboard' users have a keyboard though and I wonder how much burden this amount of tabbing would place on users of switch devices or other keyboard emulators. I don't have much experience in that area so I'd welcome an opinion from someone who does.

Mark
From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Sonja Weckenmann < <EMAIL REMOVED> >
Sent: Thursday 7 December 2023 21:33
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] [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