"Please Rotate Your Device" Is a Locked Door for Some Users

Who Cannot Turn the Phone

A phone or tablet clamped to a wheelchair, a bed frame or a desk arm stays in whatever orientation it was mounted in. So does a device held by someone with limited grip or one working arm. For them, a page that says "please rotate your device" is not asking for a small effort. It is a locked door.

WCAG added a criterion for this in version 2.1, precisely because mobile layouts had started to assume the user could always turn the screen.

What WCAG Requires

Essential is narrow. The W3C's examples are things like a piano keyboard app, a bank cheque-deposit camera view, or a slide meant for a projector: cases where the task does not work any other way. A layout that was only designed for portrait is not essential. Neither is "it looks better in landscape".

What is not a lock. Rearranging the page in the other orientation is exactly what orientation media queries are for. Two columns in landscape and one in portrait passes. So does hiding a decorative image when the screen is short. The criterion is only broken when the content, or the ability to use it, is withheld.

How the Web Locks Orientation

1. Hiding the page in the other orientation. The most common form, often paired with a full-screen "rotate your device" message:

/* Fails SC 1.3.4: the page is gone in landscape */
@media (orientation: landscape) {
  body { display: none; }
  .rotate-message { display: block; }
}

2. Rotating the page to counter the device. A rule that turns html, body or the app root a quarter turn inside an orientation query, so the content always appears the way the designer drew it. It keeps the page visible but sideways to the user, which is the same lock.

/* Also fails: forces the portrait layout sideways in landscape */
@media (orientation: landscape) {
  html { transform: rotate(-90deg); }
}

3. Utility classes that do the same. In Tailwind, landscape:hidden or portrait:hidden on the page's root element is rule 1 written as a class name. On a single component it is usually fine; on the root it hides everything.

4. The Screen Orientation API. screen.orientation.lock("portrait") asks the browser to hold one orientation. Browsers generally only honour it for a fullscreen page or an installed web app, which is why it tends to appear in games and media players. Outside a genuinely essential case it is the same restriction.

5. The web app manifest. An installed web app whose manifest.json sets "orientation": "portrait" opens locked. The browser tab version is unaffected, so this one only shows up after someone adds the site to their home screen.

The Fix

Delete the rule that hides or rotates the page, and let the layout reflow. If the landscape view looked broken, that is a layout problem, and it is usually one max-height query away from fine:

/* Short landscape screens: shrink the fixed header, don't hide the page */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header { position: static; }
  .hero { min-height: auto; }
}

Remove screen.orientation.lock() unless the task is essential, and take orientation out of the manifest, or set it to "any". If a message nudging users to rotate helps, keep it as a suggestion over a working page, never as a replacement for one.

How to Test It in Thirty Seconds

1. Turn off rotation lock on a phone and open the page. Rotate it both ways.
2. Every piece of content and every control in portrait should still be there and usable in landscape, and the other way round.
3. If the site can be installed to the home screen, install it and rotate again. That is where a manifest lock shows up.
4. On a desktop: Chrome DevTools device emulation has a rotate button next to the device size. It exercises the CSS, though not the manifest or the API.

How to Check Your Own Page

The checker at the top of this article reads your page's HTML and up to eight of its stylesheets. It fails a page root, html, body, main or the app's root element, that is hidden or turned a quarter turn inside an orientation query, and Tailwind's landscape:hidden or portrait:hidden on the root, each under SC 1.3.4. A "please rotate" message in the page text and a script calling screen.orientation.lock() are marked for review. Orientation queries that only rearrange the layout are never reported. It does not read the manifest, so check that one yourself.

The same read catches a phone's other two common barriers: a viewport that forbids zoom (pinch-to-zoom guide) and a fixed desktop width that forces sideways scrolling (reflow guide). It is one page. The whole-site scan renders every page in a real browser and names each WCAG 2.1 AA failure with the element and page it is on, and the checker's result hands your domain straight to it.

Frequently Asked Questions