1.3.4 Orientation

This document gives information about the related Acquia Optimize checks:

• 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.

What¶

Content must not be limited to a specific screen orientation, such as portrait or landscape. This means that the content can adapt if the user changes the orientation of their device from portrait to landscape.

Excluded from this requirement are types of content that require a specific orientation to function properly. For example, a piano application that only works in landscape mode because a portrait mode view wouldn't provide enough space to effectively play the keys.

Why¶

Some users have their mobile phones and other devices firmly mounted in a specific orientation. For example, an iPad might be fixed inside a car, or a mobile phone might be attached to the armrest of a wheelchair. When the device is mounted in a specific orientation, it is essential for the content to adjust itself to the direction in which the device is mounted. This way, the user can still read and interact with the content easily.

This check affects the following users who have:¶

1. Mobility impairments; who have their device fixed in one position.

2. Visual impairments; who prefer reading text in landscape mode for improved readability with larger font sizes.

    

Examples¶

This section gives some examples of the issue.

Example 1¶

In this example, view the website on a mobile phone in vertical mode (portrait). Then turn the phone sideways. The image adjusts to landscape mode while the text lines remain horizontal for the reader. This is beneficial because it ensures that the user can still read the content easily.

Example 2¶

In this example we will use the same website as in "Example 1" above. However, this time the content does not adjust when the phone is turned to a landscape orientation. This is inconvenient for the user because it becomes difficult to read the content when the phone is lying down.

How¶

This section gives information on how to identify and fix this type of error.

1. Access the website on a device that adjusts the way web content is shown when the position of the device changes. This can be your mobile phone, for instance.

2. Look at the intended page with the device held upright, and then with it turned on its side.

3. Confirm that the page content adjusts itself as the position of the device changes.

If you find that the content is stuck and doesn't adjust when you turn your device, then there is a mistake. Talk to your designer and web developer about how they can fix the problem. However, if the content adjusts correctly as intended, you can mark this issue as reviewed.

For advanced steps on one way to sufficiently fix this issue, see the W3 recommended technique in this external article:

• G214: Using a control to allow access to content in different orientations which is otherwise restricted

  Note

  Types of content that require a specific orientation to function properly are excluded from this requirement. If you have this kind of content, you can also mark it as reviewed even though it does not adapt to different orientations.

Who in your team can typically fix this?¶

• UX Design to decide how content should adapt to different orientations.

• Front-end Development to implement the adaptive design.

Additional resources¶

This section contains useful resources for this subject.

WCAG success criteria¶

• 1.3.4 Orientation.

  Related Articles¶

  • No loss of content or functionality occurs when changing certain text style properties
  • Scrolling in more than one direction is not necessary for small displays and zoomed content
  • Content on Hover or Focus