38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
== Why is this an issue?
|
|
|
|
include::../../../shared_content/jsts/aria-intro-1.adoc[]
|
|
|
|
This rule checks that when using the `role` property in DOM elements, its value is a valid non-abstract ARIA role.
|
|
|
|
This rule does not cover non-DOM elements, such as custom components.
|
|
|
|
== How to fix it in JSX
|
|
|
|
Check that each element with a defined ARIA role has a valid non-abstract value.
|
|
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
<div role="meth" aria-label="a^{2} + b^{2} = c^{2}">
|
|
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
|
|
</div>
|
|
----
|
|
|
|
To fix the code use a valid value for the ARIA role attribute.
|
|
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
|
----
|
|
<div role="math" aria-label="a^{2} + b^{2} = c^{2}">
|
|
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
|
|
</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/Roles[ARIA roles (Reference)]
|
|
|
|
=== Standards
|
|
|
|
* W3C - https://www.w3.org/TR/wai-aria-1.2/[Accessible Rich Internet Applications (WAI-ARIA) 1.2]
|