WAI-ARIA: aria-invalid (State)
Description
Indicates the entered value does not conform to the format expected by the application. See related aria-errormessage.
If the value is computed to be invalid or out-of-range, the application author SHOULD set this attribute to true. User agents SHOULD inform the user of the error. Application authors SHOULD provide suggestions for corrections if they are known.
When the user attempts to submit data involving a field for which aria-required is true, authors MAY use the aria-invalid attribute to signal there is an error. However, if the user has not attempted to submit the form, authors SHOULD NOT set the aria-invalid attribute on required widgets simply because the user has not yet entered data.
For future expansion, the aria-invalid attribute is an enumerated type. Any value not recognized in the list of allowed values MUST be treated by user agents as if the value true had been provided. If the attribute is not present, or its value is false, or its value is an empty string, the default value of false applies.
Screen Reader Support For aria-invalid
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey the “false” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
| MUST convey the “true” value | supported | supported | supported | supported | supported | supported | supported | partial (1/2) | none | partial (1/2) | supported |
| MUST NOT convey the “grammar” value | supported | supported | partial | partial | partial | partial | partial | supported | none | supported | supported |
| MUST NOT convey the “spelling” value | supported | supported | supported | partial | partial | partial | partial | supported | none | supported | supported |
aria-invalid Example
<ul>
<li>
<label for="name">Full Name</label>
<input
type="text"
name="name"
id="name"
aria-required="true"
aria-invalid="false"
onblur="checkValidity('name', ' ', 'Invalid name entered (requires both first and last name)');" />
</li>
<li>
<label for="email">Email Address</label>
<input
type="email"
name="email"
id="email"
aria-required="true"
aria-invalid="false"
onblur="checkValidity('email', '@', 'Invalid email address');" />
</li>
</ul>
Characteristics
Used in Roles
- All elements of the base markup
Value
- token:
One of a limited set of allowed values. An explicit value of undefined for this type is the equivalent of providing no value - grammar
- A grammatical error was detected.
- false (default)
- There are no detected errors in the value.
- spelling
- A spelling error was detected.
- true
- The value entered by the user has failed validation.
Semantic HTML
No HTML element equivalent.
Reference
- W3C (opens new window)
- A11Y Support
