• 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 

@media (orientation: portrait) { .app { display: none; } }

Why it matters

People whose devices are mounted or who cannot rotate a display freely.

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

The page/app must remain fully usable in both portrait and landscape, with the layout intact after rotation. /* Layout adapts with responsive CSS in both orientations instead of blocking one */ Content must work in both portrait and landscape unless a specific orientation is essential.

Outcome

On a food-delivery app's order-tracking screen, this barrier is gone for people whose devices are mounted or who cannot rotate a display freely — they can complete the task without hitting this wall.

Who is affected

People whose devices are mounted or who cannot rotate a display freely.

Learn more

Related scenarios