1.3.4 - Orientation

Summary

A page view must not be locked to either horizontal (landscape) or vertical (portrait) views only, unless this is essential.

Here are some examples of when locking the orientation to one direction may considered ‘essential’:

• in a messaging app
• when making music using a piano app
• when viewing slides for a projector show
• for television or virtual reality content.

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 guidance for Web

• Managing Screen Orientation on MDN
• Using Media Queries on MDN
• Media Queries for Standard Devices on CSS Tricks
• Orientation Lock on CSS Tricks
• Responsive Design for Landscape Orientation on CSS Tricks
• The Orientation Descriptor by the W3C
• The Screen Orientation API by the W3C