Do not lock your interface to one orientation
The app is pinned to portrait, so someone whose tablet is mounted sideways on a wheelchair arm gets a page they can only read with their head tilted. F97 is the failure technique for that, and a match is a defect rather than a design decision. The mounted-device case is W3C's own example, which is worth knowing, because it reads like an edge case and it is the one the working group picked. There is a middle route as well and most teams have never heard of it. Where one orientation genuinely works better, you can keep it and add a control inside the content that switches to the other, which satisfies the rule without building every layout twice. And where an orientation really is essential, the failure does not apply at all. A bank check, a piano keyboard, slides for a projector and virtual reality content are the examples given.
How we find it in an audit
We clear the device's own rotation lock first, because a locked phone looks exactly like a locked app and a finding built on that would be wrong. Then the content gets opened both ways round, and we check it re-lays out rather than just turning sideways. Three mechanisms do the locking in practice. An orientation setting in the web app manifest, a script calling screen.orientation.lock, and CSS that only ever renders one way. Where a lock exists, the last question is whether the orientation is essential, and essential means the activity needs it rather than the design preferring it.
How affected users experience it
Someone whose device sits in a mount cannot rotate it, and that is the entire problem. A power wheelchair user with a tablet on the arm. Someone with limited grip whose phone lives in a stand. Anyone reading from a fixed screen. For them a locked orientation is not an inconvenience to work around, it is the end of the page, and the harm lands on exactly the people least able to pick the device up and turn it.
Passes vs. fails
Passes
/* no lock call. The layout answers to both */
@media (orientation: landscape) { .layout { flex-direction: row; } }Fails
screen.orientation.lock("portrait");
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 F97: Failure due to locking the orientation to landscape or portrait view. 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.