Identify and Explain Form Errors Clearly

HTML / CSS

<input type="email"> <span style="color: red">Invalid</span>

<label for="email">Email</label> <input type="email" id="email" aria-describedby="email-error"> <span id="email-error" role="alert">Error: Please enter a valid email address</span>

Error message has unique id, aria-describedby links input to error, role="alert" announces error to screen readers. Text explains what's wrong.

React / Next.js

input.style.borderColor = "red"; // error state

const [error, setError] = useState(""); return (<> <input onChange={handleChange} aria-describedby={error ? "error" : undefined} /> {error && <div id="error" role="alert">{error}</div>} </>);

Use role="alert" to announce errors. Connect input to error message with aria-describedby. Use JavaScript state to manage error messages.

WordPress

Form submitted, fields turn red, generic "Error" message shown at top

Form submitted, each invalid field gets aria-invalid="true", specific error message appears below field: "Password must be at least 8 characters"

Use form validation plugins that provide accessible error handling. Ensure error messages are specific and actionable.

Shopify Liquid

Cart page shows "Error updating cart" without explanation

Cart page shows specific error: "Item quantity for Blue T-Shirt (size XL) exceeds available stock. Maximum 3 units available."

Shopify liquid: show specific error messages that tell customers exactly what needs to be fixed. Use aria-live regions to announce updates.

Using color alone to indicate errors (red text only, no explanation)

Generic error messages: 'Error', 'Invalid input' without specifics

Error messages that don't suggest fixes: 'Invalid format' vs 'Enter date as MM/DD/YYYY'

Errors not announced to screen readers (no role="alert")

Error messages placed far from the field they describe