org.sonar.l10n.web.rules.Web.S6811.html Maven / Gradle / Ivy
Why is this an issue?
ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide
additional semantics to help assistive technologies, like screen readers, interpret the element.
Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly
defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based
on the type of the element. For example, an anchor tag <a href="#" /> has an implicit role of "link".
This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA
property aria-required is not supported by the role link. Therefore, using aria-required on an anchor tag would
violate this rule.
<div role="checkbox" aria-chekd="true">Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
How to fix it
Check the spelling of the aria-* attributes and verify that they are actually supported by the element role. Remove non-compatible attributes or
replace them with the correct ones.
<div role="checkbox" aria-checked="true">Unchecked</div>
Resources
Documentation
- MDN web docs - Using ARIA: Roles, states, and
properties
- MDN web docs - ARIA states and properties (Reference)
- MDN web docs - ARIA roles (Reference)
Standards