css-orientation-lock

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

automaticWCAG 1.3.4 (AA)confianza: highgravedad: seriousperceivable

Comprueba que ninguna regla @media (orientation: portrait|landscape) establezca un transform: rotate(...) en la página, una técnica conocida para anular la orientación del dispositivo.

Á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`.

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.

Ejemplos

pass

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

Ninguna media query de orientación rota la página.

fail

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

Una media query de landscape fuerza una rotación de 90 grados, bloqueando la página en portrait con independencia de la orientación del dispositivo.

Ver código fuente