As media queries CSS não devem bloquear a orientação do ecrã

Quando uma página web usa media queries CSS como @media (orientation: portrait) ou @media (orientation: landscape) para forçar conteúdo numa única orientação, impede a página de responder à posição real do dispositivo do utilizador. Isto é verificado pela regra axe css-orientation-lock.

Porque isto importa

Muitos utilizadores não conseguem rodar fisicamente os seus dispositivos. Pessoas com deficiências motoras podem ter o seu telefone ou tablet montado numa cadeira de rodas, cama ou secretária numa orientação fixa. Utilizadores com baixa visão podem preferir o modo paisagem para aumentar o texto, enquanto outros podem achar o retrato mais fácil de ler. Bloquear a orientação remove a sua capacidade de escolher o que funciona melhor para eles.

Além das deficiências motoras e visuais, o bloqueio da orientação também afeta utilizadores com deficiências cognitivas e dislexia que podem depender de um layout particular para legibilidade. Utilizadores que vêem e usam teclado com ecrãs externos ou suportes também podem ser impactados.

Esta regra relaciona-se com o Critério de Sucesso 1.3.4 WCAG 2.1: Orientação (Nível AA), que exige que o conteúdo não restrinja a sua visualização e operação a uma única orientação de ecrã, a menos que uma orientação específica seja essencial. Casos de uso essenciais são raros — exemplos incluem uma aplicação de teclado de piano, uma interface de depósito de cheques bancários, ou uma exibição de slides de apresentação onde a orientação é integral à funcionalidade.

Como corrigir

1. Remova CSS que bloqueia orientação. Procure por queries @media que usam a funcionalidade orientation combinada com estilos que efetivamente escondem ou reorganizam completamente conteúdo para apenas uma orientação (por exemplo, definir display: none ou width: 0 no body ou conteúdo principal).
2. Use design responsivo em vez disso. Em vez de verificar a orientação, use media queries min-width ou max-width para adaptar o seu layout ao espaço disponível. Isto naturalmente acomoda ambas as orientações.
3. Teste em ambas as orientações. Rode o seu dispositivo ou use as ferramentas de desenvolvimento do navegador para simular os modos retrato e paisagem. Verifique que todo o conteúdo permanece visível e funcional.
4. Apenas bloqueie orientação quando essencial. Se a sua aplicação genuinamente requer uma orientação específica para funcionalidade central (não apenas preferência estética), documente a justificação. Esta é a única exceção válida.

Exemplos

Incorreto: bloquear conteúdo apenas para retrato

Este CSS esconde a área de conteúdo principal quando o dispositivo está em orientação paisagem, efetivamente forçando utilizadores a usar modo retrato:

<style>
  @media (orientation: landscape) {
    .content {
      display: none;
    }
    .rotate-message {
      display: block;
    }
  }
  @media (orientation: portrait) {
    .rotate-message {
      display: none;
    }
  }
</style>

<div class="content">
  <h1>Welcome to our site</h1>
  <p>This content is only visible in portrait mode.</p>
</div>
<div class="rotate-message">
  <p>Please rotate your device to portrait mode.</p>
</div>

Incorreto: usar transform para forçar layout retrato em paisagem

<style>
  @media (orientation: landscape) {
    body {
      transform: rotate(-90deg);
      transform-origin: top left;
      width: 100vh;
      height: 100vw;
      overflow: hidden;
      position: absolute;
    }
  }
</style>

Isto roda forçosamente toda a página, lutando contra a orientação escolhida pelo utilizador e criando uma experiência confusa e inacessível.

Correto: layout responsivo que funciona em ambas as orientações

<style>
  .content {
    padding: 1rem;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 600px) {
    .grid {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

<div class="content">
  <h1>Welcome to our site</h1>
  <div class="grid">
    <div>
      <p>Column one content.</p>
    </div>
    <div>
      <p>Column two content.</p>
    </div>
  </div>
</div>

Esta abordagem usa min-width em vez de orientation, adaptando o layout com base no espaço disponível. O conteúdo permanece totalmente acessível e legível quer o dispositivo seja segurado em retrato ou paisagem.

Correto: usar queries de orientação para ajustes menores de estilo (sem bloquear)

<style>
  .hero-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  @media (orientation: landscape) {
    .hero-image {
      height: 300px;
    }
  }
</style>

<img class="hero-image" src="hero.jpg" alt="A scenic mountain landscape">

Usar media queries orientation é aceitável quando você está fazendo ajustes visuais menores sem esconder ou restringir acesso ao conteúdo. A chave é que todo o conteúdo e funcionalidade permanecem disponíveis em ambas as orientações.

Learn more:

Deque Reference

Deque University - How To Fix

→