Marking Invalid State With aria-invalid
Tell assistive tech which fields failed.
Marking Invalid State With aria-invalid is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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">Default Is False
A field with no aria-invalid is treated as valid. You only add aria-invalid="true" when a check has actually failed.
Flip It Back
Once the user fixes the value, set aria-invalid to false or remove it. Leaving it true announces an error that no longer exists.
<input aria-invalid="false">Timing the Flag
Apply aria-invalid when you actually validate, not on page load. Marking empty fields invalid before the user types is hostile.
Pair With a Message
aria-invalid says something is wrong, but not what. Always pair it with aria-describedby so the user also hears the reason.
It Is Announced on Focus
When focus enters an invalid field, screen readers say invalid alongside the name. The user knows instantly they must fix it.
Style the State
You can target the attribute in CSS to show a red ring. This keeps your visuals and your semantics perfectly in sync.
input[aria-invalid="true"] {
border-color: crimson;
}More Than True or False
aria-invalid also accepts values like grammar or spelling. For most forms, plain true is exactly what you want.
Do Not Fake It With Color
Never rely on a red class alone to mean error. The class is invisible to assistive tech; aria-invalid is what carries the meaning.
One Field at a Time
Mark each failing control on its own. Setting aria-invalid on a wrapper or the form does not tell users which input needs attention.
Quick Check
What does aria-invalid="true" actually communicate?
Recap
Use aria-invalid to flag failing fields, set it true on error and false on fix, and pair it with a described error message. ✅
Frequently asked questions
Is the “Marking Invalid State With aria-invalid” lesson free?
Yes — the full text of “Marking Invalid State With aria-invalid” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Marking Invalid State With aria-invalid”?
Tell assistive tech which fields failed. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Marking Invalid State With aria-invalid” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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