Mobile Orientation

title: "Mobile Orientation" weight: 21 description: "Learn WCAG SC 1.3.4 Orientation: content must not restrict orientation to portrait or landscape unless essential, and layouts should adapt to both orientations with equal functionality." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

WCAG SC 1.3.4 Orientation requires that content is not locked to a single orientation (portrait or landscape) unless a specific display orientation is essential, ensuring users can view content in their preferred orientation.

## What You'll Learn

You will understand orientation requirements, avoid orientation locks, design layouts that work in both orientations, and identify essential exceptions.

## Why It Matters

Users may have their device mounted in a fixed orientation (wheelchair, bed mount) or may prefer one orientation for usability reasons. Locking orientation forces these users to use an uncomfortable or impossible position.

## Real-World Use

A mobile app locks to portrait mode because the developer assumed all users hold their phone vertically. A user with a motor disability has their phone mounted horizontally on their wheelchair. They cannot use the app because it forces portrait mode.

## Orientation Flow

```mermaid
flowchart TD
  A[Content] --> B{Orientation lock essential?}
  B -->|Yes| C[Document the reason]
  B -->|No| D[Support both orientations]
  C --> E[Implement lock]
  D --> F[Design responsive layouts]
  F --> G[Test both orientations]

Implementing Orientation Support

Do not lock orientation. Design layouts that work in both portrait and landscape.

<!-- Content that works in both orientations -->
<div class="orientation-demo">
  <div class="media-card">
    <img src="photo.jpg" alt="Photo">
    <div class="card-content">
      <h3>Title</h3>
      <p>Description text.</p>
    </div>
  </div>
</div>

/* Flexible layout for both orientations */
.media-card {
  display: flex;
  gap: 16px;
}

/* Portrait: stack vertically */
@media (orientation: portrait) {
  .media-card {
    flex-direction: column;
  }

  .media-card img {
    width: 100%;
    height: auto;
  }
}

/* Landscape: side by side */
@media (orientation: landscape) {
  .media-card {
    flex-direction: row;
  }

  .media-card img {
    width: 40%;
    height: auto;
  }

  /* Ensure content fits landscape height */
  .content-area {
    min-height: calc(100vh - 60px);
  }
}

/* General orientation safety */
body {
  overflow-x: hidden;
  width: 100%;
}

// Orientation detection and adaptation
function handleOrientationChange() {
  const orientation = screen.orientation.type;
  const isPortrait = orientation.includes('portrait');

  console.log(`Orientation: ${orientation}`);

  // Adjust layout if needed
  if (isPortrait) {
    document.body.classList.add('portrait');
    document.body.classList.remove('landscape');
  } else {
    document.body.classList.add('landscape');
    document.body.classList.remove('portrait');
  }

  // Verify content is visible
  checkOrientationContentVisibility();
}

function checkOrientationContentVisibility() {
  const viewportHeight = window.innerHeight;
  document.querySelectorAll('section, .content-block').forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.bottom > viewportHeight && rect.top < 0) {
      console.warn(`Content partially hidden: ${el.tagName}`);
    }
  });
}

screen.orientation.addEventListener('change', handleOrientationChange);

Common Mistakes

• Locking orientation without an essential reason
• Not testing in both orientations
• Hiding content in one orientation
• Using fixed heights that overflow in landscape
• Not adjusting touch target sizes for landscape grip
• Breaking layouts with orientation-specific code
• Not considering orientation with split-screen multitasking

Practice and Challenge

Practice 1: Check if your app locks screen orientation. Practice 2: Test all pages in both portrait and landscape. Practice 3: Check for content hidden in one orientation. Practice 4: Test navigation in landscape mode. Practice 5: Verify forms are usable in landscape.

Challenge: Redesign a mobile page that currently only works in portrait to work in both orientations. The page has a header, content area with cards, and a footer. In landscape, ensure: all content is visible without scrolling too much, touch targets are still accessible, navigation is usable, and forms do not require excessive scrolling.

FAQ

Mini Project

Create a page that works identically in portrait and landscape on mobile. Include: a card grid, a form, a data table, and navigation. Test in both orientations on real devices. Document any layout differences and ensure all functionality is available in both.

What's Next

Mobile DevTools for Accessibility covers using browser DevTools for mobile accessibility testing.