Make sure content is not locked to any specific display orientation, and the content is operable in all display orientations

The css-orientation-lock rule ensures that web content does not lock the screen orientation (portrait or landscape) and remains accessible and usable regardless of how the user holds their device.

What is being tested?

This rule checks that:

• The page layout works in both portrait and landscape orientations.
• No CSS, JavaScript, or meta techniques are used to force the display into a single orientation.

Why it matters

Locking screen orientation can exclude users who rely on a specific orientation due to physical needs or who use assistive technologies that work only in certain orientations. Allowing the user to control the device orientation ensures better accessibility and usability across different devices and needs.

How to fix the problem

• Remove any CSS or JavaScript that forces a specific orientation.
• Test your site in both portrait and landscape modes to ensure the content remains usable and legible.
• Only enforce orientation if it is essential to the content (e.g., a game or calculator app where layout is critical).

Incorrect example

@media screen and (orientation: portrait) {
  body {
    display: none;
  }
}

Correct approach

/* Use responsive CSS that adapts gracefully to any orientation */
@media screen and (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}
@media screen and (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

Best practices

• Design layouts to be responsive in both orientations.
• Provide users with control over the display orientation, not developers.
• Test regularly on different devices to catch orientation-specific bugs or accessibility issues.