If a form field is filled in incorrectly, inform where the error is and describe what the error is

Forms should have an error check built in. The error check automatically analyses whether a required field has been left empty or whether an input field has been filled in incorrectly. If an error is found, the error message should be displayed in text. This text can be supplemented with other visual clues, such as a different colour or an icon.

In the text of the error message, state the name of the field that was entered incorrectly and state exactly what the error is. Do not write:

  • This field is required.

But instead write:

  • The field ‘Phone number’ cannot be empty.

It can also be indicated in the code which field has been filled in incorrectly. To do this, use the aria-invalid attribute. In addition, the error message in the code should be linked to the corresponding input field. This prevents confusion for visitors using assistive technologies. An error message can be linked in a number of ways such as with an aria-describedby attribute.

It looks like this in the code: