• 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

Related scenarios