Carousel
Carousel
is designed to display either single or multiple slides at a time, allowing users to increment or decrement through the sequence.
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
- Avoid using infographics, maps, charts as images or images of text.
- Order slides by importance, with the most critical info first.
- Tablist components provide keyboard navigation, making them less suitable for mobile devices where space is limited and users often prefer gesture-based slide navigation.
- If slides contain focusable elements, then add carousel controls to the top, so they receive focus first.
- If slides do not contain focusable elements, then carousel controls can be placed at the top or bottom.
If using Autoplay, then additional considerations are required
- include accessible controls to start and stop the autoplay feature, allowing users to manage the animation according to their preferences.
- consider requiring user consent to enable autoplay, especially for users who may find automatic movement disorienting.
- stop the autoplay if the user hovers over the carousel.
- stop the autoplay if the user drags a slide.
- stop the autoplay when content within a carousel slide receives focus, ensuring users can interact with the content without distraction.
- ensure screen readers announce changes in slide content during autoplay, providing context for visually impaired users.
Key | Function |
---|---|
Tab |
|
Enter |
|
Shift + Tab |
|
Right arrow |
|
Left arrow |
|
Home |
|
End |
|
- Avoid using infographics, maps, charts as images or images of text.
- Order slides by importance, with the most critical info first.
- Tablist components provide keyboard navigation, making them less suitable for mobile devices where space is limited and users often prefer gesture-based slide navigation.
- If slides contain focusable elements, then add carousel controls to the top, so they receive focus first.
- If slides do not contain focusable elements, then carousel controls can be placed at the top or bottom.
If using Autoplay, then additional considerations are required
- include accessible controls to start and stop the autoplay feature, allowing users to manage the animation according to their preferences.
- consider requiring user consent to enable autoplay, especially for users who may find automatic movement disorienting.
- stop the autoplay if the user hovers over the carousel.
- stop the autoplay if the user drags a slide.
- stop the autoplay when content within a carousel slide receives focus, ensuring users can interact with the content without distraction.
- ensure screen readers announce changes in slide content during autoplay, providing context for visually impaired users.
Key | Function |
---|---|
Tab |
|
Enter |
|
Shift + Tab |
|
Right arrow |
|
Left arrow |
|
Home |
|
End |
|
- Avoid using infographics, maps, charts as images or images of text.
- Order slides by importance, with the most critical info first.
- Tablist components provide keyboard navigation, making them less suitable for mobile devices where space is limited and users often prefer gesture-based slide navigation.
- If slides contain focusable elements, then add carousel controls to the top, so they receive focus first.
- If slides do not contain focusable elements, then carousel controls can be placed at the top or bottom.
If using Autoplay, then additional considerations are required
- include accessible controls to start and stop the autoplay feature, allowing users to manage the animation according to their preferences.
- consider requiring user consent to enable autoplay, especially for users who may find automatic movement disorienting.
- stop the autoplay if the user hovers over the carousel.
- stop the autoplay if the user drags a slide.
- stop the autoplay when content within a carousel slide receives focus, ensuring users can interact with the content without distraction.
- ensure screen readers announce changes in slide content during autoplay, providing context for visually impaired users.
Key | Function |
---|---|
Tab |
|
Enter |
|
Shift + Tab |
|
Right arrow |
|
Left arrow |
|
Home |
|
End |
|