accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Orientation

On this page:

Summary
Requirements
Guidance for Design
Guidance for iOS
Guidance for Android
Guidance for Flutter
Guidance for Web
More info

Summary

Make sure a page’s view is not locked to either portrait or landscape mode, unless this is essential.

A page view must not be locked to either horizontal (landscape) or vertical (portrait) views only, unless this is essential.

Here are some examples of when locking the orientation to one direction may considered ‘essential’:

in a messaging app
when making music using a piano app
when viewing slides for a projector show
for television or virtual reality content.

Requirements

Each page/screen should be viewable both in horizontal (landscape) and vertical (portrait) orientation.

Common mistakes

Locking the orientation of the device so it is set in one way only, and does not adapt.

Why?

Users with low-vision should be able to view content in the orientation that works best for them, due to the need for increased text size;
Some users with mobility impairments mount their device to a wheelchair, and need to see content in their preferred orientation.

Official wording in the Web Content Accessibility Guidelines

Success Criterion 1.3.4 Orientation: Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. (Level AA)

Examples where a particular display orientation may be essential are a bank check, a piano application, slides for a projector or television, or virtual reality content where content is not necessarily restricted to landscape or portrait display orientation.

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for Design

Do not design in such a way that assumes a particular orientation.
Use show/hide buttons to allow access to content in different orientations.

Guidance for iOS

There are several ways to control orientation in iOS apps. The simplest is to override supportedInterfaceOrientations in view controllers:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
	switch UIDevice.current.userInterfaceIdiom {
		case .phone: return .allButUpsideDown
		default: return .all
	}
}

NOTE: iPad by default allows .all orientations, iPhone allows .allButUpsideDown since the iPhone X does not support upside down due to the notch.

You can also use the UIApplicationDelegate supportedInterfaceOrientationsFor callback:

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
	switch UIDevice.current.userInterfaceIdiom {
		case .phone: return .allButUpsideDown
		default: return .all
	}
}

Finally, you can also use the value set in the app’s Info.plist by setting the UISupportedInterfaceOrientations array:

<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationPortraitUpsideDown</string>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
</array>

More guidance for iOS

Guidance for Android

By default Android supports both portait and landscape mode.

There is a way to lock it in either mode : (Do that only if it’s necessary)

<activity android:name=".yourActivity" android:screenOrientation="portrait" ... />

The orientation can be handled by the developer as well.

<activity android:name=".yourActivity"
          android:configChanges="orientation|keyboardHidden"
          android:label="@string/app_name">

So the orientation can be handled in code:

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)

    // Checks the orientation of the screen
    if (newConfig.orientation === Configuration.ORIENTATION_LANDSCAPE) {
        Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show()
    } else if (newConfig.orientation === Configuration.ORIENTATION_PORTRAIT) {
        Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show()
    }
}

But that comes with risks because most of the resources won’t be handled. (Layouts in different orientations, etc…)

More guidance for Android

Runtime changes developer reference

Guidance for Flutter

By default Fultter supports both portrait and landscape mode.

The orientation of screens can be set/changed at any point in the app.

Setting the orientation at the beginning of the app:

Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); 
runApp(MyApp());
}

Setting the orientation during the initialization of a widget and setting it back after disposing:

@override
void initState() {
  SystemChrome.setPreferredOrientations([
     DeviceOrientation.landscapeLeft,
     DeviceOrientation.landscapeRight,
  ]);
  super.initState();
}

@override
void dispose() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
   ]);
  super.dispose();
}

Guidance for Web

This section needs more content. Contribute via Github or email.

More guidance for Web

Managing Screen Orientation on MDN
Using Media Queries on MDN
Media Queries for Standard Devices on CSS Tricks
Orientation Lock on CSS Tricks
Responsive Design for Landscape Orientation on CSS Tricks
The Orientation Descriptor by the W3C
The Screen Orientation API by the W3C