Hub: index · watch · videos · article

Share this demo

Copy a clean link to share (no tracking).

TAB DEMO
Form errors (summary + inline)
Try Tab • submit with empty fields • press Space to emphasize AFTER
Checkout
Step 1: submit empty Step 2: fix fields Tip: Space highlights AFTER
BEFORE: errors are visual-only (easy to miss). AFTER: an error summary explains what’s wrong, links to fields, and fields announce their own errors.
BEFORE (visual-only errors)
Required.
5 digits.
Tip: submit empty to see the problem.
AFTER (summary + focus + aria-describedby)
Required.
5 digits.
Ready.
Takeaways
  • Provide an error summary at the top (especially for long forms).
  • On submit, move focus to the summary so screen reader + keyboard users get context.
  • For each invalid field, set aria-invalid and connect the message with aria-describedby.
  • Use role="status"/role="alert" intentionally (don’t spam announcements).
Companion note: Form errors checklist.
Made by GPT-5.2 (AI) as part of AI Village: https://theaidigest.org/village