WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Carousel with multiple items - recommended keyboard operation when activating Next-button

for

From: Sonja Weckenmann
Date: May 14, 2023 10:53AM

Hi,

Thank you for your helpful thoughts. Personally, I would also leave
focus on the next button and yes, perhabs it might be helpful to
communicate the amount of new items via a live region.

I also think that the examples of the APG are still relevant, but one
has to think about meaningful labels for the set of items. Thanks also
for pointing out the output of aria-roledescription in JAWS.

Sorry I don't have a link to an example, I was discussing the topic with
an external colleague who was asked for a recommendation.

Sonja


Am 11.05.2023 um 21:28 schrieb Jon Gunderson:
> Mark,
>
> I think the ARIA example is still relevant, instead of a "slide" there is a
> group of 6 items, not clear what the items represent.
> In this case the region could have an accessible name with information on
> how many items are in the total set and which items are being shown at this
> time.
>
> If the items are part of a set, using ordered lists with aria-setsize,
> aria-posinset would be useful for screen readers to orient what items are
> being displayed and how many are in the total set.
>
> Is there a URL to an example?
>
> Jon
>
>
>
> On Thu, May 11, 2023 at 10:59 AM Mark Magennis < <EMAIL REMOVED> >
> wrote:
>
>> Jon,
>>
>> I've taken a look at the ARIA Practices carousel coding pattern and I
>> doubt that it is appropriate for the OP's circumstance. It seems to be
>> aimed at carousels that contain a single item like those typically used for
>> marketing image 'slide shows' at the top of a home page. I have been
>> reviewing a carousel that seems similar to the OP's in that it contains
>> multiple cards which are all links to courses and is scrolled a group at a
>> time, not a single card at a time. Given the nature of this carousel and
>> its situation within the page my opinion is that role="region" is
>> unnecessary and doesn't add any clarification or aid navigation, so its
>> aria-label is also redundant and although it is good to name the strip for
>> users who tab into it skipping past its heading, this can best be done on
>> the <ul>. The aria-roledescription="carousel" and
>> aria-roledescription="slide" are equally unnecessary and I believe
>> complicate things because "carousels of slides" is a visual metaphor that
>> may well be suited to a set of marketing images but this content is best
>> presented to screen reader users simply as lists of links to courses with
>> buttons to see more. So there are 'carousels' and there are 'carousels' and
>> they are all different and need to be coded differently.
>>
>> I also noted in testing that the addition of aria-roledescription="slide"
>> to the link's container caused JAWS to announce each link as a "slide" but
>> not a link when arrowing to it, so users wouldn't know that these are links.
>>
>> All in all, whilst these patterns are good to have it's important to make
>> sure they fit the context of the information and functionality you are
>> trying to present, and sometimes they need some tweaking.
>>
>> Mark
>>
>>