How to fix: Invalid or misspelled ARIA attributes
Fix invalid ARIA attributes by correcting misspelled aria-* names (aria-lable → aria-label) or removing invented ones, because browsers and assistive technology silently ignore an attribute they don't recognize — the accessible name or state you meant to add never reaches the user.
What it is
ARIA attributes are the aria-* family defined by the WAI-ARIA specification — roughly fifty attributes such as aria-label, aria-expanded, aria-describedby, and aria-hidden that communicate names, states, and relationships to assistive technology. Crucially, HTML does not validate attribute names: an unknown attribute is simply ignored, with no console error, no visual difference, and no warning of any kind.
That silence is what makes this failure so common and so persistent. A one-letter typo like aria-lable, the classic single-L misspelling aria-labeledby (the correct spelling uses the British double-L: aria-labelledby), a hyphenation slip like aria-described-by, or an invented attribute like aria-tooltip all look plausible in code review and behave identically to correct code in the browser — for sighted users. For a screen reader user, the label, description, or state that attribute was supposed to convey simply does not exist.
This rule is about the attribute NAME itself. Two sibling rules cover the neighboring failure modes: invalid role values (role="buton") are caught by the invalid-ARIA-roles rule, and correctly-spelled reference attributes that point at missing ids are caught by the broken-ARIA-references rule. Together the three catch the ways hand-written ARIA silently falls apart.
Who it affects & why it matters
Screen reader users bear the direct cost: a misspelled aria-label means an unnamed button, a misspelled aria-expanded means a disclosure whose state is never announced, a misspelled aria-describedby means instructions that are never read. The interface works perfectly for everyone else, so the failure routinely ships and stays shipped.
Voice-control users are affected the same way — they target controls by accessible name, and a control whose name never registered can't be spoken to. Developers ultimately feel it too: this is a class of bug with zero feedback, which is exactly why an automated spelling check against the real vocabulary is so valuable.
An ARIA attribute that fails to convey a name, role, or state falls under WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value — Level A, the minimum conformance tier — and WCAG 2.1 Level AA, the benchmark courts apply to ADA website claims, includes every Level A criterion. Because attribute names are machine-checkable, this is among the easiest findings for an auditor or plaintiff's tool to document at scale.
The WebAIM Million study has repeatedly found that pages using ARIA average more detectable accessibility errors than pages without it — hand-authored ARIA is error-prone, and silent misspellings are a big reason why. The fix costs nothing: correct the spelling or delete the attribute, and the accessibility you already wrote finally reaches users. With lawsuits rising and most targeting businesses under $25 million in revenue, clearing silent, documentable failures like this is cheap insurance.
How to fix it
- Search your templates and components for aria- and list every attribute in use.
- Check each name against the WAI-ARIA vocabulary — the official spec list or your scanner's findings — remembering that aria-labelledby uses the British double-L spelling.
- Correct genuine typos in place; the attribute starts working the moment the spelling matches.
- Delete invented attributes that don't exist in the spec, and express the intent another way — usually a native HTML element or a real ARIA attribute.
- Prefer native HTML over ARIA where possible (a <button> needs no role or state attributes at all), then re-scan to confirm every aria-* name is valid.
<button aria-lable="Close dialog">×</button>
<input id="email" aria-described-by="email-hint">
<p id="email-hint">We never share your email.</p><button aria-label="Close dialog">×</button>
<input id="email" aria-describedby="email-hint">
<p id="email-hint">We never share your email.</p>How AccessKnight detects this
AccessKnight walks every element's attributes and checks each aria-* name against the full WAI-ARIA vocabulary, including the newer additions such as aria-description and aria-braillelabel. Unknown names are flagged, and when the typo is within two characters of a real attribute the fix message includes a did-you-mean suggestion — aria-lable suggests aria-label, aria-labeledby suggests aria-labelledby. Attribute values are not judged by this rule: invalid role values and references to missing ids are caught by their own dedicated rules.