First things first - definitions:
- Carousel - A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides. Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and "rotates" the next or previous slide into view.
- Slider - A slider is an input where the user selects a value from within a given range. Sliders typically have a slider thumb that can be moved along a bar or track to change the value of the slider.
So now that we know we are actually talking about carousels ("slider" is a common misnomer for "carousel"), let's look at the accessibility requirements. Carousels have a lot of considerations when it comes to accessibility and there are no "out of the box accessible" carousels. The following details are from the ARIA design pattern for carousels:
- Buttons for displaying the previous and next slides are present.
- Optionally, a control, or group of controls, for choosing a specific slide to display. For example, slide picker controls can be marked up as tabs in a tablist with the slide represented by a tabpanel element.
- If the carousel can automatically rotate, it also:
- Has a button for stopping and restarting rotation. This is particularly important for supporting assistive technologies operating in a mode that does not move either keyboard focus or the mouse.
- Stops rotating when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.
- Stops rotating whenever the mouse is hovering over the carousel.
- If the carousel has an auto-rotate feature, automatic slide rotation stops when any element in the carousel receives keyboard focus. It does not resume unless the user activates the rotation control.
- Tab and Shift + Tab: Move focus through the interactive elements of the carousel as specified by the page tab sequence -- scripting for Tab is not necessary.
- Button elements implement the keyboard interaction defined in the button pattern. Note: Activating the rotation control, next slide, and previous slide do not move focus, so users may easily repetitively activate them as many times as desired.
- If present, the rotation control is the first element in the Tab sequence inside the carousel. It is essential that it precede the rotating content so it can be easily located.
Roles, States & Properties
- A carousel container element that encompasses all components of the carousel, including both carousel controls and slides, has either role region or role group. The most appropriate role for the carousel container depends on the information architecture of the page. See the landmark regions guidance to determine whether the carousel warrants being designated as a landmark region.
- The carousel container has the aria-roledescription property set to carousel.
- If the carousel has a visible label, its accessible label is provided by the property aria-labelledby on the carousel container set to the ID of the element containing the visible label. Otherwise, an accessible label is provided by the property aria-label set on the carousel container. Note that since the aria-roledescription is set to "carousel", the label does not contain the word "carousel".
- The rotation control, next slide control, and previous slide control are either native button elements (recommended) or implement the button pattern.
- The rotation control has an accessible label provided by either its inner text or aria-label. The label changes to match the action the button will perform, e.g., "Stop slide rotation" or "Start slide rotation". A label that changes when the button is activated clearly communicates both that slide content can change automatically and when it is doing so. Note that since the label changes, the rotation control does not have any states, e.g., aria-pressed, specified.
- Each slide container has role group with the property aria-roledescription set to slide.
- Each slide has an accessible name:
- If a slide has a visible label, its accessible label is provided by the property aria-labelledby on the slide container set to the ID of the element containing the visible label.
- Otherwise, an accessible label is provided by the property aria-label set on the slide container.
- If unique names that identify the slide content are not available, a number and set size can serve as a meaningful alternative, e.g., "3 of 10". Note: Normally, including set position and size information in an accessible name is not appropriate. An exception is helpful in this implementation because group elements do not support aria-setsize or aria-posinset. The tabbed carousel implementation pattern does not have this limitation.
- Note that since the aria-roledescription is set to "slide", the label does not contain the word "slide."
- Optionally, an element wrapping the set of slide elements has aria-atomic set to false and aria-live set to:
- off: if the carousel is automatically rotating.
- polite: if the carousel is NOT automatically rotating.
- Text within the slides should meet contrast ratio requirements
- Navigation controls should meet contrast ratio requirements
- All interactive elements should have a visible focus state
- Mouseover & focus states of elements should meet contrast ratio requirements