3.3.1 Error identification

Web forms have become an increasingly common feature and are now essential to participating in everyday life. They are not always easy to fill in though and it is quite common to cause an error by either omitting to fill in a required field or by inputting data in the wrong format. This generates an error, which is addressed by criterion 3.3.1 Error identification, as follows:

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Error messages

An error message is generated when the user inputs a form which contains invalid information. This could be that there is a required field, which has not been filled in at all, or it could be that a field has been filled in but the format is incorrect. Regardless of the reason for the error, the user must be informed that an error has been made and where.

Make the message visible

The error identification must be visible on the page in text. It can also be highlighted using colour, such as a red box or line, but this criterion states that it must also be text on the page. This enables people who can't perceive colour and those who find symbolic references difficult to understand, to read the error information.

Make the message available to screen readers

It is also vital that screen readers can access the error identification message. This requires a little extra work because the error message can easily be missed if the user is not expecting it. The screen reader has to know how and when to announce the error. One way to achieve this is to put the error message at the top of the page so that it is read first. You can then provide a link to the field that needs correcting.

Code example

Date of birth error example

What is your date of birth?

For example: 23 01 1975

Error: Please enter your date of birth

In this example, the error is identified in multiple ways. The div that contains the whole item has been given a class of error and the CSS marks that with a thick line down the left hand side of the item. The fieldset has been given a class of error, so that the CSS gives it a red border. The input elements also have a class of date-input-error, which the CSS uses to give each input box a red border. This could be further refined so that only the erroneous input field (the year) is red... but for now, this will be sufficient.

Date of birth error code

<fieldset class="error" aria-describedby="date-error">
  <legend>What is your date of birth?</legend>
    <p>For example: 23 01 1975</p>

The next line of code identifies the error in text.

    <p class="error" id="date-error"><strong>Error:</strong> Please enter your date of birth</p>
    
	<div class="date-input">
      <div class="date-item">
        <label class="date-item" for="day">Day</label>
        <input class="date-input error" id="day" name="day" type="text" value="23" inputmode="numeric">
      </div>
    </div>
    <div class="date-input">
      <div class="date-item">
        <label class="date-item" for="month">Month</label>
        <input class="date-input error" id="month" name="month" type="text" value="01" inputmode="numeric">
      </div>
    </div>
    <div class="date-input">
      <div class="date-item">
        <label class="date-item" for="year">Year</label>
        <input class="date-input error" id="year" name="year" type="text" value="2075" inputmode="numeric">
      </div>
    </div>
</fieldset>
Clicky