Regra de acessibilidade: Conteúdo oculto na página deve ser analisado

Sobre esta regra de acessibilidade

Esta regra é uma verificação informativa em vez de um teste de aprovação/reprovação. Identifica elementos cujo conteúdo está oculto tanto para utilizadores visuais como para tecnologias de apoio, o que significa que ferramentas automatizadas como o axe não conseguem inspecionar esse conteúdo para encontrar problemas. O objetivo é garantir que não se esquece de conteúdo potencialmente inacessível simplesmente porque não está atualmente visível.

Porque é que isto é importante

Quando o conteúdo é oculto usando propriedades CSS como display: none ou visibility: hidden, é removido completamente da árvore de acessibilidade. Isto significa que os leitores de ecrã não conseguem aceder ao mesmo, e as ferramentas de teste automatizado não o conseguem avaliar. Se esse conteúdo oculto for mais tarde revelado — através de interação do utilizador, alternância por JavaScript, ou media queries — deve ser totalmente acessível quando se torna visível.

Vários grupos de utilizadores podem ser afetados por conteúdo oculto inacessível:

Utilizadores de leitores de ecrã podem encontrar conteúdo que carece de rótulos apropriados, cabeçalhos, ou estrutura semântica quando é revelado.
Utilizadores que apenas usam o teclado podem descobrir que o conteúdo revelado contém armadilhas de foco ou elementos que não são operáveis pelo teclado.
Utilizadores com baixa visão ou daltonismo podem encontrar problemas de contraste ou estilo em conteúdo que nunca foi testado porque estava oculto durante a análise.

Se existe uma razão convincente para ocultar conteúdo aos utilizadores visuais, normalmente existe uma razão igualmente convincente para o ocultar também aos utilizadores de leitores de ecrã. Inversamente, quando o conteúdo está disponível para utilizadores visuais, também deve estar disponível para utilizadores de tecnologias de apoio.

Esta regra alinha-se com as melhores práticas da Deque para testes de acessibilidade minuciosos. Embora não corresponda a um critério de sucesso específico das WCAG, falhar em rever conteúdo oculto pode mascarar violações de critérios como 1.1.1 Conteúdo não textual, 1.3.1 Informações e relações, 2.1.1 Teclado, 4.1.2 Nome, função, valor, e muitos outros.

Como corrigir

Quando o axe sinaliza conteúdo oculto, precisa de:

Identificar os elementos ocultos reportados pela regra.
Ativar a sua exibição — interagir com a página para tornar o conteúdo visível (por exemplo, abrir um modal, expandir um acordeão, passar o cursor sobre uma dica).
Executar novamente verificações de acessibilidade no conteúdo agora visível.
Corrigir quaisquer problemas encontrados nesse conteúdo, tal como faria para qualquer elemento visível.
Verificar se a técnica de ocultação é apropriada — certificar-se de que o conteúdo oculto com display: none ou visibility: hidden está realmente destinado a ser oculto de todos os utilizadores, incluindo utilizadores de tecnologias de apoio.

Se pretende que o conteúdo seja visualmente oculto mas ainda acessível aos leitores de ecrã, use uma técnica CSS visualmente oculta em vez de display: none ou visibility: hidden.

Exemplos

Conteúdo oculto que não pode ser analisado

Este conteúdo está completamente oculto de todos os utilizadores e ferramentas automatizadas:

<div style="display: none;">
  <img src="chart.png">
  <p>A receita trimestral aumentou 15%.</p>
</div>

O elemento img dentro pode estar a carecer de um atributo alt, mas o axe não consegue detetar isto porque todo o div está oculto. Deve revelar este conteúdo e testá-lo separadamente.

Conteúdo oculto revelado para teste e corrigido

Uma vez que o conteúdo é tornado visível, pode identificar e corrigir problemas:

<div style="display: block;">
  <img src="chart.png" alt="Gráfico de barras mostrando que a receita trimestral aumentou 15%">
  <p>A receita trimestral aumentou 15%.</p>
</div>

Usando `visibility: hidden`

<nav style="visibility: hidden;">
  <a href="/home">Início</a>
  <a href="/about">Sobre</a>
</nav>

Esta navegação está oculta de todos. Se se tornar visível através de uma interação JavaScript, certifique-se de que é testada nesse estado visível.

Visualmente oculto mas acessível aos leitores de ecrã

Se quer conteúdo oculto visualmente mas ainda disponível para tecnologias de apoio, não use display: none ou visibility: hidden. Use uma classe visualmente oculta em vez disso:

<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<button>
<!-- ícone -->
</svg>
  <span class="visually-hidden">Fechar menu</span>
</button>

Esta abordagem mantém o texto acessível aos leitores de ecrã enquanto o oculta visualmente. O Axe ainda consegue analisar este conteúdo porque permanece na árvore de acessibilidade.

Conteúdo interativo que alterna visibilidade

Quando o conteúdo é alternado dinamicamente, certifique-se de que ambos os estados são testados:

<button aria-expanded="false" aria-controls="panel1">Mostrar detalhes</button>
<div id="panel1" style="display: none;">
  <p>Detalhes adicionais do produto vão aqui.</p>
</div>

<script>
  const button = document.querySelector('button');
  const panel = document.getElementById('panel1');
  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!expanded));
    panel.style.display = expanded ? 'none' : 'block';
  });
</script>

Para testar isto completamente, clique no botão para revelar o conteúdo do painel, depois execute novamente a sua análise de acessibilidade para verificar o conteúdo revelado para quaisquer violações.

Learn more: