WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousels again

for

From: Birkir R. Gunnarsson
Date: Jul 15, 2020 6:20AM

This should work.
A few extra recommendations.

1. Make sure each slide starts with a heading (the slide title should
be a heading), that offers a screen reader user another mechanism to
jump to the slide title, you can even code it as a live region and
that would be the notification.
2. Mark the carousel container with role="complementary" and
aria-label="caroussel" or "slide show" so screen reader users clearly
see the boundries of the component.
3. Ideally, place a button to stop the automation up with the skip
link for the page, it can be coded as the skip link (only visible when
it receives keyboard focus), this enables a keyboard only/screen
reader user to quickly stop the animation.


On 7/15/20, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> Hi all
>
>
>
> Still trying to pin down a carousel that would work with a screen reader
> and
> with a switch control. Would the following work?
>
>
>
> In order, here's the elements in the carousel:
>
>
>
> 1. Pause auto play button
> 2. Previous slide(s) button
> 3. Asset(s)
> 4. Next slide(s) button
>
>
>
> The user can tab to all four elements.
>
> When the carousel is on the first asset(s), then the 'Previous' button is
> "not available"; same thing goes for the 'Next' button on the last
> asset(s).
>
> A screen reader user would pause the carousel, then tab through the rest of
> the elements. Each asset should have alt text. When the user gets to the
> 'Next' button and hits it, aria live informs the user that the next
> asset(s)
> has appeared in the carousel but the focus stays on the 'Next' button. The
> user then back tabs to the asset(s).
>
> If there is more than one asset shown at once, the aria live informs the
> user "Next three programmes" for example.
>
>
>
> Thanks in anticipateion.
>
>
>
> Cheers
>
>
>
> Barry
>
>
>
>
>
>
>
> > > > >


--
Work hard. Have fun. Make history.