ARIA attribute names need to be spelled correctly
- Rule:
axe/aria-valid-attr - Checks: ARIA attributes must conform to valid names
- WCAG: 4.1.2
- Fix class:
mechanical: A fix needs no authored text or visual decision.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”The name is misspelled, such as aria-labeledby or aria-lable
Section titled “The name is misspelled, such as aria-labeledby or aria-lable”Correct the spelling: aria-labelledby has two Ls, and the attribute is aria-label. Browsers ignore an unknown aria- attribute, so the element now gets none of its effect.
<span id="qty-label">Quantity</span><input type="number" aria-labelledby="qty-label" min="1" value="1">The attribute is invented, such as aria-role or aria-tooltip
Section titled “The attribute is invented, such as aria-role or aria-tooltip”Use the real mechanism: the role attribute instead of aria-role, and aria-describedby pointing at the tooltip instead of aria-tooltip. Only the attributes the ARIA specification defines do anything.
A custom data hook starts with aria-
Section titled “A custom data hook starts with aria-”Rename it to a data- attribute, such as data-state. The aria- prefix is reserved for ARIA.
Fixes that fail
Section titled “Fixes that fail”Deleting the misspelled attribute
Section titled “Deleting the misspelled attribute”The rule passes, but what the attribute was meant to do, such as naming a field, is still not done.
Correcting the spelling without checking the value
Section titled “Correcting the spelling without checking the value”Once the attribute is spelled right it takes effect, so an id it points at must exist and hold the right text, or the element gets a wrong or empty name.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.