Never tell users to rotate their device
The page detects portrait, hides everything, and puts up a message asking you to turn the device around. W3C calls the pattern a door slam, and F100 is the failure technique for it, so a match is a defect rather than a graceful fallback. Detecting orientation is not the problem, and that distinction is the useful part of this page. Respond to orientation as much as you like. What fails is offering only one of them, because the whole of the content has to work both ways round rather than a message appearing in the direction you did not build for. Then there is how orientation gets decided, which surprises people. It comes from the shape of the viewport, so a desktop browser window dragged narrow counts as portrait, and a door slam written for phones will fire on a laptop that cannot rotate at all.
How we find it in an audit
We open the content both ways round and watch for the message, which is the whole test and takes seconds. The same page then gets checked in a narrow desktop window, since a viewport taller than it is wide reads as portrait whatever the hardware underneath. Where a message appears, the last question is whether that orientation is essential to the activity rather than convenient for the layout. A check-scanning screen is essential. A dashboard is not.
How affected users experience it
The message asks for the one thing the affected reader cannot do. Someone whose tablet is mounted on a wheelchair arm, or propped in a stand because holding it is not an option, reads Please rotate your device and has no way to comply. That is the sting of this one. The problem is not that the layout is awkward in portrait. It is that the site has replaced its content with an instruction the reader cannot follow, and left no way around it.
Passes vs. fails
Passes
/* no overlay. The layout answers to both */
@media (orientation: portrait) { .toolbar { flex-direction: column; } }Fails
<div class="rotate-overlay">Please rotate your device to landscape to continue</div>How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Orientation of the page is not restricted using CSS transformsA tool can check this
The other techniques filed under this rule
3 guides on this site are filed under 1.3.4 Orientation. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
This guide is our interpretation of W3C technique F100: Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.