Accessible forms and dynamic UI

What you'll learn

• How to label and group every kind of form control without ambiguity
• Signal required and optional fields so screen readers, keyboards, and eyes all agree
• Surface inline errors with aria-invalid and aria-describedby that actually announce
• Build error summaries that move focus correctly without trapping the user
• Announce async validation politely — without overwhelming assistive tech
• Make modal dialogs that trap focus, restore it, and respect Escape
• Handle route changes in SPAs so screen readers know the page actually changed
• Pick the right live region for toasts, snackbars, and async confirmations

1. 01
   Form labels and structure

   Label associations, fieldset and legend, and grouping radios and checkboxes.
   14 min
2. 02
   Required and optional, signaled accessibly

   The required attribute, aria-required, asterisks, and instruction text that scales.
   13 min
3. 03
   Inline error messages

   aria-invalid, aria-describedby, where to place errors, and focus-on-error vs summaries.
   16 min
4. 04
   Error summaries at the top

   List-of-errors-with-anchors vs inline-only, and where focus goes on submit.
   14 min
5. 05
   Async validation and live errors

   Polite announcements as the user types — without overwhelming the screen reader.
   15 min
6. 06
   Modal dialogs, properly

   Focus trap, Escape, focus return, scroll lock, and the native showModal contract.
   17 min
7. 07
   Route changes in SPAs

   Announcing the new page, restoring focus, and the back-button contract.
   16 min
8. 08
   Toasts, snackbars, and async confirmations

   When role=status is right, when role=alert is, and patterns that don't trap users.
   14 min