Page title, frames and zoom Rule

Do not lock the page to portrait or landscape css-orientation-lock

Some sites decide they only work in landscape and use a media query to rotate the whole page 90 degrees when the phone is held upright, or show a please rotate your device overlay. People whose phone or tablet is fixed to a wheelchair cannot rotate it. WCAG 1.3.4 says content must work in both orientations unless one is essential, like a piano app.

WCAG 2.2 AA 1.3.4 Orientation

Websight does not run this check. axe-core marks the css-orientation-lock rule as experimental, and rules with that tag are skipped when scanning by WCAG level. Other tools may still report it as CSS Media queries must not lock display orientation. Test it by hand using the steps below.

Who it affects

Someone whose tablet is mounted on a wheelchair arm in portrait opens the newspaper's puzzle page and sees it sideways, with a message asking them to rotate a device they cannot move.

Someone with limited hand movement using a phone on a stand cannot pick it up to turn it.

Someone reading in bed with rotation lock on gets a sideways page and no way to fix it short of changing system settings.

Broken versus fixed

The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.

Broken
@media (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
  }
}

Held upright, the whole page is turned on its side and the person is expected to turn the phone.

Fixed
body { max-width: 100%; }
@media (max-width: 600px) {
  .results-table { font-size: 14px; }
  .results-table td { padding: 4px; }
}

The layout adapts to the width it is given. A narrow screen gets a narrower layout, not a rotated one.

Test it by hand in two minutes

  1. Open the page on a phone, hold it upright, then sideways. It should be usable both ways, even if the layout differs.
  2. Search the CSS for orientation: portrait and orientation: landscape. Adjusting the layout inside those queries is fine; rotating or hiding the page is not.
  3. Look for please rotate your device overlays, and for screen.orientation.lock() in scripts.
  4. Decide honestly whether one orientation is essential. A video is not; a wide table is not; a virtual piano keyboard might be.

The fix

Before
@media (orientation: portrait) {
  body { transform: rotate(90deg); }
}
After
@media (max-width: 600px) {
  .results-table { font-size: 14px; }
}

Use media queries to adapt to the width, not to refuse an orientation. If a game genuinely needs landscape, keep it playable behind any prompt.

Rotate prompt overlay

Before
@media (orientation: portrait) {
  .rotate-prompt { display: block; }
  .app { display: none; }
}
After
@media (orientation: portrait) {
  .app { flex-direction: column; }
}

Rearrange the parts for a tall screen instead of hiding them.

Script lock

Before
screen.orientation.lock("landscape");
After
/* removed */

Orientation lock calls only work in full screen anyway, and they fail WCAG 1.3.4 for the same reason.

Common mistakes

  • Rotating only the main content, so the page still cannot be used upright.
  • Treating a wide table as essential; let it scroll sideways instead.
  • Locking orientation in the web app manifest ("orientation": "landscape") for a content site.
  • Testing only with a phone in your hand, which can always be rotated.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level AA. It is a check (not run by Websight) for:

The scanner looks through the page's stylesheets for orientation media queries that apply a transform rotating the content sideways. It does not detect locks done with the manifest, with JavaScript, or with a please rotate overlay, and it cannot decide whether an orientation is essential. This check is tagged experimental in axe-core. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

AA Do not block pinch zoom on phones meta-viewport The viewport meta tag tells phones how to scale the page. AA Text spacing must not be locked with !important avoid-inline-spacing Some people with dyslexia or low vision read far better with wider line, letter or word spacing, and they apply it with a browser extension or a bookmarklet. AA Buttons and links must be big enough to press target-size Every control you can click or tap needs to be at least 24 by 24 CSS pixels, or have enough empty space around it that a 24 pixel circle centred on it does not touch a neighbour. A Scrollable areas must be reachable with a keyboard scrollable-region-focusable When a box has its own scrollbar, mouse users scroll it with the wheel.

Scan your own page for the 64 checks Websight does run

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.