WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Rendering a carousel as simple list for screen reader users?

for

From: Patrick H. Lauke
Date: Oct 19, 2018 2:55AM

On 19/10/2018 08:31, Emmanuel Pelletier wrote:
> Hi everyone,
>
>
> I'm wondering about what would be an ideal way to build an accessible
> carousel.
>
> The idea was: since a carousel is basically a list of items you navigate
> into, a screen reader should only announce the list of items. It should
> not be aware of the usual carousel navigation buttons, the notion of a
> currently visible element, etc. The user should navigate like he would
> normally do in any other list.
>
> So I tried to implement that: rendering a carousel with items,
> navigation buttons, current slide indication, etc, for people not using
> a screen reader, but possibly using a keyboard; and making it that the
> exact same HTML makes screen readers only know about the list of items.
>
> But I couldn't figure it out.
>
> For example, I tried adding a `aria-hidden="true"` attribute on the
> navigation buttons (despite the 4th rule of ARIA use, I know). The idea
> was that a screen reader would not announce the buttons for users
> navigating with arrow keys. The problem is it would still announce a
> "blank" button for screen reader users navigating with tab key. I could
> add a `tabindex="-1"`, but the problem would now be for users not having
> a screen reader and using a keyboard.
>
> I encountered other similar problems, all caused by the fact that I want
> a different behavior for screen reader users and keyboard users not
> using a screen reader.
>
>
> So, what do you think? Is the original idea OK? Do you see a way to
> actually implement it? If this ends up in the trashcan, I'm curious of
> your other ideas to make something accessible and not too cumbersome for
> screen reader users.

In general, I'd say: you can't find a solution here that works both for
screenreader users and non-AT keyboard users. Controls need to be
focusable/actionable, but you can't hide them and make them
non-focusable JUST for screenreader users. That's a circle that can't be
squared currently, unfortunately.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke