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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of <EMAIL REMOVED>
> Sent: Tuesday, December 19, 2017 3:48 PM
> To: <EMAIL REMOVED>
> 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.