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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the “false” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the “true” valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedpartial (1/2)nonepartial (1/2)supported
MUST NOT convey the “grammar” valuesupportedsupportedpartialpartialpartialpartialpartialsupportednonesupportedsupported
MUST NOT convey the “spelling” valuesupportedsupportedsupportedpartialpartialpartialpartialsupportednonesupportedsupported

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

Leave a Reply

Your email address will not be published. Required fields are marked *