1.3.4 Orientation

Who it helps

Some people have a phone or tablet mounted to a wheelchair or bed in a fixed position. People with limited dexterity or low vision may also keep a device in the one orientation that works for them.

How to meet it

• Use responsive CSS that adapts to the viewport, so the layout works in both orientations.
• Don't use CSS transforms in an orientation media query to rotate the whole page.
• Don't show a "please rotate your device" message that blocks the content.
• Avoid locking orientation in your web app manifest or with screen.orientation.lock() unless it is essential.
• Know the exceptions: essential cases such as a bank check image, a piano app, slides for a projector or TV, or VR content.
• Test on a real phone and tablet with the rotation lock off, in both orientations.

Examples

@media (orientation: portrait) {
  html {
    transform: rotate(90deg);
  }
}

<div class="rotate-notice">
  Please rotate your device to landscape to continue.
</div>
<style>
  .rotate-notice { display: none; }
  @media (orientation: portrait) {
    .rotate-notice { display: flex; position: fixed; inset: 0; }
  }
</style>

.player { display: flex; gap: 1rem; }
@media (orientation: portrait) {
  .player { flex-direction: column; }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

Common mistakes

• Showing a full-screen "rotate your device" message on phones held in portrait.
• Setting "orientation": "portrait" in the web app manifest for a site that doesn't need it.
• Calling screen.orientation.lock() on a game or video page where orientation isn't essential.
• Hiding key controls in one orientation because the layout was only tested in the other.

Related criteria

• 1.4.10 Reflow
• 1.4.4 Resize Text

Official W3C explanation of 1.3.4