Amplify from Studio 24

Form error messages

To notify a user of an error with their form submission:

  1. Prefix the word “Error:” to the document’s title. It’s the first thing announced by screen readers when the page loads.
  2. Place an error summary at the top of the page
  3. Add an error message to each problematic input

Page title

Example form showcasing error messages

Dealing with text

E.g. Robin Smith

Dealing with numbers

Must be between 6 and 8 numbers long

Dealing with dates and times

For example 30/05/2021
Date of birth (Required) (an example of a memorable date) Error: Enter a date of birth
For example 20 07 1972
Specify a start time for your meeting Error: Enter a start time
Use UTC and your local time zone

Other input types

Maximum file size 2MB
Do you own any pets? (Required) Error: Select yes if you do own pets
Segmented options (Radio) Error: Choose an option
We understand that different people enjoy books in different ways, which is why we’re giving you lots of options.
Things you like Error: Choose at least one item

Error summary considerations

The error summary should be at the top of the main element. If the page includes breadcrumbs or a back link, place it after these, but before the h1. The error summary must contain the heading ‘There is a problem’.

Keyboard focus needs to move to the error summary, hence the addition of tabindex="-1". JavaScript is included to shift focus if an error summary is present.

Each item in the summary list must link to the field with the validation error. Use the same wording for the error in both the error summary and the problematic field.

Error message considerations

In the event of a validation error, the error message should explain what went wrong and how to fix it. Keep the wording clear and concise.

To help screen reader users, the error message includes a visually hidden ‘Error:’ before the error message.