Loading...
Loading content...
Loading content...
Content must work in both portrait and landscape orientations.
Why it matters: Some users have their devices mounted in a fixed orientation (e.g., on a wheelchair).
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.
What This Means: This success criterion requires that content must be viewable and operable in both portrait and landscape orientations. Content should not be locked to a single orientation unless the orientation is essential to the function (like a piano keyboard app that requires landscape orientation).
Why It's Important: Some users have their devices mounted in fixed positions, such as on wheelchairs, and cannot physically rotate their devices. Other users may prefer a specific orientation for comfort or accessibility reasons. Locking content to a single orientation prevents these users from accessing the content effectively.
Design responsive layouts that adapt to both portrait and landscape orientations. Use CSS media queries to adjust layouts for different orientations. Ensure all functionality, navigation, forms, and interactive elements work in both orientations. Text should remain readable and buttons accessible regardless of orientation. Only lock orientation when it's truly essential to the function, and provide a clear explanation of why.
This criterion ensures that users with motor disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that mobile users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Content is locked to portrait mode and doesn't work in landscape.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, orientation=portrait">Content adapts to both portrait and landscape orientations.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.3.4 Orientation are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If my app is designed for mobile, portrait-only is fine.
Many users have devices mounted in fixed orientations (like on wheelchairs). Content must work in both orientations unless orientation is truly essential to the function.
I can just tell users to rotate their device.
Some users physically cannot rotate their devices. Content must be accessible regardless of orientation.
Locking content to portrait or landscape orientation.
Remove orientation locks. Allow content to adapt to both orientations. Only lock orientation if it's essential to the function (like a piano keyboard app).
Content that becomes unusable or loses functionality in one orientation.
Design responsive layouts that work in both orientations. Test thoroughly in both portrait and landscape modes.
Text or buttons that become too small or inaccessible in one orientation.
Ensure text remains readable and interactive elements remain accessible in both orientations. Use responsive design techniques.
Note: These are official W3C resources for 1.3.4. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.3.4 Orientation correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.3 Adaptable