WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousel next and previous buttons

for

From: Birkir R. Gunnarsson
Date: Dec 20, 2017 7:27AM

Good thinking there.
Another thing I forgot to mention is that you need to make sure a
screen reader user knows this is a carousel.
So use the region role and an aria-label around the slide content,
something like
<div role="region" aria-label="carousel">
<h2>slide title</h2>
content
</div>
You can put the control button inside or outside the ara.
Also makesure slide titles start with headings for easy navigation.
Then I would go with the live region I described earlier so the sreen
reader user gets a feedback that pressing the button changed the
content.


On 12/20/17, Lovely, Brian via WebAIM-Forum
< <EMAIL REMOVED> > wrote:
> I tend toward an "inform and empower" policy when it comes to coding with
> screen readers in mind. I don't suppose any of us think that a screen reader
> user wants an entire page read out; that's just too much information to
> absorb, and the user doesn't have the ability to decide what gets read out
> and when. While this is an extreme example, I think it can inform our
> decisions on a smaller scale.
>
> I wouldn't read anything automatically, nor would I recommend shifting focus
> from the slide controls. A carousel, for better or worse, is a common
> feature that users recognize. A screen reader user who encounters a
> "previous" or "previous slide" button is likely to examine the surrounding
> elements and will then discover that they have encountered a carousel. It's
> the user's decision to consume the slide contents or not. As to shifting
> focus off the button when it is activated, what if a user wants to advance
> the carousel by more than one slide? Imagine how irritating it would be to
> activate the "next" button, have to navigate back to it, activate it again,
> and so on.
>
>