Provide functionality to select carousel items and to inform users about the change of carousel items.
Add previous and next buttons
Provide buttons to allow users to switch back and forth between items. Use
Announce the current item
Use a WAI-ARIA live region to inform screen reader users what item is currently shown. In this example, a visually hidden, “polite” live region is used and added to the carousel when the carousel is loaded. Then, when clicking the previous or next buttons, the text “Item x of y” (with x for current item number and y for the number of items) is set to this live region. Capable screen readers will announce this text.
Allow the user to maintain control of the keyboard focus. When the carousel advances automatically, users should not be drawn away from their current place in the page. Also, do not move keyboard focus when the previous or next buttons are used; moving the focus makes it harder for users to browse back and forth between the slides.
Add navigation buttons
Display buttons for each item in the carousel and highlight the current item. This allows users to get an overview of the carousel content, where they are in the sequence and will enable them to navigate directly to any item.
Focus the selected carousel item
When users select an item with those navigation buttons, the focus should be set on the selected item. In this case, the focus needs to be set to the
<li> element that has the class
current set, after the change or transition. This makes interaction easier for keyboard and assistive technology users.
<li> elements cannot receive focus. By setting its
tabindex attribute to
Related WCAG resources
These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)
4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)