E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 19 (In chronological order)

From: barry.hill3
Date: Wed, Jul 15 2020 4:12AM
Subject: Carousels again
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Wed, Jul 15 2020 6:20AM
Subject: Re: Carousels again
← Previous message | Next message →

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 ADDRESS REMOVED = < = EMAIL ADDRESS 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.

From: Tom Livingston
Date: Wed, Jul 15 2020 6:35AM
Subject: Re: Carousels again
← Previous message | Next message →

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


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399

From: Mohith BP
Date: Wed, Jul 15 2020 8:19AM
Subject: Re: Carousels again
← Previous message | Next message →

Hi Birkir,

Please help me to understand is there any specific reason to use
role="complementary"?
If the carousel is in the main section can role="region" be used
instead of role="complementary"?

Just curious to know if there are any specific reasons.

Thanks & Regards,
Mohith B. P.


On 7/15/20, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS REMOVED = < = EMAIL ADDRESS 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.
> > > > >

From: glen walker
Date: Wed, Jul 15 2020 12:10PM
Subject: Re: Carousels again
← Previous message | Next message →

role="region" is usually the last choice for a landmark because it's so
generic. It's kind of the <div> of landmarks. role="complementary" has
more semantic meaning so is preferable but technically you could use
either.

Note that role="region" is often ignored as a landmark unless it also has
an aria-label.

You can see more about the complementary landmark at
https://www.w3.org/TR/wai-aria/#complementary

Barry, in your original posting, you said next/prev would be disabled if at
the end/beginning of the carousel. While it's common to disable those when
at the end of a list, most carousels wrap around to the beginning/end if
you try to next/prev at the end, thus eliminating the need to disable them.


On Wed, Jul 15, 2020 at 8:19 AM Mohith BP < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Birkir,
>
> Please help me to understand is there any specific reason to use
> role="complementary"?
> If the carousel is in the main section can role="region" be used
> instead of role="complementary"?
>
> Just curious to know if there are any specific reasons.
>
> Thanks & Regards,
> Mohith B. P.
>
>

From: barry.hill3
Date: Thu, Jul 16 2020 2:10AM
Subject: Re: Carousels again
← Previous message | Next message →

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

From: barry.hill3
Date: Thu, Jul 16 2020 2:12AM
Subject: Re: Carousels again
← Previous message | Next message →

Many thanks for this, Birkir. Very useful. Those headings will be a great
tool.

From: joe
Date: Thu, Jul 16 2020 6:13AM
Subject: Re: Carousels again
← Previous message | Next message →

I would disagree with Glen (and others) on the use of a complementary
landmark over region landmark (with a label).

The ARIA spec has said and continues to say:

"complementary (role)

A landmark that is designed to be complementary to the main content at a
similar level in the DOM hierarchy, but remaining meaningful when separated
from the main content."

https://www.w3.org/TR/wai-aria-1.2/#complementary

" at a similar level in the DOM hierarchy, but remaining meaningful when
separated from the main content" to me has always indicated that a
complementary landmark should not be contained in the main landmark since it
should be "at a similar level in the DOM hierarchy" and be reusable on
multiple pages.

So if the carousel content is inside the main landmark, complementary should
not be used, instead region or section with a label would be the correct
choice for a landmark.

Joe Humbert

From: Steve Green
Date: Thu, Jul 16 2020 6:15AM
Subject: Re: Carousels again
← Previous message | Next message →

You beat me to it - I was about to say exactly the same thing.

Steve Green
Managing Director
Test Partners Ltd

From: joe
Date: Thu, Jul 16 2020 6:22AM
Subject: Re: Carousels again
← Previous message | Next message →

W3C landmark examples also says:

complementary landmarks should be top level landmarks (e.g. not contained
within any other landmarks).

https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.ht
ml

From: Mallory
Date: Thu, Jul 16 2020 10:10AM
Subject: Re: Carousels again
← Previous message | Next message →

A named section would work. The point of having an aria-anything around the thing at all was to denote that there was this whole carousel widget and its edges to those who can't see it.
<section aria-label="[name] carousel">
... carousel stuff...
</section>
Should be fine. And if there's a screen reader out there that ignores even named regions, no big loss, and while I get that sections are so overused that some AT ignores it, if they ignore them when used as intended, it's a bug on their end, like VoiceOver users not being exposed to list semantics in a navigation menu (and honestly, they may not miss that. Menu lists are more likely to be navigated by the links inside than by list-item for example anyway).

You could also name the section with a heading
<section aria-labelledby="aheading">
<h2 id="aheading">[name] carousel</h2> (or whatever)
...carousel stuff with h3, h3, h3, h3 (headings suggested by Birkir, levels just as an example)
</section>
Then the next section outside the carousel has the same heading level:
<h2>next content type section</h2>
For screen reader users who pay attention to heading levels (note, not all do), the fact that the next heading is back at the level of the section heading can suggest that we're out of the carousel content.

cheers,
_mallory

On Thu, Jul 16, 2020, at 2:22 PM, = EMAIL ADDRESS REMOVED = wrote:
> W3C landmark examples also says:
>
> complementary landmarks should be top level landmarks (e.g. not contained
> within any other landmarks).
>
> https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.ht
> ml
>
>

From: Tom Livingston
Date: Thu, Jul 16 2020 10:38AM
Subject: Re: Carousels again
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Jul 16 2020 12:40PM
Subject: Re: Carousels again
← Previous message | Next message →

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

From: glen walker
Date: Thu, Jul 16 2020 4:59PM
Subject: Re: Carousels again
← Previous message | Next message →

+1 for Birkir. I was too busy today to not be argumentative either.

From: Mallory
Date: Fri, Jul 17 2020 2:22PM
Subject: Re: Carousels again
← Previous message | Next message →

As a note, most of my recent audited sites used carousels for content (rather than marketing), in the middle of the pages.
Most recently, they were used extensively for paging through article teasers. Complimentary would be weird in those cases.

cheers,
_mallory

From: Mohith BP
Date: Mon, Jul 20 2020 12:05PM
Subject: Re: Carousels again
← Previous message | Next message →

Thanks Joe and Steve for clairifying.
I usually recommended role region along with the valid aria-label so
far in all the assessments.

On 7/18/20, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> As a note, most of my recent audited sites used carousels for content
> (rather than marketing), in the middle of the pages.
> Most recently, they were used extensively for paging through article
> teasers. Complimentary would be weird in those cases.
>
> cheers,
> _mallory
> > > > >

From: Todd Magnusson
Date: Mon, Jul 20 2020 4:47PM
Subject: Re: Carousels again
← Previous message | Next message →

Just a small reoly to the carousel thread in replies above. Android Talkback has an issue with <section> where it tends to read the entire content of a <section>, so be cognizant of that. Still not sure if that's a defect that's been reported to their internal A11Y mobile team.

— Todd

Get Outlook for iOS<https://aka.ms/o0ukef>
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Mohith BP < = EMAIL ADDRESS REMOVED = >
Sent: Monday, July 20, 2020 1:05:15 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Carousels again

Thanks Joe and Steve for clairifying.
I usually recommended role region along with the valid aria-label so
far in all the assessments.

On 7/18/20, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> As a note, most of my recent audited sites used carousels for content
> (rather than marketing), in the middle of the pages.
> Most recently, they were used extensively for paging through article
> teasers. Complimentary would be weird in those cases.
>
> cheers,
> _mallory
> > > > >

From: Mallory
Date: Tue, Jul 21 2020 1:43PM
Subject: Re: Carousels again
← Previous message | Next message →

I filed a bug against chromium a while back where any sections with a tabindex (even tabindex="-1") would act like it was a named region and also read the whole content out as the region name.

The Talkback one I've heard of too but I don't keep up with whether they've fixed it.

cheers
_mallory

On Tue, Jul 21, 2020, at 12:47 AM, Todd Magnusson wrote:
> Just a small reoly to the carousel thread in replies above. Android
> Talkback has an issue with <section> where it tends to read the entire
> content of a <section>, so be cognizant of that. Still not sure if
> that's a defect that's been reported to their internal A11Y mobile team.
>
> — Todd
>
> Get Outlook for iOS<https://aka.ms/o0ukef>
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of
> Mohith BP < = EMAIL ADDRESS REMOVED = >
> Sent: Monday, July 20, 2020 1:05:15 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Carousels again
>
> Thanks Joe and Steve for clairifying.
> I usually recommended role region along with the valid aria-label so
> far in all the assessments.
>
> On 7/18/20, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> > As a note, most of my recent audited sites used carousels for content
> > (rather than marketing), in the middle of the pages.
> > Most recently, they were used extensively for paging through article
> > teasers. Complimentary would be weird in those cases.
> >
> > cheers,
> > _mallory
> > > > > > > > > >
> > > > > > > > >

From: joe
Date: Tue, Jul 21 2020 3:09PM
Subject: Re: Carousels again
← Previous message | No next message

Hi All,

I just tested the issue Todd suggested at https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_section (Both with the code as is and adding an aria-labelledby attribute pointing to the h2s to the sections) with the latest version on TalkBack on a Pixel 2 running Android 10.

TalkBack did not read the entire contents of the <section> element so it appears that this issue has been fixed.

Thankx,
Joe Humbert
Accessibility Champion
Android & iOS Accessibility Novice