Perceivable · Level AA · 1.3.4
Orientation
A site or app shouldn't lock itself to portrait or landscape only — it should work in whichever orientation the user's device happens to be in, unless a specific orientation is genuinely essential to what the content is.
- Motor
- Low vision
How to recognize it
Rotate the device (or the browser's orientation emulator) and check whether the page adapts or gets stuck — a mobile page that forces portrait and refuses to lay out properly in landscape, or an app that locks to landscape and won't rotate back, is the failure. This hits people who use a device mounted in a fixed position — a wheelchair mount, a tripod — who physically can't rotate the device to match whatever orientation the content demands, since their orientation is fixed by the mount, not by choice. It also affects some low-vision users who deliberately rotate to landscape specifically to get larger text or a wider single-column layout to work with.
How to fix it
Build layouts that respond to both portrait and landscape rather than hard-locking one via CSS orientation media queries or a platform-level orientation lock. The exception is narrow and genuine: content where a specific orientation is essential to what it is — a bank check graphic that's inherently wide, a piano keyboard app that needs landscape width for playable key sizes, a TV or projector display — doesn't need to support both, since forcing the 'wrong' orientation there would break the content's actual purpose, not just its layout.
Example
Avoid
screen.orientation.lock('portrait');
/* app forces portrait for a general-purpose form or article that has no essential reason to be portrait-only */Prefer
@media (orientation: landscape) { .layout { flex-direction: row; } }
@media (orientation: portrait) { .layout { flex-direction: column; } }
/* layout adapts to either orientation instead of locking one */