- 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
A photo-sharing app's upload screen shows the problem clearly: CSS that hides or breaks all content in one orientation (@media (orientation: landscape){ body{display:none} } overlays).
Why it matters
People whose devices are mounted or who cannot rotate a display freely. On a photo-sharing app's upload screen, this barrier means they can't read the text against its background.
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
The page/app must remain fully usable in both portrait and landscape, with the layout intact after rotation.
Outcome
Corrected, a photo-sharing app's upload screen now lets a visitor see the control's boundary and current state.
Who is affected
People whose devices are mounted or who cannot rotate a display freely.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- App Locked Into One Screen Orientation With No Real Reason
- Page That Just Asks Users to Rotate Their Device to Continue
- Screen Orientation Locked in Code With No Essential Justification
- App Manifest Locking Orientation for Ordinary, General Content
- Critical Controls Cropped or Unusable in One Orientation
- Video Player Forcing Landscape Fullscreen for Ordinary Content