In plain English
When someone fills in a form wrong, you have to tell them, in words. A red outline around the field is not telling them anything if they cannot see colour, cannot see at all, or do not notice it. The message must say what is wrong (“Enter a valid email address”) and make clear which field it belongs to.
This matters most exactly where it hurts most: checkout. A blocked purchase that gives no readable reason is a lost sale and a common lawsuit complaint.
Who this is for
- Screen-reader users, who need the error spoken, tied to the field.
- Colour-blind users, for whom a red border alone is invisible.
- Everyone, who benefits from a clear “here is what to fix”.
What “good” looks like
Describe the error in text and wire it to the field.
<label for="email">Email</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-err">
<p id="email-err">Enter a valid email address, like you@store.com.</p>Where stores get it wrong
Checkout fields that only turn red, a generic “something went wrong” with no field named, and errors announced by colour or a small icon alone. These are high-risk on the path to purchase and appear in every self-check and on the common failures list.