• Success Criterion 1.3.1
  • Conformance level A

Form Label Not Correctly Linked to Its Input Field

1.3.1 — Info and Relationships

Scenario

Setting

A news outlet's article page

What’s wrong

label present but for/id pairing (code tying a label to its field) mismatch or duplicate ids breaking the association.

Example 

<label for="newsletter-email">Email address</label>
<input id="email-address" type="email">

Why it matters

A reader using a screen reader clicks the visible label but focus never lands on the field, since the for and id values don't match.

How to test

Click each visible label and confirm it visually and audibly (screen reader) jumps focus to the correct paired field, not a different one nearby.

How to fix

The for attribute must exactly match the input's id, character for character, or the pairing doesn't exist.

<label for="newsletter-email">Email address</label>
<input id="newsletter-email" type="email">

Outcome

A reader clicks Email address and the cursor lands right in the field, ready to type.

Who is affected

Screen reader users and anyone clicking the label to focus the field find the association silently broken.

Learn more

Related scenarios