Aria-Role Written Instead Of Role
ID |
html.role_attr_instead_aria_role |
Severity |
high |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
Html |
Tags |
accessibility, reliability |
Rationale
WAI-ARIA defines no aria-role property. The role of an element is carried by the plain role
attribute, which is the one part of ARIA without the prefix — which is exactly why this is written by
hand so often. The browser keeps the unknown attribute in the DOM and the accessibility tree ignores
it, so the element falls back to the implicit role of its tag, and for a div that is no role at
all. Nothing warns: the markup looks annotated and the element is anonymous to a screen reader.
<div aria-role="button">Save</div> <!-- FLAW — the attribute is role, with no prefix -->
<div aria-role="buton">Save</div> <!-- FLAW — wrong attribute and a typo in the value -->
<div aria-role>Save</div> <!-- FLAW — no value makes the name right -->
<div role="button">Save</div> <!-- OK -->
<div aria-roledescription="slide">1</div> <!-- OK — that one is a real ARIA property -->
<div data-aria-role="button">Save</div> <!-- OK — a data attribute, not an ARIA one -->The attribute name is the whole defect, so the value plays no part in the decision — it is read only
to name the fix. An empty or valueless aria-role is reported like any other, and so is a directive
spelling such as th:aria-role, which puts an aria-role on the rendered page: what a template
hides is the value, never the presence. A namespaced element such as <h:panelGroup> is skipped, as
everywhere else in this catalog.
The rule that validates aria-* names against the ARIA property list stays silent on this one
attribute and leaves it here, so the author gets one finding carrying the fix — rename it to role —
rather than two findings describing the same mistake in weaker terms.
Remediation
Rename the attribute to role, keeping the value when it already names a role. If the element only
needs the semantics of a standard control, use the HTML element whose implicit role already says so —
a button needs no role at all.
<div role="button">Save</div>
<button type="submit">Save</button>