Success Criterion 1.3.4 Orientation requires that 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. This ensures that users can access content in their preferred orientation, enhancing usability and accessibility.
To ensure that content is accessible and operational in both portrait and landscape orientations, unless a specific orientation is essential.
Avoid restricting orientation: Avoid restricting your application or website to only landscape or portrait mode.
Honor device orientation settings: Honor device settings for displaying content in the user's preferred orientation.
Offer control button for orientation adjustment: Offer a control button to enable users to adjust the orientation of a locked page.
Examples of essential orientation cases: Examples for essential cases include a bank cheque, which must be presented vertically, and a piano application, which must be vertical to resemble a real piano.
Example: Instructions for a web page provide navigation guidance based solely on color and shape.
<body style="transform: rotate(90deg);">
<h1>Recipe</h1>
<p>Ingredients and instructions...</p>
</body>
Explanation:The app forces a specific orientation, making it difficult for users who need to lock their device in a particular orientation due to motor impairments or personal preference.
<style>
body {
transform: unset;
}
</style>
<body>
<h1>Recipe</h1>
<p>Ingredients and instructions...</p>
</body>
Explanation:The app automatically adjusts its layout based on the device's orientation and an “unset” value is assigned to the body, ensuring users can read and interact with the recipe comfortably in either portrait or landscape mode. This allows users to choose the orientation that best suits their needs while cooking.