Structure
Do not lock the page to one orientation
- Rule:
css-orientation-lock - Severity: Serious
- WCAG level AA
Why it matters
A device mounted on a wheelchair is fixed in one orientation. A page that rotates its own content back, or hides it in portrait, cannot be used at all from that chair.
How to fix it
- Remove transforms and display rules that undo the device orientation.
- Let the layout reflow in both orientations instead.
- Lock orientation only where it is essential to the content, such as a piano keyboard.
In markup
@media (orientation: portrait) {
.page { transform: rotate(90deg); }
}/* Let the page reflow; do not rotate it back. */
.page { max-width: 100%; }The requirement behind it
This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:
- 1.3.4 Orientation (opens in new tab) — WCAG level AA
Further reading
Deque University on css-orientation-lock (opens in new tab)
Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.
Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.