Marking Invalid State With aria-invalid
Tell assistive tech which fields failed.
Red Is Not Enough
A red border tells sighted users a field failed. A screen reader user sees no color, so they need the failure stated in code. 🚫
The Invalid Flag
The attribute aria-invalid marks a control as failing validation. Set it to true and assistive tech announces the error state.
<input aria-invalid="true">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