Valid ARIA States And Properties
ID |
html.aria_props_valid |
Severity |
high |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
Html |
Tags |
accessibility, reliability |
Description
Flags an aria-* attribute whose name is not a WAI-ARIA state or property, or whose value is not
one that property accepts.
Rationale
Both halves fail the same way, and they fail silently. An unrecognised aria-* name stays in the
DOM and is then ignored by the accessibility tree; a value outside the property’s vocabulary is
discarded just as quietly. Either way the element looks annotated in the source and is unannotated
to a screen reader, and the browser says nothing.
<div aria-lable="Close">x</div> <!-- FLAW — misspelt, the label is never announced -->
<div aria-hidden="yes">x</div> <!-- FLAW — aria-hidden is a boolean, "yes" is not -->
<h2 aria-level="two">Title</h2> <!-- FLAW — aria-level takes an integer -->
<div aria-label="Close">x</div> <!-- OK -->
<h2 aria-level="2">Title</h2> <!-- OK -->
<div aria-hidden="${collapsed}">x</div> <!-- OK — settled at render time, not judged here -->
<div th:aria-hidden="yes">x</div> <!-- OK — a template directive, not plain HTML -->Only a value that can be read as written is judged. An attribute carrying a template expression is
decided at render time and is left alone, and so is a valueless or empty aria-* attribute, which
ARIA reads as the property’s undefined state rather than as a wrong value. Values are matched
case-insensitively, as browsers read them. Free-string properties such as aria-label accept any
text, so only their name is ever in question.