WCAG 1.3.4 Orientation: Do Not Lock Screen Orientation

What This Criterion Requires

WCAG 1.3.4 requires that content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific orientation is essential. This criterion was added in WCAG 2.1 to address the needs of users who mount their devices in a fixed orientation. Some wheelchair users have their tablets mounted on the arm of their wheelchair in a fixed landscape or portrait position and cannot rotate the device. Similarly, some users with motor impairments may only be able to interact with their device in one orientation. Content must be functional and readable in both orientations unless the essential nature of the content requires a particular orientation, such as a piano keyboard application that genuinely needs landscape mode to function. Using CSS or JavaScript to force a single orientation, or designing layouts that only work in one orientation, violates this criterion. Developers should use responsive design techniques and CSS media queries to ensure layouts adapt gracefully to both orientations.

Why It Matters

Restricting screen orientation creates a significant barrier for users who physically cannot rotate their devices. Many wheelchair users mount their tablets in a fixed position on their chair, and the mounting hardware may not allow rotation. Users with limited dexterity or motor control may find it difficult or impossible to rotate a device. Some users with low vision may prefer one orientation over another because it provides a better reading experience for them. When a website locks orientation to portrait mode, a user whose device is fixed in landscape position simply cannot use the site at all. This is a complete access barrier, not just an inconvenience. By supporting both orientations, developers also improve the general user experience for all users who switch between orientations depending on their context, whether they are reading in bed, using a tablet as a second monitor, or presenting content on a mounted display.

Common Failures and How to Fix Them

<style>
@media screen and (orientation: landscape) {
  body {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
</style>

<style>
/* Responsive styles for both orientations */
@media screen and (orientation: portrait) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}
@media screen and (orientation: landscape) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    screen.orientation.lock('portrait-primary')
      .catch(err => console.log(err));
  });
</script>

<script>
  // Allow content to work in any orientation
  // Adapt layout based on current orientation
  function handleOrientation() {
    const isLandscape = window.matchMedia('(orientation: landscape)').matches;
    document.body.classList.toggle('landscape-layout', isLandscape);
    document.body.classList.toggle('portrait-layout', !isLandscape);
  }
  window.addEventListener('orientationchange', handleOrientation);
  handleOrientation();
</script>

How to Test

1. Open the page on a mobile device or tablet and view it in portrait orientation, then rotate to landscape and confirm the content is still fully usable.
2. Use browser DevTools responsive mode to switch between portrait and landscape viewports and verify the layout adapts correctly.
3. Check the source code for any use of screen.orientation.lock() or CSS transforms that forcibly rotate content into a single orientation.
4. Verify that all interactive elements remain accessible and functional in both orientations.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Framer Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Five Minute Accessibility Audit

Related WCAG Criteria

• WCAG 1.4.10