WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousels again

for

From: Mohith BP
Date: Jul 15, 2020 8:19AM

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