A red border does not explain what someone needs to change. After a failed submission, a form should answer three questions: which field is affected, what is missing and how can I correct it?

Start with an empty form

Use a test environment and fictional inputs. Submit an empty form first, then try one incorrect value such as an incomplete email address. Check whether valid information stays in place. Clearing every field creates extra work before a person can address the actual problem.

WAI recommends understandable messages that identify the affected fields and help people correct errors. The message also needs a technical association with its field and must be perceivable through assistive technology. Changing colour alone does not achieve that.

Make the message actionable

Fictional example: an address field reports “Invalid value”. This explains neither the expected information nor a likely mistake. For a missing postcode, “Enter your postcode” gives a more specific action. Any supported format must match the actual delivery region.

Check the message in three situations:

  • Beside the field: Is the explanation next to the affected input?
  • After submission: Can you find out why the form did not continue?
  • After correction: Does the resolved error disappear without losing other information?

Test without relying on the red mark

Move to the field with a keyboard and repeat the error using the agreed screen reader and browser combination. Does it announce only the field label, or the related message too? Record the observed output rather than assuming an ARIA attribute proves the interaction works.

The keyboard purchase-journey test adds variant selection, basket controls and dialogs to this review.

Removing purchase-journey barriers corrects and retests up to five agreed fault types along one journey. A message inside a payment provider’s locked window needs a different owner. Establish that boundary before commissioning work, so a repair covers code that can actually be changed.

Technical sources: W3C WAI: User Notifications.