1.3.4 Orientation

Allow the user to use the website in their preferred device orientation.

About

This standard is about 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. The aim of this success criterion is to ensure that users who cannot easily rotate their device can still access content and functionality on websites in any device orientation.

This will help, users who cannot easily rotate their screens, such as those who have their device mounted on a wheelchair.

This criterion contains an exception for websites or applications where a specific device orientation is essential. 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 binary display orientation is not applicable.

Example:

Example 1: Online video site

A video is shown in either portrait or in landscape based on the user's chosen orientation.

Example 2: Messaging website

A messaging website can display messages in both portrait and landscape orientations.

Example 3: eReader web app

An eReader web app can display the contents of a book in both portrait and landscape orientation.

Example 4: Check deposit in banking app

An example where orientation is essential could be a banking app that requires the device be in landscape mode to easily and accurately capture an image of a check for deposit. These paper forms are typically about twice as wide as they are high.

Example 5: Piano app

An example where orientation is essential could be a piano app that requires the device to be in landscape mode to allow room for enough of the piano keys to be functionally usable. Since a piano app is emulating a physical piano keyboard that needs to retain relative physical characteristics between keys, either too few keys would be available, or the keys would be much too narrow.

Figure (1):

Figure 1

Figure (2):

Figure 2

Figure (3):

Figure 3