Accessibility in React Carousel component
25 Jan 20245 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.
The accessibility compliance for the Carousel component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.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 has been 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 has been grouped. |
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. |
| Tab | To Move focus through the interactive elements. |
| Shift + Tab | To Move focus through the interactive elements. |
Ensuring accessibility
The Carousel component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Carousel component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Carousel component with accessibility tools.