Disabilities Affected: Mobility, Visual
Content must not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential (e.g., a check deposit app, a piano application).
Why It Matters
Users may have their devices mounted in a fixed orientation (e.g., on a wheelchair) or may prefer/need to use a specific orientation due to low vision (requiring landscape for magnification) or other reasons. Forcing content into one orientation can make it unusable for these individuals.
Fixing the Issue
Use responsive design techniques that allow the layout to adapt to both portrait and landscape orientations. Avoid explicitly locking the orientation using technical means unless absolutely essential for the core function of the application. Test the layout and functionality in both orientations on various devices.
Good Code Example
CSS using responsive techniques (e.g., media queries) to adapt layout:
-
/* Basic responsive layout using Flexbox */
.container {
display: flex;
flex-wrap: wrap; /* Allow items to wrap */
}
.main-content {
flex: 2 1 600px; /* Takes more space, basis 600px */
order: 1; /* Default order */
}
.sidebar {
flex: 1 1 200px; /* Takes less space, basis 200px */
order: 2; /* Default order */
}
/* Example: Change layout in portrait orientation on smaller screens */
@media (orientation: portrait) and (max-width: 800px) {
.container {
flex-direction: column; /* Stack elements vertically */
}
.main-content, .sidebar {
flex-basis: auto; /* Reset basis */
width: 100%; /* Take full width */
order: 0; /* Reset order if needed */
}
}
/* Avoid using platform-specific orientation locking features in manifests */
/* unless the orientation is truly essential for the app's function. */
Bad Code Example
Attempting to force a specific orientation (often done via platform settings, not easily shown in simple HTML/CSS):
-
/* Conceptual Example (e.g., in a mobile app manifest or using screen orientation API inappropriately) */
// JavaScript attempting to lock orientation (avoid this unless essential)
// screen.orientation.lock('portrait-primary').catch(function(error) {
// console.log("Orientation lock failed:", error);
// });
// Or CSS that only works well in one orientation:
.landscape-only-layout {
display: flex;
width: 900px; /* Fixed wide layout */
/* This layout might require horizontal scrolling or be unusable in portrait mode */
}
