Techniques
Avoid using carousels
Carousels can be hard to operate for users navigating using keyboards, especially if they rotate using a timer rather than allowing a user to advance the carousel at their leisure. This is particularly disorientating for screen reader users, who may not realise the page is changing state, and it can be difficult for those who need more time to navigate to reach the carousel before it rotates.
It is difficult for users to see how much content is available in a carousel. Many users will miss (presumably important) content that appears on later carousel ‘slides’.
If you do use a carousel…
- Give users the option to navigate through each item in the carousel themselves, at their own pace;
- Provide “previous” and “next” buttons for mouse users. When “previous” is selected, the carousel should move to the previous slide; when “next” is selected, the carousel should move to the next slide. On the last slide, the “next” button should take the user back to the first slide. Similarly, on the first slide, the “previous” button should take the user back to the last slide.
- Allow keyboard users to tab continuously through the slides. Exclude the “previous” and “next” buttons from the tab order, so that they do not receive keyboard focus. On tabbing the next slide should be brought into view;
- For keyboard users, once the user has tabbed through the slides, focus should move to the next interactive element that follows the carousel – it should not wrap to the first slide, otherwise keyboard users will have no means of exiting the carousel;
- Screen reader users do not need to know that the content has been collected in a carousel. This is just a list of items.
See If you must use a carousel, make it accessible for a detailed explanation of these recommendations.
If your carousel auto-rotates, make sure it stops when appropriate
- Provide a stop/play button so users are able to freeze the carousel in the current state and restart it once they have read it. This is particularly important for supporting assistive technologies operating in a mode that does not move either keyboard focus or the mouse;
- Stop rotation when the keyboard focus enters the carousel. It must not restart unless the user explicitly requests it;
- Stop rotation when the mouse pointer is over the carousel.
Provide a link to skip past the carousel
If there is a large number of items in the carousel, it may be very time-consuming to tab through all of the items, just to get past the carousel.
- Provide a link above the carousel to notify users they are about to enter a carousel, and give them the option to skip it if desired;
- If the carousel does not have an associated heading, use a visually-hidden heading or the link itself to describes what's in the carousel, so users can decide whether or not to skip it (for example, “Skip recommended products”).
If you decide to communicate the presence of a carousel to screen reader users…
Provide announcements when slides change
When automatic rotation is turned off, the carousel slide content is included in a live region. This makes it easier for screen reader users to scan through the carousel slides. When screen reader users activate the next or previous slide button, the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content.
But only provide announcements for static carousels
If automatic rotation is turned on, the live region must be disabled. If it is not, the page will become unusable as announcements of the continuously changing content will constantly interrupt anything the user is trying to read.
Examples of good practice
References
WCAG 2.1
- 2.1.1 Keyboard (A)
- 2.2.1 Timing Adjustable (A)
- 2.2.2 Pause, Stop Hide (A)
- 3.2.5 Change on Request (AAA)
EN 301 549 v 2.1.2
- 9.2.1.1 Keyboard
- 9.2.2.1 Timing Adjustable
- 9.2.2.2 Pause, Stop Hide