Form labels, errors, and recovery

Errors need identity and location

State what happened, how to fix it, and which field is affected. Associate the message with the control and summarize errors near the form heading when several fields fail.

<label for="start-date">Start date</label>
<p id="start-date-help">Use the format YYYY-MM-DD.</p>
<input
  id="start-date"
  name="start-date"
  aria-describedby="start-date-help start-date-error"
  aria-invalid="true"
/>
<p id="start-date-error">Enter a date on or after 2026-08-01.</p>

Only set aria-invalid when the value is known to be invalid. Do not announce errors before a person has a reasonable chance to complete the field.

Recovery is part of success

Keep safe values after validation fails. Move focus to an error summary or announce the status without unexpectedly taking control away. Server validation remains required even when client validation exists.

Exercise

Submit a form with three mistakes using a keyboard and a screen reader. Confirm you can find each error, correct it, and submit without re-entering valid data.