# ARIA attributes must be valid (correctly spelled).

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/aria/aria-valid-attr
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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](https://www.w3.org/TR/wai-aria-1.2/#state_prop_def). 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.

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

### Correct: properly spelled `aria-labelledby`

```html
<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.

```html
<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.

```html
<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.

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

### Correct: using `role`

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

### Correct: multiple valid ARIA attributes

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

```html
<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" />
```