35 lines
2.0 KiB
Plaintext
35 lines
2.0 KiB
Plaintext
== 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.
|
|
|
|
== How to fix it in JSX
|
|
|
|
Check the spelling of the aria-* attributes and verify that they are actually supported by the element role.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<div role="checkbox" aria-chekd={isChecked}>Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
|
|
----
|
|
|
|
To fix the code remove non-compatible attributes or replace them with the correct ones.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
<div role="checkbox" aria-checked={isChecked}>Unchecked</div>
|
|
----
|
|
|
|
== Resources
|
|
=== Documentation
|
|
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques[Using ARIA: Roles, states, and properties]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes[ARIA states and properties (Reference)]
|
|
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles[ARIA roles (Reference)]
|
|
|
|
=== Standards
|
|
|
|
* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]
|