Accessible Forms: Labels, Errors and Instructions

Forms are where accessibility matters most, because visitors must be able to finish what they started.

A well-built field

1
2
3
4
5
6
7
8

<form>
  <p>
    <label for="email">Email address</label><br>
    <input type="email" id="email" name="email" required aria-describedby="email-help">
    <br><small id="email-help">We will only use it to send your receipt.</small>
  </p>
  <button type="submit">Send receipt</button>
</form>

• A visible label connected with for and id.
• Help text connected with aria-describedby, so a screen reader reads it along with the field.
• The right type for the data.

Group related fields

Use fieldset and legend for radio buttons and checkbox groups so people hear the question with each option.

Errors

• Say what is wrong and how to fix it: “Enter an email address such as name@example.com”, not “Invalid”.
• Put the message next to the field and connect it with aria-describedby.
• Do not use colour as the only signal.

1
2

<input type="email" id="email" name="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address such as name@example.com.</p>

Do not remove focus outlines

The outline shows keyboard users where they are. If you restyle it, replace it with something equally visible.