On each web page, can the content be viewed regardless of the screen orientation (portrait or landscape) (except in special cases)?
Some users cannot rotate their device. A person in a wheelchair with a phone fixed in landscape mode, or someone whose mobility doesn't allow them to hold the device in both orientations: if your site blocks an orientation, these people lose access to content. Blocking an orientation means excluding part of your visitors.
The criterion requires that all content remains accessible in both portrait and landscape. The presentation can change, as can the path to access it. A hamburger menu in landscape where the menu was expanded in portrait is compliant. What is not compliant: content that disappears with no alternative access route.
Orientation does not mean resolution. This is the most frequent mistake in audits. An element hidden via @media (max-width: 767px) creates no problem for criterion 13.9. This criterion only tests the switch from portrait to landscape and vice versa, not screen size variations.
To test: display the page in portrait (375×667 px for example), identify all content, then switch to landscape (667×375 px). Verify that each piece of content remains accessible, even via a different path.
Un test to ensure that display adapts to screen orientation
Content access in portrait and landscape
- Display the page in portrait orientation (e.g., 375×667 px using your browser's developer tools).
- List all visible or accessible content: text, images, tables, forms, navigation links.
- Switch to landscape orientation (e.g., 667×375 px).
- Verify that each identified piece of content remains accessible, either directly or via a menu, footer link, or any other alternative mechanism.
- Verify that no informative content has disappeared without an alternative.
The test is validated if all content remains accessible in both orientations, even if its layout or access path differs.
Examples
❌ Non-compliant : Pricing section hidden in landscape without alternative
<style>
@media (orientation: landscape) {
.tarifs-section {
display: none;
}
}
</style>
<section class="tarifs-section">
<h2>Our pricing</h2>
<table>
<tbody>
<tr><td>Starter Plan</td><td>9 €/month</td></tr>
<tr><td>Pro Plan</td><td>29 €/month</td></tr>
</tbody>
</table>
</section>In landscape mode, the pricing section disappears completely. No link, no menu, no other path allows access to it. A user with their phone fixed in landscape can never view the prices.
✅ Compliant : Navigation reorganized in landscape, content intact
<style>
.menu-toggle { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
.main-nav ul { display: none; }
.main-nav ul.is-open { display: flex; flex-direction: column; }
.menu-toggle { display: inline-block; }
}
</style>
<!-- The button only appears in mobile landscape -->
<button
class="menu-toggle"
aria-expanded="false"
aria-controls="main-nav-list"
aria-label="Navigation menu">
Menu
</button>
<nav class="main-nav">
<ul id="main-nav-list">
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>In landscape, the menu collapses behind a keyboard and screen reader accessible button. The Pricing and Contact links remain reachable. The presentation changes, the content does not.
Tips and pitfalls
⚠️ Testing with max-width: 767px and calling it an orientation test
Criterion 13.9 tests the switch from portrait to landscape, not responsive breakpoints. An audit that redefines 'portrait mode' as 'resolution below 767 px' is incorrect. Test by toggling the orientation of the simulated device in DevTools, not by resizing the browser window.
⚠️ Some interfaces are exempt by nature
A game that must be played in landscape, a piano input interface, a bank check deposit tool: these cases make the criterion not applicable. Condition: orientation must be essential to operation, not just convenient. If it's the only way to access the service, an accessible alternative must be provided.
💡 Accessible via another path: it's compliant
An element hidden in one orientation does not automatically create non-compliance. If the content remains accessible via a dropdown menu, a footer link, or another section of the page, the criterion is met. The RGAA explicitly states that 'the means of accessing it may differ' depending on orientation.
⚠️ Locking orientation via JavaScript
Some developers use screen.orientation.lock() or transform: rotate(90deg) to force an orientation. This is the most direct non-compliance with criterion 13.9. The content is technically present in the DOM, but impossible to view in the device's native orientation. Avoid this except in specially justified cases.
⚠️ Desktop business application in a controlled environment
For a business application used exclusively on desktop, in a controlled IT environment where screens are always in landscape mode, criterion 13.9 may be considered not applicable. This exemption does not apply to public-facing services or interfaces accessible from a mobile device.
Frequently asked questions
When does an element hidden in landscape mode result in RGAA non-compliance?
No, if the content remains accessible via another path. The RGAA states that 'the means of accessing it may differ' depending on orientation. A logo hidden in landscape because the information is available elsewhere on the page is not non-compliance. A data table hidden with no alternative is.
How do I test RGAA criterion 13.9 without a physical mobile device?
Browser DevTools allow you to simulate orientation. In Chrome or Edge: enable Device view (Ctrl+Shift+M), select a mobile profile (iPhone, Pixel...) and click the rotation button. Test at multiple resolutions to cover mobile and tablet. The RGAA does not specify a minimum resolution for this test.
In what cases does screen.orientation.lock() comply with RGAA criterion 13.9?
Only if orientation is functionally essential to the service (game, check deposit, piano interface). In all other cases, locking orientation creates direct non-compliance. Remove the lock and adapt the layout with CSS for both orientations.
What is the difference between RGAA criteria 13.9 and 10.11?
Criterion 10.11 concerns reflow: content must remain readable without horizontal scrolling down to 320 px wide. Criterion 13.9 concerns orientation: content must be accessible in both portrait and landscape. Both may apply on mobile, but they test distinct issues.
What exactly does 'identical content' in both orientations mean according to RGAA?
Not identical. The RGAA wording immediately clarifies that 'the presentation and means of accessing it may differ'. 'The same' means the information is available, not that the layout is identical. The European standard EN 301 549 confirms this: changes due to display size are not subject to this criterion.