SiteLint documentation and guidelines

Orientation

Description

This rule determines both portrait and landscape orientations. Orientation refers to the way a webpage is displayed, either vertically (portrait) or horizontally (landscape). Ensuring that your content is accessible and functional in both orientations is crucial for providing a consistent and inclusive user experience.

Disabilities impacted

  • Motor impairments: users with motor impairments may have their device fixed in a particular orientation and might find it difficult or impossible to change the orientation.
  • Visual impairments: users with visual impairments using screen magnifiers might prefer one orientation over the other for better readability and ease of use.
  • Cognitive disabilities: users with cognitive disabilities benefit from a consistent and predictable layout, regardless of orientation.

Why it matters

Restricting content to a specific orientation can limit access for users who are unable to change the orientation of their device. Ensuring that content is responsive and functional in both orientations improves usability and accessibility, making your website or application more inclusive.

Coding problems and solutions

Common coding problems

  • Fixed orientation: the website or application is locked to a specific orientation.
  • Layout issues: the content does not reflow or adjust correctly when the orientation changes.
  • Functionality issues: certain interactive elements or features do not work properly in one of the orientations.

How to fix it

Allow both orientations

Ensure that the content is accessible and usable in both portrait and landscape orientations, unless a specific orientation is essential.

Incorrect example
/* Incorrect: Forcing a specific orientation */
@media screen and (orientation: portrait) {
    body {
        display: none; /* Hides content in landscape */
    }
}
Correct example
/* Correct: No specific orientation enforced */
body {
    /* Responsive design principles applied */
}

Use responsive design techniques

Apply responsive design principles to ensure that content adjusts and reflows correctly in both orientations.

Frameworks like Bootstrap may help organize responsive layouts and add features to support them.

Correct example
.container {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

Test interactivity in both orientations

Ensure that interactive elements and features work correctly in both portrait and landscape orientations.

Browser can simulate device orientation. To simulate device orientation in Chrome, for example, you can use the built-in Developer Tools. This feature is particularly useful for testing how your web application responds to changes in device orientation, such as rotating a mobile device from portrait to landscape mode.

Known limitations

  • Essential orientation: in cases where a specific orientation is essential (e.g., for certain games or applications), provide a clear explanation to users about why the orientation is fixed.
  • Device compatibility: different devices may handle orientation changes differently. Test across multiple devices to ensure compatibility.
  • Performance considerations: ensure that reflowing content and adjusting layouts do not negatively impact performance, especially on lower-end devices.

Resources