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={isChecked}>Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
