• Success Criterion 1.4.10
  • Conformance level AA
  • W3C reference F102

Content or Controls That Vanish Entirely When the Page Reflows

1.4.10 — Reflow

Scenario

Setting

A social media platform's settings menu

What’s wrong

When the page reflows at small width / high zoom, some content or controls simply disappear with no other way to reach them.

Example 

.settings-nav { display: flex; }
@media (max-width: 480px) {
  .settings-nav .secondary-links { display: none; } /* Privacy, Blocked Accounts links just disappear */
}

Why it matters

A user on a small phone can no longer find the Privacy or Blocked Accounts settings at all, since the links are removed rather than relocated.

How to test

Set the viewport to 320 CSS px wide (or zoom desktop to 400%): scroll only vertically and check that no content or controls have vanished compared to the normal view.

How to fix

Reflow content into a stacked layout instead of hiding it; nothing reachable at desktop width should disappear at narrow widths.

@media (max-width: 480px) {
  .settings-nav { flex-direction: column; }
  .settings-nav .secondary-links { display: block; }
}

Outcome

A user on a small screen scrolls down and still finds the Blocked Accounts link instead of hitting a dead end.

Who is affected

Mobile and zoomed-in users lose access to entire settings sections that desktop users can still reach.

Learn more

Related scenarios