2-3 min

ARIA Label Wizard

Screen Reader Allies

Scenario

Chris designed a modern email interface with sleek icon-only buttons to save space. The trash, reply, and forward buttons look intuitive to sighted users, but when their beta tester Maria, who uses a screen reader due to blindness, tried the interface, she heard confusing announcements like 'button' with no description of what each button actually does. Maria couldn't tell if she was about to delete an important email or reply to it! Help Chris add proper labels so screen reader users like Maria know exactly what each button will do before clicking it.

Your Task

Add aria-label to icon buttons

Success Metric:

Clear button purpose announced

Hints
  • 1.Use aria-label for buttons with only icons
  • 2.Describe the action, not just the icon
  • 3.Keep labels concise but descriptive
Code Editor
Edit the code below to complete the activity
HTML3 lines