A11y: notify user after submitting a form

When the user fills out a form, they must be informed of the result of their submission, whether it is correct or contains errors. To do this, several steps must be followed, which may vary depending on whether the page is reloaded or if the submit is done asynchronously using JavaScript.

Let's take as an example a very simple contact form, with a name, email and message.

<form>
  <div>
    <label for="name">Name</label>
    <input
      id="name"
      name="name"
      type="text"
      autocomplete="name"
      required
    />
  </div>
  <div>
    <label for="email">E-mail</label><br>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
    />
  </div>
  <div>
    <label for="message">Message</label><br>
    <textarea
      id="message"
      name="message" 
      rows="5"
      cols="70"
      required
    ></textarea>
  </div>
  <button>Send</button>
</form>

In both situations, classic sending by reloading the page or made it asynchronously, the steps are these:

• Create an area at the beginning of the form that contains a header and a list of errors, if any.
• The header must contain the message reporting the result of the shipment, either correct ("Your message has been sent") or erroneous ("There are 3 errors in your form, please check it").
• If there are errors, just below the header we will put *a list reporting briefly and descriptively of each of the errors.
• Each item in the list will link to the corresponding form field.
• Each item in the list will serve as a description of the error using the aria-describedby attribute.

So, in our example, if we tried to submit the form with all the fields empty, we would get this:

<form>
  <div>
    <h3>There are 3 errors in your form, please check it</h3>
    <ul>
      <li>
        <a id="error-name" href="#name">The name field is empty. It's a required field and must be filled in.</a>
      </li>
      <li>
        <a id="error-email" href="#email">The email field is empty. It's a required field and must be filled in.</a>
      </li>
      <li>
        <a id="error-message" href="#message">The message field is empty. It's a required field and must be filled in.</a>
      </li>
    </ul>
  </div>
  <div>
    <label for="name">Name</label>
    <input
      id="name"
      name="name"
      type="text"
      autocomplete="name"
      required
      aria-describedby="error-name"
    />
  </div>
  <div>
    <label for="email">E-mail</label><br>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
      aria-describedby="error-email"
    />
  </div>
  <div>
    <label for="message">Message</label><br>
    <textarea
      id="message"
      name="message"
      rows="5"
      cols="70"
      required
      aria-describedby="error-message"
    ></textarea>
  </div>
  <button>Send</button>
</form>

This solution would be enough if our form is sent and validated on the server. In that case, if our form is located deeper within the content, we can use the <title> of the page to report the result of the submission, since it is the first thing announced by the screen reader as soon as the page is reloaded and thus the user you know immediately if it has gone right or wrong:

<title>Message sent - Contact form</title>
<title>3 Errors - Contact form</title>

If the submission is done asynchronously and we display the feedback information, a screen reader user might not notice the change. To avoid this, as we already mentioned when notifying changes in the content, just insert it inside a <div role="alert">. As soon as you do, the screen reader will announce it and move the focus to that region.

Thus, the HTML that we would have to insert would be this:

<div role="alert">
  <h3>There are 3 errors in your form, please check it</h3>
  <ul>
    [... errors <li> ...]
  </ul>
</div>

All this information and more can be found on the W3C page dedicated to this topic, where very useful tips are given on how to notify the user of the result of submitting forms.