• Success Criterion 3.3.2
  • Conformance level A

Field Instructions Placed After the Field They’re Meant to Explain

3.3.2 — Labels or Instructions

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Instructions placed after the fields they govern in reading order (effectively unavailable at time of need).

Example 

<input id="size" type="text">
<label for="size">Size</label>
<p>Enter your size using EU sizing (36-46), not US sizing.</p>
<!-- CSS visually moves the label above the input, but instructions still come after it in the DOM -->

Why it matters

A screen reader user reaches the size field and starts typing before ever hearing the EU-sizing instruction that comes right after it.

How to test

Check where format/requirement instructions sit relative to their field: if they appear after the field in reading order, screen reader and top-to-bottom readers encounter them too late.

How to fix

Place instructions before the field in reading order, or associate them with aria-describedby so order stops mattering.

<label for="size">Size (EU sizing, 36-46)</label>
<input id="size" type="text" aria-describedby="size-hint">
<p id="size-hint" hidden>Enter your size using EU sizing (36-46), not US sizing.</p>

Outcome

A shopper enters an EU size correctly the first time instead of guessing and returning the wrong item.

Who is affected

Screen reader users and keyboard-only users who navigate in DOM order and encounter the field before its explanation.

Learn more

Related scenarios