WebAIM - Web Accessibility In Mind

E-mail List Archives

Rendering a carousel as simple list for screen reader users?

for

From: Emmanuel Pelletier
Date: Oct 19, 2018 1:31AM

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.


Thank you,
Emmanuel Pelletier
Web developer, Empreinte Digitale