Accessibility in Vue Carousel component
26 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 |
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.