css-orientation-lock

El CSS no debe bloquear la página a una sola orientación

Comprueba que ninguna regla @media (orientation: portrait|landscape) aplique un transform: rotate(...) a la página, una técnica conocida para anular la orientación del dispositivo, y pregunta por cualquier regla de ese tipo que oculte el contenido principal de la página.

Ámbito de aplicación. Cualquier hoja de estilo accesible (del mismo documento, sin origen cruzado), bloques <style> en línea y hojas de estilo <link> del mismo origen ya cargadas en document.styleSheets, las hojas adoptadas por el documento, y las de cada shadow root abierto, cuyas reglas se comparan con los elementos de esa raíz.

Resultado esperado. Ningún bloque @media (orientation: portrait) o @media (orientation: landscape) establece una rotación transform/-webkit-transform/rotate de aproximadamente 90 grados (mod 180, es decir, ~90 o ~270), la técnica bien conocida para forzar visualmente una orientación con independencia de la orientación real del dispositivo, lo que anula el requisito de WCAG 1.3.4 de que el contenido no restrinja su vista a una sola orientación de pantalla salvo que esa orientación sea esencial. Esa rotación se juzga sobre los elementos visibles que coinciden con su selector (ACT b33eff), con la visibilidad juzgada sin la propia rotación: falla cuando uno de ellos contiene el contenido de la página (según se define más abajo para el contenido oculto), y se pregunta por cualquier otro elemento girado así (cantTell): una flecha que apunta a un panel situado a su lado en una orientación y debajo en la otra no bloquea nada. Una regla que no gira ningún elemento visible, o solo un pseudoelemento, no tiene nada que juzgar. Se pregunta por una segunda forma (cantTell): un bloque de media de orientación que oculta el contenido de la página con display: none o visibility: hidden, la forma habitual de WCAG F100 (contenido sustituido por un mensaje de "rotate your device" en una orientación). El elemento oculto cuenta como contenido de la página cuando es html o body, el landmark main, un ancestro de este o, en una página sin landmark main, un elemento que contiene al menos la mitad del texto del body. Cuando la página no tiene <main> ni role="main", un elemento personalizado cuyos ElementInternals le dan el rol main (this.attachInternals().role) es el landmark main. Si la orientación es esencial, y si la página sigue siendo utilizable, lo decide una persona.

Ejemplos

<html>
  <head>
    <title>Page title</title>
    <style>body { background: #fff; }</style>
  </head>
  <body>Hi</body>
</html>

<html>
  <head>
    <title>Page title</title>
    <style>
      @media (orientation: landscape) {
        body { transform: rotate(90deg); }
      }
    </style>
  </head>
  <body>Hi</body>
</html>

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

Ver código fuente