Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus through interactive elements in the carousel. Rotation control, previous slide, and next slide buttons precede the slide content in the Tab sequence. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter , Left Arrow , Right Arrow | Display next or previous slide in the carousel. |
Roles and attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
tabIndex="0" | div | Includes the element in the Tab sequence. | |
list | The ARIA list role can be used to identify a list of items. It is used to identify a list container. | ||
listitem | The ARIA listitem role can be used to identify an item inside a list of items. | ||
aria-current="active" | div | aria-current state on an element indicates that this element represents the current item within a container or set of related elements. | |
aria-label="Previous" | button | Defines a string value that labels button that opens previous list item. It is a required for buttons without text content. | |
aria-label="Next" | button | Defines a string value that labels button that opens next list item. It is a required for buttons without text content. |
Considerations for developers and designers
Roles and attributes
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.
| Attribute | Element | Usage |
|---|---|---|
aria-label="Previous" | button | Defines a string value that labels button that opens previous list item. It is a required for buttons without text content. You can change the aria-label for this button to specify the list item. |
aria-label="Next" | button | Defines a string value that labels button that opens next list item. It is a required for buttons without text content. You can change the aria-label for this button to specify the list item. |
Resources
- Mozilla guides about list role and listitem role have all necessary information for better understanding of how list works with screen readers.
- W3 carousel examples has detailed information about the accordion accessible behavior.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "In web content Beauty of Nature image carousel".
3. Screen reader goes into the active element.
4. Screen reader says "Previous button".
5. Screen reader goes to the next element.
6. Screen reader says "list 3 items".
7. Screen reader goes to the next element.
8. Screen reader says "A cyclist performing stunts in the forest current item empty slide 1 of 3".
9. Screen reader goes to the next element.
10. Screen reader says "A vulture flies with its wings spread wide empty slide 2 of 3".
11. Screen reader goes to the next element.
12. Screen reader says "A pug wrapped in a blanket sits on the road in the forest empty slide 3 of 3".1. Screen reader goes into the active element.
2. Screen reader says "In web content Beauty of Nature image carousel".
3. Screen reader goes into the active element.
4. Screen reader says "Previous button".
5. Screen reader goes to the next element.
6. Screen reader says "list 3 items".
7. Screen reader goes to the next element.
8. Screen reader says "A cyclist performing stunts in the forest current item empty slide 1 of 3".
9. Screen reader goes to the next element.
10. Screen reader says "A vulture flies with its wings spread wide empty slide 2 of 3".
11. Screen reader goes to the next element.
12. Screen reader says "A pug wrapped in a blanket sits on the road in the forest empty slide 3 of 3".