• Success Criterion 1.3.4
  • Conformance level AA

Kiosk-Style Overlay That Blocks Use Until the Screen Is Rotated

1.3.4 — Orientation

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Kiosk-style overlays ("best viewed in landscape") that block interaction rather than merely advising.

Example 

<div class="rotate-modal" role="dialog">
  <p>This page is best viewed in landscape. Please rotate your device.</p>
  <button onclick="this.closest('.rotate-modal').remove()">OK</button>
</div>

Why it matters

A user tracking their delivery on a mounted device dismisses the overlay only to find the map still unusable in portrait, with no real way to check order status.

How to test

Rotate the device: if a kiosk-style overlay saying 'best viewed in landscape' blocks interaction entirely rather than just advising, it fails.

How to fix

Even after dismissing it, the map and delivery status remain squeezed into a tiny, non-interactive strip in portrait, so build the map view to work at any aspect ratio instead of shipping a blocking rotate suggestion that leaves the page broken afterward.

.map-container { width: 100%; height: 60vh; }

Outcome

A user with a portrait-mounted phone now tracks their delivery on a fully working map without needing to rotate.

Who is affected

Users with devices fixed in portrait, including wheelchair mounts, can dismiss the message but never actually use the tracking map.

Learn more

Related scenarios