WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousel next and previous buttons


From: Tim Harshbarger
Date: Dec 20, 2017 10:03AM

I wonder if this might be an example of the difference between making user interfaces accessible and designing accessible user interfaces.

Making the user interface accessible basically involves ensuring someone can click the buttons and move to the next or previous slide. If they want to know if they are on the right slide, they can use a screen reader to explore the interface--that is if they use a screen reader.

Designing an accessible user interface means understanding how people might use the interface to perform tasks. For example, adding a live region to read some or all of the slide after the button is pressed to advance the slide, facilitates the task of letting a screen reader user know if they want to spend more time exploring that slide or if they need to go to the next slide to find what they might be looking for.

One approach just looks at the UI and makes it accessible. The other approach is to look at how people will utilize that UI and figure out how to facilitate those tasks in an accessible manner.

Just a thought.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, December 20, 2017 8:27 AM
To: Lovely, Brian < <EMAIL REMOVED> >; WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Carousel next and previous buttons

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>
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

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.
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Sent: Tuesday, December 19, 2017 3:48 PM
> Subject: [WebAIM] Carousel next and previous buttons
> Hi All,
> Using any example of an paused accessible carousel, when a screen reader
> user presses enter on a previous or next button, should:
> 1) Should focus be placed within the content on the previous or next slide
> and should this be announced.
> 2) Should nothing announce and the onus be on the user to navigate into the
> slide content themselves.
> 3) Is either 1) or 2) acceptable?
> Let's us https://wet-boew.github.io/v4.0-ci/demos/tabs/tabs-carousel-en.html
> as an example of accessible sliders.
> My requirements to devs have thus far been that on pressing a previous or
> next button focus should automatically go to the slide content which should
> announce preferably its heading, first, followed by slide (e.g. 2 of 3),
> followed by content, etc.
> What does everyone think?
> Thank you in advance!
> Rob C
> > > http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >

Work hard. Have fun. Make history.