- Success Criterion 3.3.1
- Conformance level A
Custom Field Marked Invalid With No Text Description Anywhere
3.3.1 — Error Identification
Scenario
Setting
A video-conferencing app's meeting controls
What’s wrong
Custom widgets marking aria-invalid (code flagging a field as invalid) but with no text description anywhere.
Example
<div role="textbox" aria-invalid="true" aria-label="Meeting ID" contenteditable="true">958-2213</div>
<!-- component sets aria-invalid via JS validation but renders no error text anywhere --> Why it matters
A screen reader announces 'invalid' on the meeting ID field but never says why, leaving the user unable to fix a code that looks correct to them.
How to test
Submit invalid data and inspect DevTools: if aria-invalid="true" is set but no text description exists anywhere connected to the field, it fails.
How to fix
A state attribute alone is not a description. Always pair aria-invalid with visible, associated text.
<div role="textbox" aria-invalid="true" aria-describedby="meeting-id-error" aria-label="Meeting ID" contenteditable="true">958-2213</div>
<span id="meeting-id-error">Meeting IDs are 9 to 11 digits, without letters or dashes.</span> Outcome
The user removes the dashes from the meeting ID and joins the call on the next attempt.
Who is affected
Screen reader users who hear the invalid state but get no explanation of what makes the meeting ID wrong.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Form Submission With No Way to Identify What Went Wrong
- Form That Fails Silently With No Error Message at All
- Form Errors Marked Only by a Red Border, With No Text
- Generic ‘There Were Errors’ Message With No Field Named
- Error Text That’s Visible but Never Announced to Screen Readers
- Error Summary That Names Fields Too Vaguely to Identify Them