1.3.4 Orientation

What does it mean?

Some people have their tablet or phone fixed in one orientation, for example mounted on a wheelchair. If a website only works in portrait or shows "please rotate your device", they cannot use it. Your content must adapt to both orientations.

The exception is when a specific orientation is essential, for example a piano app, a bank cheque scan or a virtual reality view. A layout that just looks nicer in one orientation is not essential.

Who does it help?

• People with devices mounted in a fixed position
• People with limited dexterity who cannot easily rotate a device
• People with low vision who prefer landscape for larger text

Common failures

• An overlay asking users to rotate the device before they can continue
• CSS or JavaScript that locks the page to portrait
• A layout that hides navigation or content in landscape

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Does the content work in both portrait and landscape?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

@media (orientation: landscape) {
  main { display: none; }
  .rotate-hint { display: block; }
}

@media (orientation: landscape) {
  main { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

Instead of hiding content in landscape, the layout adapts and uses the extra width.

Official source

Understanding WCAG 2.2 at the W3C: 1.3.4 Orientation