Applied Browser Projects

Error Summary Replay

A failed checkout form shows one field error as a summary link, an invalid input state, and a nearby field message.

Program

Failure-path replays are useful when the source needs to show both what changed and where a reader should look next.

error_summary_replay.html
Visuals: captured from real browser rendering
<form aria-labelledby="checkout-title" novalidate>
  <h2 id="checkout-title">Checkout</h2>
  <div class="error-summary" role="alert" tabindex="-1">
    <p>Please fix one field:</p>
    <a href="#email">Email needs an address.</a>
  </div>
  <label for="email">Email</label>
  <input id="email" aria-invalid="true" aria-describedby="email-error">
  <p id="email-error">Enter an email address.</p>
  <button>Continue</button>
</form>

  1. Name the checkout form.

    A checkout form shell appears with a title relationship called out.
    The form is named by the Checkout heading.

  2. Create an alert summary.

    The error summary appears above the field with an alert role.
    The summary gives the failure path one visible starting point.

  3. Link the summary to the email field.

    The summary link points to the email field that needs a fix.
    The link turns the summary into a path back to the field.

  4. Mark the email input invalid.

    The email input is marked invalid so the failed field is explicit.
    aria-invalid tells assistive technology which control failed validation.

  5. Attach the field error message.

    The email field has a nearby message that says Enter an email address.
    aria-describedby keeps the specific field message tied to the input.
error summary The summary gives the page one visible place to start fixing problems.
field connection The input uses `aria-invalid` and `aria-describedby` so the field state and message stay connected.