--- title: "Orientation of the page should not be restricted" date: "2024-08-18T11:44:53+00:00" summary: "Ensure your website adapts to both portrait and landscape orientations without CSS restrictions. Learn why flexible layouts are crucial for accessibility and user experience, especially for those with motor or visual impairments." image: type: "page" url: "/web-governance/orientation-page-should-not-be-restricted" id: "ad33f71c-92f5-4e87-bcad-c60fca097b7d" --- Table of contents will be added 1.3.4 Orientation Introduction ------------ This document provides information about the Acquia Web Governance accessibility check: * Orientation of the page should not be restricted. What ---- The orientation of a webpage must not be restricted by CSS transforms. Users should be able to view and interact with the content in both portrait and landscape orientations without any forced rotation or layout distortion. The page should adapt naturally to the user's preferred device orientation. Note CSS transforms are a way to change how elements appear on a webpage, and includes rotation, scaling, and skewing. Why --- Some users, such as those with motor impairments, may have their device mounted in a fixed position, which makes it difficult or impossible to rotate the screen. Others, like individuals with visual impairments, may use screen magnifiers that work best in a specific orientation. When a webpage forces a particular orientation, it can create significant barriers. A user with limited mobility who cannot easily rotate their device may struggle to view or interact with content. Similarly, someone using a screen magnifier in landscape mode may find that the content does not display correctly when the page is locked to portrait mode. Allow users to choose their preferred orientation to ensure that the page remains accessible to a wider range of individuals and that they can navigate and interact with the content easily. Who --- ### This check affects the following users who have: * Motor impairments: Who often have devices mounted in a fixed orientation and find it difficult to rotate the screen. * Low vision: Who may rely on screen magnifiers that function optimally in a specific orientation. * Cognitive disabilities: Who benefit from a consistent layout and may find forced orientation changes confusing. ### User story ![A man shown from the shoulders up. He is wearing a suit and the background is blurred.](https://acquia.widen.net/content/907b76d5-ef58-45e7-950a-a05bc90ff037/web/Mon_AccessibilityHelpCenter-UserStory-ManInSuit.png) Michael is a 45-year-old Director of Operations at a global tech company. He is an avid runner who participates in marathons and enjoys early morning jogs. He lives with his spouse and two teenage children, and he values family game nights.   "_I just do not get why some fitness apps force you into one screen orientation. My phone is mounted on the treadmill in portrait mode. That is how the holder is designed! But then I start a workout video, and boom, it flips to landscape. Now I either have to crank my neck or take the phone out, completely throwing off my rhythm._   _And the worst part? Some apps will not even let me manually rotate the screen. Come on, we can send people to Mars, but I cannot watch a simple workout video in the format I need? If an app makes things harder instead of easier, I am out. I will just find a better one_.” Examples -------- This section provides some examples of the issue. ### Example: Website adapting to portrait and landscape view   In this example, a website is designed to automatically adjust whether the device is held in portrait or landscape mode. When the user switches between these views, the content dynamically reorganizes itself. This is the default behavior for websites that are not restricted by CSS transforms. ![The same web page shown on a mobile device in portrait mode and landscape mode, respectively. The content adapts to the orientation of the device so that any text on the page can easily be read by the user.](https://acquia.widen.net/content/8f6854f2-3ee3-44c8-b97d-f864e4ccba1a/web/Mon_AccessibilityHelpCenter-example_page_content_correct_for_orientations.png?w=480&itok=M3zzlTUs) This flexibility ensures that users are not required to hold their device in a specific orientation to read the content. ### Example: Website restricted to portrait view   The website in this example is designed to only work in portrait mode. When the user rotates their device to landscape, the content does not reorganize itself and becomes difficult to read.  ![The same web page shown on a mobile device in portrait mode and landscape mode, respectively. The content adapts to the orientation of the device so that any text on the page can easily be read by the user.](https://acquia.widen.net/content/d1b135fe-dc22-4d83-9c7c-8a652a76ce42/web/Mon_AccessibilityHelpCenter-example_page_content_not_correct_for_orientations.png?w=480&itok=f6wEpZKj) This limitation forces users to hold their device in portrait orientation, which can be inconvenient and frustrating, especially for those who prefer or need to use their device in landscape mode for accessibility or ergonomic reasons. How --- This section provides information on how to identify and fix this type of error. ### How to identify it The Web Governance platform flags pages that are restricted to a specific orientation, either landscape or portrait, due to CSS transforms. ### How to fix it To resolve this issue, simply remove the CSS transforms that prevent the page from adapting to different orientations. Please refer to the _ACT rule_s section below, which includes a link to a complete technical explanation of this check. Additional resources -------------------- This section provides useful resources for this subject. ### WCAG success criteria [1.3.4 Orientation](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html) ### ACT rules Related accessibility conformance testing rules. [Orientation of the page is not restricted using CSS transforms](https://www.w3.org/WAI/standards-guidelines/act/rules/b33eff/proposed/) ### Related articles * [No loss of content or functionality occurs when changing certain text style properties](/web-governance/are-users-able-use-fonts-spacing-and-font-size-their-choice-without-loss-content "Are users able to use the fonts, spacing, and font size of their choice, without loss of content?") * [Scrolling in more than one direction is not necessary for small displays and zoomed content](/web-governance/are-users-forced-scroll-two-dimensions-when-zoomed "Are users forced to scroll in two dimensions when zoomed in?") * [Content on Hover or Focus](/web-governance/does-content-appears-hover-or-focus-block-important-information-or-disappear-users-can-interact-it "Does content that appears on hover or focus block important information or disappear before users can interact with it?")