Amplify from Studio 24

There are 11 problems with this request

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 the .field-error class: check the examples that follow to see where to add it (this is slightly different for checkbox and radio inputs).
  4. Provide an inline error message: check the examples that follow to see where to add it (this is slightly different for checkbox and radio inputs).
  5. Add the aria-invalid attribute to each input where validation has failed (except for radio buttons). Remove it when validation is successful.

Top tips

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 start with the heading “There are X problems with this request”, where X is a number equal to the number of validation errors. Wrap the heading in <div role="alert"> to help make sure it’s announced by screen readers.
  • Link each item in the summary list to the input with the validation error. Use the same wording for both the error summary link and the inline error message.
  • Move keyboard focus to the first link in the error summary (Amplify includes JavaScript that will shift keyboard focus if an error summary is present.

Inline error message

  • Use <p class="field-error-msg"> to provide the error message. Check the examples that follow to see where to add it (this is slightly different for checkbox and radio inputs).
  • Each instance of <p class="field-error-msg"> must have a unique ID. It is suggested to use the pattern id="error-..., replacing the ... with some unique wording that relates to the input purpose.
  • Add the aria-describedby attribute to the input or fieldset which the error message applies to, populating it with the ID of the relevant error message.
    • If there is already an aria-describedby for hint text, just add the error message ID after the hint text ID, separated by a space. Do not use multiple aria-describedby attributes.

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, so we’re giving you range 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.