Check your personal details

Look at your name, signature and other details.

Are your personal details correct and up-to-date?

Implementation advice

When an error occurs:

  • add a 5px red left border to the field with the error
  • the error message be red and bold and appear after the question
  • the error message must sit inside the <legend>
  • show an error summary at the top of the page
  • move keyboard focus to the start of the summary to move keyboard focus, put tabindex="-1" on the containing div and use obj.focus()
  • indicate to screenreaders that the summary represents a collection of information add the ARIA role="group" to the containing div
  • use a heading at the top of the summary
  • associate the heading with the summary box use the ARIA attribute aria-labelledby on the containing div, so that screen readers will automatically announce the heading as soon as focus is moved to the div
  • link from the error list in the summary to the fields with errors
  • show an error message before each field with an error
  • associate each error message with the corresponding field add an ID to each error message and associate this with the field using aria-describedby

Also consider using the aria-invalid attribute to programmatically indicate that a field has an error. The value of the aria-invalid attribute will vary depending on the type of error.