in Carousels Tutorial

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 <button> elements to provide semantic meaning, support for assistive technologies, and consistent keyboard behavior. Create and add the buttons using JavaScript, as they only work when JavaScript is available anyway.

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.

Find more information about WAI-ARIA in the WAI-ARIA Overview, the WAI-ARIA Authoring Practices and the Specification.

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.

The list with buttons in the example below is added using JavaScript, with a number on the button that corresponds to the carousel item. The buttons are numbered matching the corresponding carousel items. The button for the active carousel item is highlighted both visually, and by using text that is visually hidden (for screen readers).

See the carousel styling page for more information on how to highlight the active carousel item in an accessible way.

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.

By default, <li> elements cannot receive focus. By setting its tabindex attribute to -1, the element is enabled to receive focus through JavaScript.

Back to Top