This document provides information about the related accessibility checks:
Orientation of the page is not restricted using CSS transforms.
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, such as rotating, scaling, or skewing them.
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.
This check affects the following users who have:
Motor impairments: These users often have devices mounted in a fixed orientation and find it difficult to rotate the screen.
Low vision: These users rely on screen magnifiers that function optimally in a specific orientation.
Cognitive disabilities: These users benefit from a consistent layout and may find forced orientation changes confusing.
User story
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.
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.
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.
The Web Governance platform flags pages that are restricted to a specific orientation, either landscape or portrait, due to CSS transforms.
To resolve this issue, simply remove the CSS transforms that prevent the page from adapting to different orientations.
Please refer to the ACT rules section below, which includes a link to a complete technical explanation of this check.
Additional resources
This section contains useful resources for this subject.
Orientation of the page is not restricted using CSS transforms
1.3.4 Orientation
This document provides information about the related accessibility checks:
Orientation of the page is not restricted using CSS transforms.
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, such as rotating, scaling, or skewing them.
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.
This check affects the following users who have:
Motor impairments: These users often have devices mounted in a fixed orientation and find it difficult to rotate the screen.
Low vision: These users rely on screen magnifiers that function optimally in a specific orientation.
Cognitive disabilities: These users benefit from a consistent layout and may find forced orientation changes confusing.
User story
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.
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.
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.
The Web Governance platform flags pages that are restricted to a specific orientation, either landscape or portrait, due to CSS transforms.
To resolve this issue, simply remove the CSS transforms that prevent the page from adapting to different orientations.
Please refer to the ACT rules section below, which includes a link to a complete technical explanation of this check.
Additional resources
This section contains useful resources for this subject.
Web Governance