Tying Errors to Fields With aria-describedby
Make the message read with its input.
A Floating Error
An error message sitting near a field looks connected to you. But to a screen reader it is just loose text the user may never hear. ⚠️
The Fix Is a Link
You need to formally tie the message to its input. The attribute that does this is aria-describedby, and it lives on the field.
All lessons in this course
- Tying Errors to Fields With aria-describedby
- Marking Invalid State With aria-invalid
- Moving Focus to the First Error
- Inline, On-Blur, or On-Submit: Timing Matters