WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousels again

for

From: Birkir R. Gunnarsson
Date: Jul 16, 2020 12:40PM

If I were feeling argumentative about the landmark use I would say things like:

1. carousels are typically independent on the page, they are displayed
between the header and the main landmark.
2. The ARIA spec is very specific about words like "should" and
"must", "should" is not a rule, it is a recommendation.
3. The complementary landmark has better screen reader support and
visibility than region, so if you really want to tell the screen
reader user about the boundries of the carousel, it is a better choice
4. Only a handful of users know what landmarks are, let alone the W3C
rules for how to use them.
;)
But I'm not feeling argumentative so I would never say those things.
*evil grin*
Example carousels:
Deque University:
https://dequeuniversity.com/library/aria/carousel
APG:
https://www.w3.org/TR/wai-aria-practices-1.1/#carousel
but I don't like the APG carousel pattern, in particular the
recommendation to use aria-roledescription. It is one of those ARIA
attributes that just don't make sense to me, + my testing with Jaws
evealed that it hides headings and other document structures inside
the aria-roledescription element.



On 7/16/20, Tom Livingston < <EMAIL REMOVED> > wrote:
> Here are the articles you asked me to send along, which are from 2019 and
> later so relatively up to date:
>
> https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/
>
> https://www.theppcmachine.co.uk/why-website-carousels-are-a-bad-idea/
>
> https://southernweb.com/2019/04/its-time-to-kill-the-website-image-carousel/
>
> https://www.impactbnd.com/blog/why-homepage-carousels-are-bad
> (This one has suggestions for what to use instead, which seem like common
> sense)
>
> http://shouldiuseacarousel.com/
> (Snarky but has some stats)
>
> A common takeaway from these is that they don't work. 1% of users click
> them, and even then it's mostly just the first slide, as well as useability
> and performance hit - particularly on mobile.
>
> Good luck!
>
>
> On Thu, Jul 16, 2020 at 4:11 AM < <EMAIL REMOVED> > wrote:
>
>> Totally agree with you about not using them, but my client insists on
>> using
>> carousels, so I'm trying to help them make them as accessible as
>> possible.
>> I've been researching these things for weeks now, but I'd still
>> appreciate
>> the articles you mention. I don't think there's a magic bullet, but it
>> would be good to get close at least.
>>
>> Cheers
>>
>> Barry
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Tom
>> Livingston
>> Sent: 15 July 2020 1:36 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Carousels again
>>
>> Hello,
>>
>> Just curious here, are you married to the carousel concept? Are you just
>> trying to see if you can create a carousel that is more accessible? Is a
>> client insisting on using one? The reason I ask these questions is that I
>> just went through the client scenario I mentioned and most of the
>> research
>> I
>> found was about why *not* to use a carousel. Aside from notorious
>> accessibility issues, carousels (or sliders) are bad in a number of other
>> areas. I may be way off base for you here, and I apologize, but I am just
>> trying to help. I can pass along some article links I came across if that
>> interests you.
>>
>> Sorry for the noise
>>
>>
>>
>>
>> On Wed, Jul 15, 2020 at 6:13 AM < <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
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>>
>>
>> --
>>
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>
>>
>> #663399
>> >> >> at
>> http://webaim.org/discussion/archives
>> >>
>> >> >> >> >>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> > > > >


--
Work hard. Have fun. Make history.