[aria-invalid="true|false"]

The aria-invalid attribute communicates the validation state of a form control to assistive technologies.

Set it to "true" for an invalid field and "false" for a valid one.

Pair it with a helper message via aria-describedby to explain the error.

Basic Usage

<input type="text" name="valid" value="Valid" aria-invalid="false" />
<input type="text" name="invalid" value="Invalid" aria-invalid="true" />

Form Validation Example

Helper texts defined with <small> below the form element inherit the validation state color.

<form>
  <fieldset>
    <label>
      Email address
      <input
        type="email"
        name="email"
        placeholder="user@example.com"
        aria-invalid="false"
        aria-describedby="email-helper"
        required
      />
      <small id="email-helper">We'll never share your email with anyone else.</small>
    </label>

    <label>
      Password
      <input
        type="password"
        name="password"
        aria-invalid="true"
        aria-describedby="password-helper"
        required
      />
      <small id="password-helper">Password must be at least 8 characters long.</small>
    </label>
  </fieldset>

  <input type="submit" value="Sign Up" />
</form>

Checkbox

<label>
  <input type="checkbox" name="valid" aria-invalid="false" />
  Valid
</label>

<label>
  <input type="checkbox" name="invalid" aria-invalid="true" />
  Invalid
</label>

Radio

<fieldset>
  <label>
    <input type="radio" name="validation-states" aria-invalid="false" />
    Valid
  </label>

  <label>
    <input type="radio" name="validation-states" aria-invalid="true" />
    Invalid
  </label>
</fieldset>

Select

<select aria-invalid="false">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>

<select aria-invalid="true">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>

Switch

<fieldset>
  <label>
    <input name="2fa" type="checkbox" role="switch" aria-invalid="false" />
    Enable two-factor authentication
  </label>
  <label>
    <input name="subscription" type="checkbox" role="switch" aria-invalid="true" />
    Automatic subscription renewal
  </label>
</fieldset>

Textarea

<textarea name="message" aria-invalid="false" placeholder="Type your message">Valid text</textarea>

<textarea name="message" aria-invalid="true" placeholder="Type your message">Invalid text</textarea>