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