org.sonar.l10n.web.rules.Web.S6842.html Maven / Gradle / Ivy
Why is this an issue?
Non-interactive DOM elements are those that do not have built-in interactivity or do not require user interaction. Examples include
<div>, <p>, <img>, <h1> to <h6>, and
<ul>, among others. These elements are typically used to structure content and layout but do not have any inherent interactive
behavior.
Interactive ARIA roles, on the other hand, are used to make elements interactive and accessible. These roles include button,
link, checkbox, menuitem, tab, and others. They are used to communicate the type of interaction
that users can expect from an element.
Non-interactive DOM elements should not use interactive ARIA roles because it can confuse assistive technologies and their users. For example, if a
<div> (a non-interactive element) is given an interactive role like "button", assistive technologies like screen readers will
announce it as a button. However, since <div> doesn’t have the inherent behavior of a button, it can confuse users who expect it to
behave like a button when interacted with.
This can lead to a poor user experience and can make the website less accessible for users relying on assistive technologies. Therefore, it’s
important to ensure that non-interactive DOM elements are not given interactive ARIA roles.
How to fix it
Ensure that non-interactive DOM elements do not use interactive ARIA roles.
Code examples
Noncompliant code example
<li role="button">Foo</li> <!--Noncompliant; "li" isn't interactive, but "button" is-->
Compliant solution
<li role="listitem">Foo</li>
Resources
Documentation
- WCAG - Name, Role, Value
- WCAG - WAI-ARIA Roles
- MDN web docs - WAI-ARIA Roles