Connect error messages to their input fields
Error messages must be directly associated with their corresponding form fields to help all users easily identify and fix issues. This connection is particularly critical for people using assistive technologies.
Implement the aria-describedby
attribute to create a programmatic link between each form field and its error message. This HTML attribute tells screen readers to announce the error message immediately after reading the field label, ensuring users understand exactly which field needs correction without searching through the form.
This technique especially benefits users of screen magnifiers who may see only a portion of the screen at once. When error messages are properly linked to their inputs, these users won't miss critical feedback even if the error text falls outside their current view. The same connection helps all users by creating clear visual relationships between fields and their corresponding error states.