Carousels consist of a circular arrangement of sections (or slides) that 'slide into view' after a short duration. Carousels are mostly used on start pages to showcase key content.
The carousel's slides usually contain teaser images and text, often with links to other pages. In some carousels, the user has to activate a control to show the next or previous slide. In most cases, this animation happens automatically after a short interval (between 5 - 30 seconds). On some carousels, there are play and pause controls to stop and resume the animation.
A carousel in action
The following video shows a typical carousel in action.
On the page existenzgruender.de, an animated carousel shows a new slide with teaser content every 9 seconds.
- The user tabs to the teaser content and then to the pause button
- He activates the pause button with ENTER.
- This stops the motion of the carousel.
- The user then tabs back to the "MEHR" link and activates it.
- This opens a page about the business plan.
Typical usability problems with carousels
Carousels have general usability issues and more specific accessibility issues. They should be used carefully, if at all. These are common problems:
Auto-activity upsets users' activites
Carousels often present changes of content after the page has opened. They are often used on the start page and cover a significant area of the screen. Usually, they make new content slide into the visible area at fixed intervals, typically after 5-20 seconds.
This means that users who have just begun reading the heading or teaser text in a carousel slide find that this content unexpectedly dissapears. It is replaced by something else. This can be very irritating. The carousel movement can also be distracting for users who focus their attention on something else on the screen.
The motion is often impossible or difficult to stop
Often, carousels have no element to stop the motion. Sometimes, the motion stops when users move the cursor over the carousel or when they tab into the carousel contents, but many users do not know or expect that to happen.
When carousels have an element to stop the motion, it is often tucked away in the lower corner. It often has insufficient contrast. It its often not be keyboard-accessible or has weak contrast and focus indication. For low vision users who suffer perhaps most from carousels, this element is often very hard to track down.
The following examples show typical usability problems when interacting with carousels.
1 Low vision use: Finding a way to pause the carousel
Many carousels have no option at all for stopping the movement. When carousels have a pause button, it can be difficult to find. This is often because button contrast is poor, the button is very small, or it is badly positioned.
A low vision user looking at the website of Berlin (berlin.de) with modest browser zoom is given the task to 'stop the carousel'.
- The user does not see an obvious way to stop the carousel - there is a 'pause' button, but it has very weak contrast.
- She applies a left mouse click and assumes that this has done the trick, and the carousel movement has stopped.
- She begins to explore the carousel content by advancing through the slides, using the right arrow button.
- The carousel still moves, and she realizes that her action had not the intended effect.
- On a slide with a darker background, the user now spots the pause button and clicks it.
- She waits to see if the movement has stopped, and expresses the desire that all carousels should have a control for stopping them.
2 Screen reader use: Automatic output of carousel obstructing user interface output
Carousels that cannot be stopped may keep talking incessantly, even when other interface controls open on top of them. It is then very hard to distinguish the output of labels or other interface elements.
A screen reader user interacts with the health insurance website (barmer.de) The start page has a carousel that cannot be paused.
- The user traverses page content - the output of focused elements mixes with automatic output from the carousel
- Later in the interaction, the user opens a search field with a dropdown list of search term suggestions
- He cannot activate the text input field to type a search term
- While trying to interact with the form, the carousel keeps talking, obstructing the output of focused elements
- The user tells the screen reader to 'shut up'.
Accessibility tips for carousels
Check if you really want a carousel. Some hold that quite apart from accessibility issues, a carousel is not a particularly successful way of presenting content. Compare Should I use a carousel?
But if you do want to have one:
- Provide a clearly visible button to pause the carousel close to the carousel content. Usually, the pause button turns into a play button after activation. One option is to place the pause button on top of the slide (safeguarding sufficient contrast).
- Make sure the pause / play buttons have an accessible name reflecting the state. Screen reader users should hear something like "Pause animation" when the pause button is visible and the animation is active, and "Play animation" when the play button is visible and the carousel is paused.
- Don't swap slides too quickly. Movement and changes of content that are unrelated to user actions can be very disorienting, especially for low vision users who often see only a small section of the screen content.
- Stop the animation once the carousel content is focused (keyboard or mouse). This makes it easy for users to read teaser texts and follow links to content without being interrupted by the carousel animation.
- Make sure that the buttons that advance to the next or previous slide have good contrast. Users may want to explore carousel content at their own pace. The typical left and right arrow buttons at the edge of the carousel should be large and have good contrast.
- Ensure that interactive content in the slides is keyboard-operable. Either the arrows for next or previous slide can be focused and activated, or tabbing focuses the slide content and automatically advances the carousel when the focus moves to content of the next / previous slide. Links inside the slides can also be operated by the keyboard.
- Consider whether you can use the non-animated state of the carousel as a default. If users choose to see slides advancing automatically, they can still hit 'play'.
COMPARE cases with accessibility ratings
- Should I use a carousel? Jared Smith, Webaim (no date). A critical look at carousels.
- A content slider, Heydon Pickering, Inclusive Components, November 2017. An elegant, low-weight implementation.
Note: This would need a static alternative to meet WCAG 2.1 Success Criterion 2.5.1 Pointer Gestures.