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-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 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|
||The role description attribute should be added for the root element (carousel) and each carousel slide item (slide).|
||Previous, next and play/pause buttons and all indicator elements.|
||For the active item indicator element,
||For all carousel elements except the currently visible item,
||For carousel items element, when
||For carousel slide item,
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.
|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.|