• Success Criterion 1.3.4
  • Conformance level AA

CSS That Hides or Breaks Content in One Orientation Only

1.3.4 — Orientation

Scenario

Setting

A photo-sharing app's upload screen

What’s wrong

CSS that hides or breaks all content in one orientation (@media (orientation: landscape){ body{display:none} } overlays).

Example 

@media (orientation: landscape) {
  body { display: none; }
}

Why it matters

Someone uploading photos with their tablet mounted in landscape sees a completely blank page, with no message explaining why the app vanished.

How to test

Rotate to the 'wrong' orientation and inspect: CSS media queries that hide or break all content in one orientation (e.g., @media(orientation:landscape){display:none}) fail.

How to fix

Never hide entire content for an orientation; reflow the layout with responsive CSS instead of a display:none rule.

.upload-screen { display: flex; flex-wrap: wrap; }

Outcome

A tablet user in landscape now sees the full upload screen instead of a blank page.

Who is affected

Wheelchair users and anyone with a landscape-fixed device mount get a blank screen instead of the upload tool.

Learn more

Related scenarios