2-3 min

Live Region Herald

Screen Reader Allies

Scenario

Jordan built a dynamic form that shows success and error messages after submission. Sighted users can see the green 'Form submitted successfully!' message appear, but their user tester Patricia, who uses screen reader technology, never hears these important status updates. Patricia often submits forms multiple times because she doesn't know if her first submission worked. Help Jordan make these status messages audible to screen reader users like Patricia so they get immediate feedback about their form submissions!

Your Task

Add aria-live to status messages

Success Metric:

Status changes announced

Hints
  • 1.Use aria-live='polite' for status messages
  • 2.Use aria-live='assertive' for urgent alerts
  • 3.Live regions announce content changes automatically
Code Editor
Edit the code below to complete the activity
HTML7 lines