Content needs to work in both orientations
- Rule:
axe/css-orientation-lock - Checks: CSS Media queries must not lock display orientation
- WCAG: 1.3.4
- Fix class:
design: A fix needs a visual decision.
Who it affects
Section titled “Who it affects”- People with limited dexterity, who need targets large enough to hit.
- People with low vision, who zoom, magnify or need strong contrast.
How to fix it
Section titled “How to fix it”A portrait or landscape media query rotates content with transform or rotate
Section titled “A portrait or landscape media query rotates content with transform or rotate”Remove the rotation, and let the layout reflow for the viewport instead. Use orientation media queries to rearrange content, never to turn it sideways. Do not lock the screen with screen.orientation.lock() either.
The content needs one orientation to work, such as a piano keyboard or a bank check
Section titled “The content needs one orientation to work, such as a piano keyboard or a bank check”WCAG exempts content whose orientation is essential, so a person must decide whether it truly is. Most layouts are not: they can reflow. Where it is essential, limit the lock to that content and keep the rest of the page usable in both orientations.
Fixes that fail
Section titled “Fixes that fail”Replacing the rotation with a message that asks people to rotate their device
Section titled “Replacing the rotation with a message that asks people to rotate their device”axe no longer finds a rotation, but the content is still unusable in one orientation, which fails WCAG 1.3.4. People with a mounted device cannot rotate it.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.