✎ Technique: Form error communication

Example

This example of a user registration form contains three fields within a <fieldset> that are labeled "Your email," "Choose a username," and "Choose a password:"

<form>
  <fieldset>
    <legend>Register</legend>
    <label for="email">Your email</label>
    <input type="text" id="email">
    <label for="username">Choose a username</label>
    <input type="text" id="username">
    <label for="password">Choose a password</label>
    <input type="password" id="password">
  </fieldset>
  <div class="submit">
    <button type="submit">Submit</button>
  </div>
</form>

In the adapted code below, we add an empty live region just above the submit button, which can be used to report to screen reader users if there are any errors when the user tries to submit the form. In addition, each field is followed by a "hint" that is hidden by default but shown if that field does not validate:

<form>
  <fieldset>
    <legend>Register</legend>
    <label for="email">Your email</label>
    <input type="text" id="email">
    <div class="hint" id="emailHint" style="display: none">Please enter a valid email</div>
    <label for="username">Choose a username</label>
    <input type="text" id="username">
    <div class="hint" id="usernameHint" style="display: none">Your username cannot contain punctuation</div>
    <label for="password">Choose a password</label>
    <input type="password" id="password">
    <div class="hint" id="passwordHint" style="display: none">Your password must be at least 6 characters</div>
  </fieldset>
  <div aria-live="assertive" id="message">
  </div>
  <div class="submit">
    <button type="submit">Submit</button>
  </div>
</form>

If the form is submitted and there are errors, two things happen. First, the live region is populated, announcing to screen-reader users that there are errors they must attend to:

$('[aria-live="assertive"]').append('<p>Your form has errors. Please fix them and submit again.</p>');

Note that this is achieved without moving the user's focus. Having traversed the form, they know that they are below the inputs and can use SHIFT+TAB to go back to the invalid fields.

Second, each invalid input is given aria-invalid="true" and connected to a "hint" using aria-describedby. This provides two pieces of information to screen-reader users when they focus the input:

1. That the information they entered is invalid
2. An explanation of why the information is invalid. The "hint" element is also revealed visually for those seeing the form.

Here's the markup for the email field in its invalid state:

<label for="email">Your email</label>
<input type="text" id="email" aria-invalid="true" aria-describedby="emailHint">
<div class="hint" id="emailHint" style="">Please enter a valid email.</div>

Note that the aria-descibedby hint connects to the input in the same way as the label, using its id. Now, when the email field receives focus, the VoiceOver screen reader announces, "your email, invalid data, text [pause] please enter a correct email." Because screen reader users interact with forms by keyboard, moving directly between inputs, it's important that all this information is conveyed on focus.

Video: Form error handling with Safari and Voiceover

Code editor

You can experiment with and repurpose this implementation through the "Form error handling with ARIA" online code editor.