Accessibility in React Carousel component
30 Jan 20232 minutes to read
The Carousel component has been designed, keeping in mind the WAI-ARIA specifications, and applying the WAI-ARIA roles, states and properties along with keyboard support for people who use assistive devices. WAI-ARIA accessibility support is achieved through attributes like aria-roledescription, aria-label, aria-current, aria-live, aria-role and aria-hidden. It provides information about elements in a document for assistive technology. The component implements keyboard navigation support by following the WAI-ARIA practices and has been tested in major screen readers.
ARIA attributes
The carousel component is designed by considering WAI-ARIA standard. Carousel is supported with ARIA Accessibility which is accessible by on-screen readers and other assistive technology devices. The following list of attributes is added to the Carousel.
| Roles and Attributes | Functionalities |
|---|---|
aria-roledescription |
The role description attribute should be added for the root element (carousel) and each carousel slide item (slide). |
aria-label |
Previous, next and play/pause buttons and all indicator elements. |
aria-current |
For the active item indicator element, aria-current is set to true. |
aria-hidden |
For all carousel elements except the currently visible item, aria-hidden is set to true. |
aria-live |
For carousel items element, when autoPlay is true, aria-live is set to off; when autoPlay is false, aria-live is set to polite. |
aria-role |
For carousel slide item, aria-role should be group. |
Keyboard interaction
By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combination for interacting with the Carousel.
| Key | Description |
|---|---|
| Alt + J | Keys to focus the carousel component (done at application end). |
| Arrows | Keys to navigate between slides. |
| Home | To navigate to the first slide. |
| End | To navigate to the last slide. |
| Space | To play/pause the slide transitions. |
| Enter | To perform the respective action on its focus. |