• Success Criterion 1.3.2
  • Conformance level A

Form Instructions Placed After the Fields They’re Meant to Explain

1.3.2 — Meaningful Sequence

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Multi-step forms where visually-first instructions come after the fields in page code (DOM).

Example 

<form>
  <label for="time">Start time</label>
  <input type="text" id="time">
  <p class="hint" style="order:-1;">Enter time in 24-hour format (e.g. 14:00)</p>
</form>

Why it matters

A screen reader user reaches the time field and types blind before ever hearing the 24-hour format requirement, likely triggering a validation error.

How to test

Disable CSS on a multi-step form: check whether instructions appear before their related fields in the DOM — instructions coded after the fields they govern arrive too late for screen reader users.

How to fix

Put instructions before the field in the markup, or link them with aria-describedby, so they are heard before or alongside the input.

<form>
  <label for="time">Start time</label>
  <p class="hint" id="time-hint">Enter time in 24-hour format (e.g. 14:00)</p>
  <input type="text" id="time" aria-describedby="time-hint">
</form>

Outcome

Hearing the format instruction first, a screen reader user enters the time correctly on the first try.

Who is affected

Screen reader users encounter the field before its instructions and cannot follow guidance they have not heard yet.

Learn more

Related scenarios