This rule raises an issue when CSS uses transform properties to restrict content to a specific orientation (portrait or landscape only).

Why is this an issue?

Restricting page orientation using CSS transforms creates accessibility barriers for users who cannot rotate their devices or prefer a specific orientation.

Some users have their devices mounted in a fixed position, use assistive technologies that work better in certain orientations, or have physical limitations that make device rotation difficult or impossible. When CSS forces content into a single orientation, these users may be unable to access or properly view the content.

The Web Content Accessibility Guidelines (WCAG) 2.2 require that content should be viewable in both portrait and landscape orientations unless a specific orientation is essential for the content to function properly. Using CSS transforms to lock orientation violates this principle and can make websites unusable for people with disabilities.

Additionally, orientation restrictions can negatively impact the user experience for all users, as they may prefer to use their device in a particular orientation based on comfort, context, or personal preference.

What is the potential impact?

Users with disabilities or device constraints may be completely unable to access content, violating accessibility standards and potentially excluding a significant portion of your audience. This can also lead to legal compliance issues under accessibility regulations.

How to fix it

Remove CSS transforms that force specific orientations. Instead, use responsive design techniques that adapt content to different screen sizes and orientations naturally.

Code examples

Noncompliant code example

/* Forces landscape orientation */
@media screen and (orientation: portrait) {
  body {
    transform: rotate(90deg); /* Noncompliant */
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
  }
}

Compliant solution

/* Responsive design that works in both orientations */
@media screen and (orientation: portrait) {
  .content {
    flex-direction: column;
    padding: 1rem;
  }
}

@media screen and (orientation: landscape) {
  .content {
    flex-direction: row;
    padding: 2rem;
  }
}

Resources

Documentation

Standards