aria-valid-attr
aria-* attributes must be real, defined ARIA attributes
Checks that every aria-* attribute name present in the DOM is a real attribute defined by the WAI-ARIA specification.
Applies to. Applies to any element in the composed DOM that carries at least one attribute whose name starts with "aria-".
Expectation. Each aria-* attribute name is a real attribute defined by the WAI-ARIA specification (catches typos / made-up attribute names, which are silently ignored by assistive technology and therefore a real, deterministic defect). Reported at CANTTELL rather than FAIL: an aria-* attribute the spec does not define is inert, so nothing about the element's exposed name, role or value changes because it is there. Where the author meant a real attribute and the element ends up without a name, that absence is the naming rules' decision, not this one's. ACT 5f99a7 maps 1.3.1/4.1.2 as secondary requirements, "less strict" than the rule itself.
What a finding reports.
attr: the aria-* attribute name that WAI-ARIA does not define.
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<button aria-label="Save">Save</button>
aria-label is a real, defined ARIA attribute.
<button aria-labeledby="x">Save</button>
aria-labeledby is a typo (the real attribute is aria-labelledby) and is silently ignored by assistive technology.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
ARIA_ATTR_INVALID
- Inspect the element the report names and note the unknown aria-* attribute.
- Check whether it is a misspelling of a real one (aria-lable, aria-labeledby, aria-describeby, aria-hiden) or a made-up hook (aria-qa, aria-test).
- If it is a misspelling, open the Accessibility pane in the browser's developer tools and check whether what the real attribute would give (name, description, hidden state) is present anyway.
- With a screen reader, move to the element and listen to what is announced.
Pass. The attribute is a data hook not meant for assistive technology, or what it meant is supplied another way.
Fail. It is a typo of a real attribute and its effect is missing, such as a control with no name or decorative content not hidden, which fails WCAG 4.1.2 (ACT 5f99a7).