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

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 should link to the field with the validation error. Use the same wording for the error in both the error summary and the problematic field.

Example form showcasing error messages

Dealing with text

E.g. Robin Smith

Error: Enter a name

Error: Enter a message

Dealing with numbers

Must be between 6 and 8 numbers long

Error: Enter an account number

Dealing with dates and times

For example 30/05/2021

Error: Enter an arrival date

Date of birth (Required) (an example of a memorable date)
For example 20 07 1972

Error: Enter a date of birth

Specify a start time for your meeting
Use UTC and your local time zone

Error: Enter a start time

Other input types

Maximum file size 2MB

Error: The file must be 2MB or smaller

Do you own any pets? (Required)

Error: Select yes if you do own pets

Segmented options (Radio)
We understand that different people enjoy books in different ways, which is why we’re giving you lots of options.

Error: Choose an option

Things you like
Select all that apply.
Error: Choose at least one item
Fries or frites, not crisps.

Error: Choose your preferred day

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.