Perceivable · 1.3 Adaptable
Content must not restrict its display and operation to a single orientation, portrait or landscape, unless that orientation is essential, such as for a bank check, a piano app or slides for a projector.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Switch the frame to portrait in each version. The failing version hides the account until you turn it back.
$2,340.18
$2,340.18
Please turn your device to landscape to use this app.
The tools follow the version you last used.
What happened
Why it passes
In portrait the two panels stack into one column, so you can check your balance and payments whichever way you hold the device.
Why it fails
In portrait a message covers the account and asks you to rotate. Someone whose tablet is mounted on a wheelchair cannot turn it, so they cannot use the account at all.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
.rotate-message { display: none; }@media (orientation: portrait) { .app { display: none; } .rotate-message { display: block; }}In portrait the app is replaced by a "Please rotate your device" message, so it only works in landscape although nothing about it needs landscape.
Passes
Live preview
.app { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }@media (orientation: portrait) { .app { grid-template-columns: 1fr; }}Portrait gets a one-column layout instead of a block, so the content works whichever way the device is held.
Fails
Live preview
// Checkout forces portrait for no essential reasonasync function openCheckout() { await document.documentElement.requestFullscreen(); await screen.orientation.lock("portrait");}A checkout form does not need one orientation, so locking it shuts out people whose device is fixed in landscape, such as a tablet mounted on a wheelchair.
Passes
Live preview
// A full piano keyboard needs the width of landscapeasync function openPiano() { await document.documentElement.requestFullscreen(); await screen.orientation.lock("landscape");}A piano app is one of the cases where a specific orientation can be essential, so the exception in 1.3.4 allows the lock here.
Why it matters
People whose device is mounted in a fixed orientation, such as on a wheelchair, or who cannot easily rotate it, can use content in the orientation they have.
W3C: Understanding 1.3.4Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures