WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Swift, Daniel P.
Date: Oct 19, 2018 6:13AM


What about if you made the entire container aria-hidden true and used JS to replicate just the list components and present them in a container as SR-only?

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Emmanuel Pelletier
Sent: Friday, October 19, 2018 3:31 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Rendering a carousel as simple list for screen reader users?

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