Lesson 3 of 8
Error messages you can hear
- 13 min
- 5 checks
- 3 hints
- Go to task
Goal
Get the error across to people who can't see the color
Explanation
A red border around a field means nothing to a screen reader, or to someone who can't distinguish red at all. That's why you have to tie the error message to the field in the code itself.
Three attributes are all it takes: aria-describedby links the field to the message element, aria-invalid="true" announces that the field's value is wrong, and role="alert" on the message element makes the screen reader read it out as soon as it appears.
You can keep the color, but it becomes a reinforcement of the message, not the only way to deliver it.
Your task
When the form is submitted with the field empty, write the message, link it to the field and mark the field as invalid. When the user fixes the value, remove all of that.
Checks
5 checks- The message element has role=alert
- Submitting with the field empty shows a message
- The field is announced as invalid
- The message is correctly linked to the field
- Fixing the value removes the error mark and the message