• Success Criterion 1.3.1
  • Conformance level A

Field Instructions Never Linked to the Field They Explain

1.3.1 — Info and Relationships

Scenario

Setting

An e-book reader's library page

What’s wrong

Instruction text displayed near fields (e.g., 'Enter the 6-digit code from your SMS') is not programmatically linked to those fields, so a screen reader user focused on the field never hears the instruction.

Example 

<p id="code-help">Enter the 6-digit code from your SMS to authorize this device.</p>
<input type="text" maxlength="6">

Why it matters

A screen reader user who taps a locked book in their library and lands on this code field hears only edit text, never learning a code was sent or where to find it.

How to test

Focus a field that has instruction text displayed nearby (e.g., 'Enter the 6-digit code'): a screen reader should announce it too — if aria-describedby isn't wired, it won't.

How to fix

aria-describedby reads instruction text aloud automatically whenever the linked field receives focus.

<p id="code-help">Enter the 6-digit code from your SMS to authorize this device.</p>
<input type="text" maxlength="6" aria-describedby="code-help">

Outcome

A reader hears the SMS code instructions the instant they land on the field, right from the library screen where the authorization prompt appeared.

Who is affected

Screen reader users trying to open a book from their library and authorize the new device miss the instructions sighted users read right above the field.

Learn more

Related scenarios