
ARIA attributes must have valid names.

## Why it matters

When an assistive technology encounters an element with an invalid ARIA attribute name, it might ignore the attribute or respond to it in an unexpected way.
As a result, people who use assistive technologies might find the element difficult or impossible to use.

## How to fix

Provide a valid name for each ARIA attribute:

-   Make sure you are using the correct attribute name.
-   Make sure the attribute name is spelled correctly.

For details about all ARIA attributes, see [Accessible Rich Internet Applications (WAI-ARIA) 1.1: Definitions of States and Properties](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).

## Example

<PassFailGrid>
<FailSection>

This toggle button has an invalid ARIA attribute name.
Because assistive technologies are likely to ignore the attribute, some users won't know the button's state.

</FailSection>
<FailExample example={`<a tabindex="0" role="button" id="toggle" [aria-on]="true">Mute</a>
`} />
<PassSection>

The toggle button has a valid ARIA attribute name.
Assistive technologies can inform users that the button is currently pressed.

</PassSection>
<PassExample example={`<a tabindex="0" role="button" id="toggle" [aria-pressed="true"]>Mute</a>
`} />
</PassFailGrid>

## About this rule

This rule passes if:

-   ARIA attribute name is valid

## More examples

<Links>
    <HyperLink href="https://www.w3.org/WAI/WCAG21/Understanding/parsing.html">Understanding Success Criterion 4.1.1: Parsing</HyperLink>
</Links>


aria-valid-attr

Why it matters

How to fix

Example

Fail

Pass

About this rule

More examples