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
A working demo example for this code is available.
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.
See the carousel styling page for more information on how to highlight the active carousel item in an accessible way.
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