Are Your Carousels Built with Accessibility in Mind?

What if you’re looking at a carousel filled with captivating pictures, but every time you try to read the message, it just moves on? This would turn your curiosity into frustration, leaving you to wonder what you might have missed

For those are not familiar with carousels, they are collections of items called slides, each displaying content such as images, text, or videos. Users can navigate through these slides using buttons or allow them to move them automatically. Carousels are commonly used on websites to highlight featured content or promotions.

They can enhance user engagement and create visual interest. However, they also cause significant accessibility challenges for people with disabilities. Inaccessible carousels can confuse, frustrate, and ultimately exclude users from accessing key information.

 

How Carousel Inaccessibility Impacts Users with Disabilities

·       Screen reader users might get confused or disoriented, if slides that are not visible on the screen are incorrectly hidden. For example, if these slides are displayed off-screen instead of being properly removed from the accessibility tree, the screen reader may still announce content from those hidden slides. This can lead to situations where users hear information that they cannot see, making it unclear which slide is currently displayed and can cause frustrating navigation experience.

·       When slides rotate automatically and a screen reader user is unaware of this change, they may read an item on the first slide and then activate the command to navigate to the next element. As a result, instead of hearing the next item from slide one, they might unexpectedly hear content from slide two, without any indication that the information being announced pertains to a different context.

·       At times, screen readers may automatically announce the content of carousel slides during rotation, even when the user’s focus is elsewhere on the page. This can severely hinder navigation for screen reader users, as they may repeatedly hear announcements of the carousel content, which disrupts their ability to engage with other elements on the page. Such behaviour often arises from improper implementation of ARIA live region by the author, leading to a situation where rather than enhancing accessibility, instead creates additional barriers for users relying on assistive technologies.

·       People with cognitive disabilities or attention deficits can also be significantly affected by automatically moving slides in a carousel. The constant rotation of content can make it challenging for them to concentrate on the information presented on the rest of the page.

·       Automatic rotation can also be challenging for users with low vision, as it may not provide enough time for them to read the content comfortably.

·       Insufficient colour contrast between text and background can make it difficult for the low vision users to read the content.

 

Key Considerations for Designing an Accessible Carousel

From the points above, it's clear that users may face difficulties if they cannot stop the automatic slide rotation. Having control over the rotation is important for an accessible and user-friendly experience for all.

If the slides are auto rotating then:

·       You should provide a button stopping and restarting the rotation. This is particularly important for the assistive technology users who does not use keyboard and mouse.

·       It should stop rotating when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.

·       It should even stop rotating whenever the mouse is hovering over the carousel. This is necessary for the users who are having cognitive disability or attention deficit.

 

Other consideration include:

·       Provide buttons for the users to navigating on the previous slides and next slides.

·       You can optionally add controls or a group of controls to let users pick which slide to show. A common approach is to create slide picker controls using tabs. Each slide would be connected to a tab, and the content of the slide would be shown inside a tabpanel element.

·       If automatic rotation is enabled, the live region should be disabled. Otherwise, constant announcements of changing content would disrupt other tasks, making the page difficult to use for screen reader users. However, When automatic rotation is turned off, the carousel’s slide content should be placed in a live region. This allows screen reader users to easily navigate through the slides. When users activate the next or previous buttons, the new slide content should  announced, giving them immediate feedback on the change and helping them decide if they want to interact with the content

·       If the carousel is purely decorative, it should not receive focus from screen readers. To achieve this, apply aria-hidden="true" to the carousel container. This ensures that screen reader users are not distracted by unnecessary content.

·       Ensure that text on carousels meets the required 4.5:1 colour contrast ratio against its background to enhance visibility for all users. When text is placed over images, achieving adequate contrast can be difficult due to complex backgrounds. To address this, consider adding a semi-transparent overlay behind the text or blurring the image background to improve legibility while maintaining the carousel’s visual appeal.

 

Designing accessible carousel using ARIA properties

First, note that, it is highly recommended to use native HTML elements while designing carousels. We can use ARIA properties only if there is no HTML semantics for the particular ARIA property for enhancing the accessibility, or else if we are retrofitting existing code for which native HTML elements are not used.

Let us discuss in detail that how and where can we use ARIA properties for creating an accessible carousel.

 

Carousel Container:

It is the main container which contains all the components of the carousels including set of slides and other carousel controls. It should have

·       Either role as region or role as group, depending on the page structure.

·       Aria-roledescription should be set to carousel.

·       Appropriate programmatic label should be defined using aria-label or if visible label is present in text, then by associating it by aria-labeledbyid. Note that the word “carousel” should not be included in the aria-label, as we are already providing aria-rolediscription as “carousel”. Otherwise, screen reader will announce the word “carousel” twice.

 

Carousel Controls

These are controls for controlling automatic slide rotation, and the controls for navigating on the previous and next slides. It should have the following ARIA properties.

·       Role as button should be defined for these controls.

·       Appropriate programmatic label should be defined by using aria-label, or if visual label in text is present, then by associating it by using aria-labelledbyid. Ensure that the label should get change to “restart”, if user activates stop button, and wise-versa. Do not provide any state by using aria-pressed, if label is changing for the rotational controls.

 

Container for the set of Slides

This is the container holding set of slide elements. We can provide

·       Aria-atomic set to off. However, this is optional.

·       Aria-live set to

-          On, when automatic rotation is off, and

-          Off, when automatic rotation is on.

 

Slide Container

This contain images, videos, links or any other items which we would like to have. This should have

·       Role set to group

·       Aria-rolediscription set to slide

·       Appropriate accessible label by using aria-label, or if visible label is present in text, then it can be associated by using aria-labelledbyid. If unique name is not available, then we can use aria-setsize and aria-posinset. However, role group does not support aria-setsize and aria-posinset properties, so we need to include the position in aria-label. Tab implementation of carousel does not have this limitation.

 

You can refer to “Auto-Rotating Image Carousel with Buttons for Slide Control” for the example and the HTML code.

We have discussed only basic carousel implementation. You can refer to Carousel (Slide Show or Image Rotator) Pattern APG WAI to learn more carousels implementations in detail.

 

That's all from my side for today. Designing accessible carousels allows everyone, including those with disabilities, to navigate content smoothly. By keeping accessibility in mind, we can make carousels truly user-friendly and inclusive. I hope I’ve been able to explain how to design an accessible carousel in a simpler way.