How to Get Screen Orientation Support Right
Letting content work in both portrait and landscape orientation rather than locking a website or app to one.
Marcus Adeyemi
Where most projects go wrong
The usual mistakes:
- Messages that block content until the device is rotated
- Orientation locks set for design convenience
- Layouts that break in landscape on small phones
- Hiding controls in one orientation
What good looks like instead
- Test every screen in both orientations
- Remove orientation locks unless truly essential
- Adapt layouts rather than showing rotate-your-device messages
- Check video players and games separately
- Document any essential exceptions
Why it matters
Some people have devices mounted in a fixed orientation, for example on a wheelchair, and a locked orientation can make content unusable for them.
The specs that matter
| Measure | Figure |
|---|---|
| WCAG 1.3.4 Orientation, AA | content is not restricted to a single display orientation unless essential |
| Essential exceptions | examples include a piano app or a check deposit that needs landscape |
| Mounted devices | some users cannot rotate their device |
| Implementation | responsive layouts adapt without forcing rotation |
Knowing when to hand it over
Tip: Bring in help when an app or web app locks orientation, or when accessibility testing of mobile layouts is needed.
Where this comes from
- W3C Web Accessibility Initiative — Understanding SC 1.3.4 Orientation
- Apple Human Interface Guidelines — Layout
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
