role-required-carousel
Make sure that the role attribute of an interactive carousel element is not incorrect or missing.
Rule Severity : Serious
Description
Carousel elements should have their roles defined using the role attribute. For a list of appropriate roles, see ARIA-prescribed widget role.
Why is it important?
The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.
How to fix?
Define a carousel element using the button, tab, tablist, or tabpanel roles. You can also refer to the ARIA-prescribed widget roles for a more appropriate role based on your requirement. If the carousel element is not supposed to be interacted with, set the role as none or presentation.
Example
The following example shows a carousel without the role defined.
The following example defines the carousel roles correctly.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!