• Success Criterion 1.3.4
  • Conformance level AA

Layout That Breaks After Rotating Even Though Rotation Is Allowed

1.3.4 — Orientation

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

Rotation is technically allowed, but the layout breaks after rotating (content cut off, controls unreadable or unreachable), so only one orientation is usable in practice.

Example 

.call-controls {
  position: absolute;
  bottom: 10px;
  left: 50px;
  width: 300px;
}

Why it matters

Someone who rotates their phone mid-meeting to see participants better suddenly cannot find or tap Leave Call or Mute because the controls overlap the video feed.

How to test

Rotate the device fully and interact with the layout: if rotation is technically allowed but content gets cut off or controls become unreachable afterward, it fails in practice.

How to fix

Build control layouts with relative units and flexbox so they adapt to both orientations instead of assuming one aspect ratio.

.call-controls {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

Outcome

A user who rotates mid-call can now reach Mute and Leave Call without any overlap.

Who is affected

Users who rotate for a better view, and anyone with a device fixed in landscape by a mount, lose access to essential call controls.

Learn more

Related scenarios