• Success Criterion 1.3.2
  • Conformance level A

Lazy-Loaded Content Injected Out of Its Visual Order

1.3.2 — Meaningful Sequence

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Infinite-scroll/lazy sections injected out of order relative to visual placement.

Example 

<form id="refill-form">
  <section id="step1">Medication</section>
  <section id="step2">Quantity</section>
  <section id="step4">Payment</section>
  <!-- step3 (Delivery address) is appended here later, once its data loads,
       landing after step4 in the document even though it displays visually
       between step2 and step4 -->
</form>

Why it matters

A screen reader user tabbing through the refill form reaches Payment before Delivery address, and may enter payment details before seeing where the prescription ships.

How to test

Scroll to trigger lazy-loaded/infinite-scroll content, then check the DOM: newly injected sections should appear in the DOM in the same order they appear visually.

How to fix

Insert lazily-loaded sections at their correct position with insertBefore, not always at the end, so source order tracks visual order as content arrives.

<form id="refill-form">
  <section id="step1">Medication</section>
  <section id="step2">Quantity</section>
  <section id="step3">Delivery address</section>
  <section id="step4">Payment</section>
</form>

Outcome

A screen reader user now reaches Delivery address before Payment, matching the visible step order.

Who is affected

Screen reader users and keyboard users hit form fields in an order that no longer matches the visible steps.

Learn more

Related scenarios