Accessible checkout form errors: identification, association and announcements

When a shopper submits a checkout step with a mistake, three things must happen for assistive-technology users:

1. They are told that there are errors (focus moves, or a live region announces it) — WCAG 3.3.1, 4.1.3.
2. Each field is marked as invalid (aria-invalid="true").
3. Each error is linked to its field (aria-describedby) so it is read when the field receives focus.

Pattern

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email" required
       aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address like name@example.com</p>

For multi-field steps, add an error summary at the top with links to each field, and move focus to it on submit.

Common mistakes

• Errors shown in red text only, not linked and not announced.
• Errors injected into a container that is not a live region.
• Focus left on the submit button with no feedback.
• Relying on placeholder text as the only label.

Native HTML validation (the browser's own bubble) is accessible in modern browsers but offers limited styling; if you replace it, you must re-implement the announcements above.