WCAG 1.3.4: Orientation

Back to all WCAG criteria

OVERVIEW

Effort:

Complexity:Easy
Duration:Slow

Important for:

Development

To WCAG:

1.3.4 Orientation

What's it about?

A website should work in both portrait and landscape orientation.

Two illustrations of a smartphone, one in portrait orientation and one in landscape. Each shows a contact form whose layout changes depending on how the phone is held.

How to

Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.

Make the layout responsive
A website must be usable in both portrait and landscape modes. The device should be able to be rotated without content being cut off or parts of the page becoming unusable.

If the orientation is fixed, there must be an accessible way to unlock it such as through a button.
Technique(s):
- G214: Using a control to allow access to content in different orientations which is otherwise restricted

Notes

Exception: Orientation is essential for functionality
An exception exists for applications where orientation is crucial for functionality. This is the case when content can only be meaningfully interacted with in a specific orientation.

Examples:
- A piano app where the device must be in landscape mode to provide enough space for the piano keys to be played.
- A banking app where a transfer has to be scanned, which only works in landscape mode.

Create accessible designs?

Our workshop for designers!

Learn everything you need to know as a designer to create accessible design systems for digital products and entire brands.

Learn more about the workshop

Four principles of the Web Content Accessibility Guidelines: Perceivable – a red triangle holding a magnifier. Operable – a yellow circle with question marks overhead. Understandable – a green rectangle looking confused at a screen. Robust – a blue square wearing sunglasses and holding a keyboard.

Learn accessibility with us?

Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.

Send us an email!