• Success Criterion 1.3.2
  • Conformance level A

Hidden or Off-Screen Content Left in the Reading Order

1.3.2 — Meaningful Sequence

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Visually hidden or off-screen content (inactive carousel slides, skeleton states, stale views) left in the reading order, so the announced sequence diverges from the visible one.

Example 

<div class="status-carousel">
  <div class="slide" style="position:absolute; left:-9999px;">Order placed</div>
  <div class="slide">Preparing your order</div>
  <div class="slide" style="transform: translateX(100%);">Out for delivery</div>
  <div class="slide" style="transform: translateX(200%);">Delivered</div>
</div>

Why it matters

A screen reader user hears all four statuses read together at once, unable to tell that only "preparing" reflects the real, current state of the order.

How to test

Read the full page with a screen reader without looking at the screen: if off-screen/hidden content (inactive carousel slides, skeleton loaders, stale views) gets read as if visible, it fails.

How to fix

Use the hidden attribute (or aria-hidden="true") on off-screen slides, not just visual positioning, so assistive tech skips them.

<div class="status-carousel">
  <div class="slide" hidden>Order placed</div>
  <div class="slide">Preparing your order</div>
  <div class="slide" hidden>Out for delivery</div>
  <div class="slide" hidden>Delivered</div>
</div>

Outcome

Only "Preparing your order" comes through now, matching what is actually shown on screen.

Who is affected

Screen reader users cannot distinguish the current order status from the other, visually hidden carousel slides.

Learn more

Related scenarios