---
title: CSS Orientation Lock | Accessibility Rule
description: CSS Media queries must not lock display orientation
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/css-orientation-lock
  md: https://testingbot.com/support/accessibility/web/rules/css-orientation-lock/index.md
---
# Make sure content is not locked to any specific display orientation, and the content is operable in all display orientations

Rule ID: css-orientation-lockUser Impact: seriousGuidelines: Experimental

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.

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [focus-order-semantics](https://testingbot.com/support/accessibility/web/rules/focus-order-semantics)
- [hidden-content](https://testingbot.com/support/accessibility/web/rules/hidden-content)
- [label-content-name-mismatch](https://testingbot.com/support/accessibility/web/rules/label-content-name-mismatch)
- [p-as-heading](https://testingbot.com/support/accessibility/web/rules/p-as-heading)
- [table-fake-caption](https://testingbot.com/support/accessibility/web/rules/table-fake-caption)