Content restricted to a particular orientation

WCAG Level

Level AA

Priority

High

Pages/screens/components affected

• Navigation
• RTL
• Video
• Audio - amp-story background audio
• Audio - amp-story-page background audio
• Audio - amp-story using amp-audio
• Animation
• Sharing
• Tooltip
• Page attachment
• Branching
• Consent
• Prerender - Image
• Prerender - Video
• AMP Story Player - Player
• AMP Story Player - AMP Story 360

Description

A site or application (particularly one aimed at mobile/tablet devices) may provide the best experience when viewed in a particular orientation/aspect ratio, such as landscape or portrait mode. However, do not assume that all users are able to rotate their device, or change their browser's aspect ratio. A site or application should never attempt to "force" a particular orientation, display a "please rotate your device" message, or otherwise restrict or prevent the user from using it.

All tested samples show a "The page is best viewed in portrait mode" message (rather than any of the actual page content) when the viewport has the dimensions of a smartphone in landscape mode.

User impact

Depending on their particular situation and needs, some people may have their device mounted in a fixed orientation (for instance, onto a powered wheelchair). Screen reader users may be unaware that the orientation of a site/application has been "fixed" and may find it difficult to navigate through the app while they have the device rotated to the "wrong" orientation. Users of the device's built-in magnification features may also prefer to view a site in landscape mode, as content is generally larger - and lines of text are more readable - in this mode rather than in portrait mode. Users with limited dexterity may find it easier to navigate using a particular orientation or may struggle to physically hold the device in a certain orientation.

Similarly, on laptops/desktops, users may not always have their browser/application window maximized to a traditional full-screen landscape aspect ratio. On some desktop configurations, users may have their primary monitor and operating system set up for portrait, rather than landscape, mode. For this reason, sites/applications that limit their content/functionality to a particular orientation can be problematic for these users. On desktop, this issue affects users that have their browser in a landscape aspect ratio, combined with a high zoom factor.

Required solution

Unless a specific display orientation is essential (not just for design/aesthetic reasons), ensure that the site/application allows users to view and operate content in their preferred screen orientation/aspect ratio.

This means that the site/application should not "lock" the device/screen to a particular orientation, nor prevent the user from viewing or operating content at particular orientations. In general, this would also require the site/application to adapt its overall display/layout to the user's preferred orientation - whether it be a completely separate (but functionally equivalent) layout, a zoomed/letterboxed version of the same layout, or a responsive/adaptive approach.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

Implementation guidance

While it may be technically complex, AMP stories should ensure that they present users with content/functionality even in a smartphone/landscape mode scenario.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Open the page on a mobile/tablet device
2. Change the device's orientation (portrait, landscape)
3. Open the page on a desktop/laptop device
4. Change the browser's aspect ratio (portrait, landscape)
5. Verify that the page does not "force" a particular orientation (for instance, when going from portrait to landscape mode, that the page does not still display in portrait mode, forcing a user to tilt their head in order to read/operate it), that it does not display a "please rotate your device" message instead of the actual content, and that it does not otherwise prevent or restrict users from reading/operating the content.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the website has been tested for the same issue.
• All issues identified throughout the rest of the website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.3.4 Orientation (Level AA)

Test data

Test date: January 2021