E-mail List Archives
Thread: Netflix style carousel - navigating with arrow keys
Number of posts in this thread: 10 (In chronological order)
From: Sonja Weckenmann
Date: Thu, Dec 07 2023 2:33PM
Subject: Netflix style carousel - navigating with arrow keys
No previous message | Next message →
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
From: Bryan Garaventa
Date: Thu, Dec 07 2023 3:27PM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
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 ADDRESS REMOVED = > On Behalf Of Sonja Weckenmann
Sent: Thursday, December 7, 2023 1:34 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: Mark Magennis
Date: Fri, Dec 08 2023 2:12AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
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 ADDRESS REMOVED = > on behalf of Sonja Weckenmann < = EMAIL ADDRESS REMOVED = >
Sent: Thursday 7 December 2023 21:33
To: WebAIM Discussion List < = EMAIL ADDRESS 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
From: Patrick H. Lauke
Date: Fri, Dec 08 2023 3:39AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
On 07/12/2023 21:33, Sonja Weckenmann wrote:
...
> 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?
Not sure about "best", but conceptually it sounds like each carousel is
a role="listbox" and each card is a role="option" ... this should kick
SRs into forms mode.
P
--
Patrick H. Lauke
* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke
From: Sonja Weckenmann
Date: Fri, Dec 08 2023 4:16AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
Hi,
Thanks for your feedback.
@Patrick - as far as I know you must not include links in an element
with role="option". Am I right about this?
Or at least the Authoring Practice Guide states "The listbox widget does
not provide an accessible way to present a list of interactive elements,
such as links"?
There are "previous" and "next" buttons, but at the moment they are only
available for pointer. The "next" button adds 4 or 5 new cards, which
could be communicated via a live region.
Best,
Sonja
Am 08.12.2023 um 11:39 schrieb Patrick H. Lauke:
>
>
> On 07/12/2023 21:33, Sonja Weckenmann wrote:
> ...
>> 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?
>
> Not sure about "best", but conceptually it sounds like each carousel is
> a role="listbox" and each card is a role="option" ... this should kick
> SRs into forms mode.
>
> P
From: Mark Magennis
Date: Fri, Dec 08 2023 4:32AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
Previous and Next buttons not being keyboard accessible is a big issue in itself. When you make them accessible, you will need to give them more meaningful names that just "Previous" and "Next" and you will also need to decide what you are going to do with focus placement when the user activates them. I imagine you've probably anticipated these issues but thought I'd mention them just in case.
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Sonja Weckenmann < = EMAIL ADDRESS REMOVED = >
Sent: Friday 8 December 2023 11:16
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] Re: [WebAIM] Netflix style carousel - navigating with arrow keys
Hi,
Thanks for your feedback.
@Patrick - as far as I know you must not include links in an element
with role="option". Am I right about this?
Or at least the Authoring Practice Guide states "The listbox widget does
not provide an accessible way to present a list of interactive elements,
such as links"?
There are "previous" and "next" buttons, but at the moment they are only
available for pointer. The "next" button adds 4 or 5 new cards, which
could be communicated via a live region.
Best,
Sonja
Am 08.12.2023 um 11:39 schrieb Patrick H. Lauke:
>
>
> On 07/12/2023 21:33, Sonja Weckenmann wrote:
> ...
>> 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?
>
> Not sure about "best", but conceptually it sounds like each carousel is
> a role="listbox" and each card is a role="option" ... this should kick
> SRs into forms mode.
>
> P
From: Patrick H. Lauke
Date: Fri, Dec 08 2023 6:29AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
On 08/12/2023 11:16, Sonja Weckenmann wrote:
...
> @Patrick - as far as I know you must not include links in an element
> with role="option". Am I right about this?
Ah, oops. Indeed, was looking at this at too high a level, and forgot
that you want your cards to actually interact :)
Next quick "off the top of my head" idea ... toolbar pattern may be
appropriate here.
P
--
Patrick H. Lauke
* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke
From: Patrick H. Lauke
Date: Fri, Dec 08 2023 6:30AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
On 08/12/2023 11:32, Mark Magennis wrote:
> Previous and Next buttons not being keyboard accessible is a big issue in itself.
I'd assume that if you're using cursor keys to move horizontally between
cards, it will "trigger" previous and next when you reach the last/fist
card. So while the buttons themselves may not be keyboard-accessible,
the functionality per se (moving to the previous/next set of cards) is
still present for keyboard users.
P
--
Patrick H. Lauke
* https://www.splintered.co.uk/
* https://github.com/patrickhlauke
* https://flickr.com/photos/redux/
* https://mastodon.social/@patrick_h_lauke
From: Mark Magennis
Date: Fri, Dec 08 2023 7:06AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | Next message →
You're right but I meant that in the context of a non-application approach.
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
Sent: Friday 8 December 2023 13:30
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] Re: Netflix style carousel - navigating with arrow keys
On 08/12/2023 11:32, Mark Magennis wrote:
> Previous and Next buttons not being keyboard accessible is a big issue in itself.
I'd assume that if you're using cursor keys to move horizontally between
cards, it will "trigger" previous and next when you reach the last/fist
card. So while the buttons themselves may not be keyboard-accessible,
the functionality per se (moving to the previous/next set of cards) is
still present for keyboard users.
P
--
Patrick H. Lauke
* https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.splintered.co.uk%2F&data%7C01%7CMark.Magennis%40skillsoft.com%7C4db31a53fa764cfc5bdd08dbf7f1e4fb%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638376390521262592%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=DszqM8KT%2FnJajIv0kSYADXtikWoHDqGGZiACtkp7sNI%3D&reserved=0<https://www.splintered.co.uk/>
* https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpatrickhlauke&data%7C01%7CMark.Magennis%40skillsoft.com%7C4db31a53fa764cfc5bdd08dbf7f1e4fb%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638376390521262592%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=splH7wtKPPrIii8LSzyb%2BVKHbaVjOjZU9g2MVEBE12Y%3D&reserved=0<https://github.com/patrickhlauke>
* https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fflickr.com%2Fphotos%2Fredux%2F&data%7C01%7CMark.Magennis%40skillsoft.com%7C4db31a53fa764cfc5bdd08dbf7f1e4fb%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638376390521262592%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=upXqVR%2BZJB6pKS03RedghZaEHyslEv3UYOxMNMRbs9Q%3D&reserved=0<https://flickr.com/photos/redux/>
* https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fmastodon.social%2F%40patrick_h_lauke&data%7C01%7CMark.Magennis%40skillsoft.com%7C4db31a53fa764cfc5bdd08dbf7f1e4fb%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638376390521262592%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdataLSdsKoRB3bJC4S0piVszu7ch3Od3CQZx7Qw%2FDQkkhg%3D&reserved=0<https://mastodon.social/@patrick_h_lauke>
From: Sonja Weckenmann
Date: Fri, Dec 08 2023 8:01AM
Subject: Re: Netflix style carousel - navigating with arrow keys
← Previous message | No next message
Hi,
Yes, I also had the toolbar pattern in mind.
We will discuss which approach we would like to recommend. It's good to
get different views. Thanks a lot!
s
Am 08.12.2023 um 14:29 schrieb Patrick H. Lauke:
>
>
> On 08/12/2023 11:16, Sonja Weckenmann wrote:
> ...
>> @Patrick - as far as I know you must not include links in an element
>> with role="option". Am I right about this?
>
> Ah, oops. Indeed, was looking at this at too high a level, and forgot
> that you want your cards to actually interact :)
>
> Next quick "off the top of my head" idea ... toolbar pattern may be
> appropriate here.
>
> P