Error Messages and Validation
Validation errors should come with specific messages that tell the user exactly what to fix. "This field is required" is not a good message for an email input field; "Enter your email address" is more specific.
Provide a summary of the validation errors at the top of the form. Each error message should be connected to an input field using aria-describedby
, and should include a link to skip directly to that field. Error messages should not appear below the inputs or submit button, as screen reader users will hear them late in the sequence, and autocomplete dropdowns often obscure the message.
Required <select>
dropdowns must not include an empty value, or the browser will fail to report the validation error.
Further reading on error messages
- Exposing Field Errors, Adrian Roselli discusses ARIA and screen reader behavior related to form field error messages, including video demonstrations of JAWS behavior
- Microcopy: The Complete Guide, by Kinneret Yifrah
- Form Design Patterns, by Adam Silver