Device orientation & layout

Make your app work in both portrait and landscape orientations.

Overview

What you need to do

Make sure your app’s content and functionality remain accessible and usable when the device is rotated between portrait and landscape orientations. Users need to be able to rotate their device and continue using the app without losing content or functionality.

Meeting the Web Accessibility Standard

When content works in both portrait and landscape orientations (unless a specific orientation is essential), it meets WCAG 2 Success Criterion 1.3.4 Orientation (Level AA).

Why this matters

Many users with motor disabilities mount their devices in fixed positions or can only hold devices in specific orientations. Others use assistive technologies that work better in particular orientations. Some users prefer the inherent text resizing and longer line lengths in landscape mode. Restricting orientation can prevent users from reading text more easily, or in some cases accessing your app’s functionality entirely.

When this applies

When you must support both orientations:

General app content: Reading, browsing, forms, settings
Communication apps: Messaging, email, social media
Productivity apps: Note-taking, document editing, calendars
Shopping and services: E-commerce, banking, booking apps

When orientation restrictions may be acceptable:

Games: When gameplay specifically requires landscape
Specialised tools: Piano keyboards, drawing tablets
Document scanning: When camera orientation matters for accuracy

When to always support both:

Accessibility settings: Users must access these in any orientation
Critical functions: Emergency features, accessibility controls
Form inputs: All data entry should work in both orientations

Design

Checklist for accessible orientation design

Design responsive layouts for both portrait and landscape.
Optimise the design of components to be responsive by considering layout, available space and orientation.
Make sure critical content fits in both orientations.
Maintain readable text sizes in both orientations.
Keep navigation accessible when orientation changes.
Test touch targets remain big enough in both orientations.
Plan for varying screen ratios across devices.
Make sure functionality is consistent regardless of orientation.

Design resources

For design guidance on device orientation and layout for each platform, refer to:

iOS — Layout — Human Interface Guidelines — Apple Developer Documentation
Android — Adaptive design — Material 3.

Development

Here are the key techniques and code examples for implementing accessible orientation support in mobile apps.

iOS implementation

For technical guidance on orientation support, read:

For complete guides on iOS accessibility from Apple Developer Documentation, read:

Android implementation

For technical guidance on orientation support, read:

For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.

Testing

Quick test

These quick steps will help you verify that app works properly when users rotate their devices in any situation.

Rotate your device — compare portrait and landscape while using the app.
Check all screens — does content remain accessible in both orientations?
Check text readability — is text still readable when orientation changes?
Test critical functions — do essential features work in both orientations?
Test form inputs — can you complete forms in both orientations?
Verify navigation — do menus and buttons work in both orientations?
Test with screen reader — does VoiceOver/TalkBack work in both orientations?
Check element focus — is focus retained when switching orientations?

Using a simulator or emulator

If you can run the app in simulator or emulator, you can test every screen in both orientations: