This document is in beta. Help us by reporting issues via Github or email.
Back to the overview page
Orientation
Make sure that people can do everything in both portrait and landscape modes.
All of your page’s content and functionalities must be available to people when their device is both horizontal (landscape mode) and vertical (portrait mode).
There are some cases when locking the orientation to one direction may considered ‘essential’. For example:
- in a messaging app
- when making music using a piano app
- when viewing slides for a projector show
- for television or virtual reality content.
On this page:
Requirements
- Each page/screen should be viewable both in horizontal (landscape) and vertical (portrait) orientation.
Common mistakes
- Locking the orientation of the device so it is set in one way only, and does not adapt.
Why?
- Users with low-vision should be able to view content in the orientation that works best for them, due to the need for increased text size;
- Some users with mobility impairments mount their device to a wheelchair, and need to see content in their preferred orientation.
Official wording in the Web Content Accessibility Guidelines
Success Criterion 1.3.4 Orientation: Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. (Level AA)
Examples where a particular display orientation may be essential are a bank check, a piano application, slides for a projector or television, or virtual reality content where content is not necessarily restricted to landscape or portrait display orientation.
See the W3C’s detailed explanation of this guideline with techniques and examples.
Guidance for Design
- Do not design in such a way that assumes a particular orientation.
- Use show/hide buttons to allow access to content in different orientations.
Guidance for Web
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email.