Skip to main content
Accessibility AccessLint 0.16

ARIA attributes must be valid (correctly spelled).

About this AccessLint rule

When an HTML element includes an attribute that starts with aria- but the attribute name is not defined in the WAI-ARIA specification, browsers and assistive technologies ignore it. This typically happens because of a typo or a misremembering of the correct attribute name. The result is that the intended state, property, or relationship is never communicated to users who rely on assistive technology.

Screen reader users are the most directly affected. If a developer writes aria-labelled instead of aria-labelledby, the element loses its accessible name entirely. A checkbox with aria-not-checked instead of aria-checked will not report its checked state. The developer's intent was correct, but the misspelling silently breaks the experience for anyone using a screen reader, braille display, or voice control software.

This rule relates to WCAG success criterion 4.1.2 Name, Role, Value (Level A), which requires that user interface components expose their name, role, and current state to assistive technologies through standard markup. An invalid ARIA attribute cannot expose anything because it is not recognized. The rule also touches on success criterion 1.3.1 Info and Relationships (Level A), since misspelled ARIA attributes can cause structural or relational information to go missing.

Common mistakes

A few misspellings show up repeatedly:

  • aria-labeledby instead of aria-labelledby (double "l" is correct, following British English spelling)
  • aria-role instead of role (the role attribute does not use the aria- prefix)
  • aria-description instead of aria-describedby (note that aria-description is valid starting in ARIA 1.3, but older specs do not include it)
  • aria-not-checked, aria-check, or other invented variations of aria-checked
  • aria-modal-open or similar compound names that do not exist in the spec

How to fix it

  1. Check the attribute name against the WAI-ARIA specification. The full list of supported states and properties is defined there.
  2. Correct the spelling. This is a mechanical fix — replace the invalid attribute name with the valid one.
  3. If you are unsure whether an attribute exists, search the spec for the property you need. For example, if you want to associate a label, search for "labelledby" rather than guessing the prefix.
  4. Run your linter or accessibility checker after the fix to confirm the attribute is now recognized.

Examples

Incorrect: misspelled aria-labelledby

The attribute aria-labelled is not a valid ARIA attribute. The element will have no accessible name derived from the referenced label.

<span id="label">Search:</span>
<div contenteditable role="searchbox" aria-labelled="label">
</div>

Correct: properly spelled aria-labelledby

<span id="label">Search:</span>
<div contenteditable role="searchbox" aria-labelledby="label">
</div>

Incorrect: invented attribute aria-not-checked

No ARIA attribute called aria-not-checked exists. The checkbox state is not communicated to assistive technologies.

<div role="checkbox" aria-not-checked="true">
Accept terms
</div>

Correct: using aria-checked

The aria-checked attribute is the valid way to express the checked state. Set it to "false" to indicate the box is unchecked.

<div role="checkbox" aria-checked="false" tabindex="0">
Accept terms
</div>

Incorrect: using aria-role instead of role

The role attribute does not use the aria- prefix. Writing aria-role creates an unrecognized attribute and leaves the element without its intended role.

<div aria-role="alert">
Something went wrong.
</div>

Correct: using role

<div role="alert">
Something went wrong.
</div>

Correct: multiple valid ARIA attributes

All attributes here are defined in the WAI-ARIA specification.

<label for="quantity">Enter a number between 0 and 100:</label>
<input
id="quantity"
type="number"
value="25"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="25" />

Detect accessibility issues automatically

Rocket Validator scans your site with complementary accessibility engines, helping teams find issues across every page.

Help us improve our guides

Was this guide helpful?
🌍 Trusted by teams worldwide

Validate at scale.
Ship accessible websites, faster.

Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.

Scheduled Reports
API Access
Open Source Standards
$7 / 7 days

Pro Trial

Full Pro access. Cancel anytime.

Start Pro Trial →

Join teams across 40+ countries