• Success Criterion 1.3.4
  • Conformance level AA
  • W3C reference F100

Page That Just Asks Users to Rotate Their Device to Continue

1.3.4 — Orientation

Scenario

Setting

A public library's catalog search

What’s wrong

Instead of working in both orientations, the page just shows 'please rotate your device' — users who can't rotate are locked out.

Example 

<div class="rotate-overlay">
  <p>Please rotate your device to portrait mode to continue.</p>
</div>

@media (orientation: landscape) {
  .rotate-overlay { display: flex; }
  .catalog-results { display: none; }
}

Why it matters

Someone whose tablet is mounted in landscape, or who simply cannot rotate their device, sees only a rotate message and never reaches the actual catalog results.

How to test

Rotate the device: if instead of adapting, the app shows a 'please rotate your device' blocking message, it fails.

How to fix

Remove the landscape block and let the results layout reflow in both orientations instead of hiding it behind a rotate prompt.

.catalog-results { display: block; }

Outcome

A user with a landscape-mounted tablet now searches the catalog without ever seeing a rotate prompt.

Who is affected

Wheelchair and bed-bound users with fixed-position mounted devices are locked out entirely when the app demands portrait mode.

Learn more

Related scenarios