Accessibility / Quiz
Announcing Form Errors
Live regions, aria-invalid, aria-describedby, and moving focus, making validation errors reach screen-reader users.
- Difficulty
- Medium
- Format
- Quiz
- Points
- 150
- Estimate
- 9 min
// MISSION BRIEF
Your Mission
A red border is invisible to a screen reader. This quiz covers the machinery that makes form errors actually announced: live regions for dynamic errors, aria-invalid on the field, aria-describedby to associate the message, and where to send focus on submit.
// FIRST CONTACT
Battle teaser
A form shows an inline error visually but a screen reader never announces it. The core fix:
- AShow the error in a tooltip on hover
- BMake the border a brighter red
- CLog the error to the console
- DPut the error in a live region (role="alert" or aria-live) so it is announced when injected
Answers, scoring, hints, and the full battle stay sealed.
// SKILL TAGS
accessibilityformslive-regionswcag