WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Emmanuel Pelletier
Date: Oct 19, 2018 7:32AM


That's a fine idea.

But if I do that, the interactive stuff in the carousel is still
focusable via the tab key while using a screen reader.
I'd say this makes it not okay to do. There was a conversation about
this a few days ago in this list and it didn't seem right to conclude
"screen reader = not using tab", but maybe I'm wrong.

Emmanuel

On 10/19/18 2:13 PM, Swift, Daniel P. wrote:
> 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
> > > > > > > > .
>