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 4:32AM

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 REMOVED> > on behalf of Sonja Weckenmann < <EMAIL REMOVED> >
Sent: Friday 8 December 2023 11:16
To: <EMAIL REMOVED> < <EMAIL 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