Regra de acessibilidade: aria-hidden='true' não deve estar presente no body do documento

Sobre esta regra de acessibilidade

O atributo aria-hidden controla se um elemento e os seus filhos são expostos à árvore de acessibilidade — a estrutura de dados que as tecnologias assistivas usam para interpretar e apresentar conteúdo web. Quando definido como "true", o elemento e todos os seus descendentes ficam ocultos dos leitores de ecrã e outras ferramentas assistivas. Aplicar este atributo ao elemento <body> é catastrófico porque o <body> contém todo o conteúdo visível da página, significando que nada na página será anunciado ou navegável para utilizadores de tecnologias assistivas.

Este problema tem um impacto crítico nos utilizadores que são cegos ou têm baixa visão e dependem de leitores de ecrã. Enquanto utilizadores videntes podem ver e interagir com a página normalmente, utilizadores de leitores de ecrã experienciam uma página completamente vazia. Utilizadores de teclado ainda podem conseguir navegar para elementos focalizáveis como links e botões, mas o leitor de ecrã permanecerá silencioso — não fornecendo contexto sobre o que são esses elementos ou o que a página contém.

Esta regra relaciona-se com dois critérios de sucesso de Nível A das WCAG 2.0/2.1/2.2:

WCAG 1.3.1 (Informação e Relacionamentos): A estrutura do conteúdo e relacionamentos devem ser determinados programaticamente. Ocultar todo o body quebra este requisito porque nenhuma informação estrutural chega às tecnologias assistivas.
WCAG 4.1.2 (Nome, Papel, Valor): Todos os componentes da interface do utilizador devem ter nomes e papéis acessíveis. Quando aria-hidden="true" está no <body>, nenhum componente pode comunicar o seu nome, papel ou valor às tecnologias assistivas.

Como corrigir

A correção é simples: remova o atributo aria-hidden="true" do elemento <body>.

Se aria-hidden="true" foi adicionado ao <body> intencionalmente — por exemplo, como parte de um padrão de diálogo modal — reestruture a sua abordagem. Em vez de ocultar todo o body, oculte apenas o conteúdo de fundo atrás do modal usando aria-hidden="true" em elementos wrapper irmãos, ou use o elemento <dialog> com o atributo inert no conteúdo de fundo.

Aqui estão algumas coisas importantes a ter em mente:

Nunca aplique aria-hidden="true" ao elemento <body>. Não existe um caso de uso válido para isto.
Use aria-hidden="true" com parcimónia e apenas em conteúdo não interativo, decorativo ou redundante que não fornece valor aos utilizadores de leitores de ecrã.
Seja cauteloso com aria-hidden="false". Não expõe de forma fiável conteúdo que já está oculto via CSS (display: none, visibility: hidden) ou o atributo HTML hidden. Teste sempre minuciosamente se depender desta abordagem.

Exemplos

Incorreto: `aria-hidden="true"` no body

Isto torna toda a página inacessível às tecnologias assistivas:

<body aria-hidden="true">
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This content is invisible to screen readers.</p>
  </main>
</body>

Correto: Sem `aria-hidden` no body

Simplesmente remova o atributo do elemento <body>:

<body>
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This content is now accessible to everyone.</p>
  </main>
</body>

Correto: Ocultar conteúdo de fundo atrás de um diálogo modal

Se a sua intenção original era ocultar conteúdo de fundo enquanto um modal está aberto, oculte o wrapper de fundo — não o <body>:

<body>
  <div id="page-wrapper" aria-hidden="true">
    <header>
      <h1>Welcome to My Site</h1>
    </header>
    <main>
      <p>Main page content hidden while modal is open.</p>
    </main>
  </div>
  <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
    <button>Yes</button>
    <button>Cancel</button>
  </div>
</body>

Neste padrão, apenas o #page-wrapper fica oculto das tecnologias assistivas, enquanto o diálogo permanece totalmente acessível. Lembre-se de remover aria-hidden="true" do wrapper quando o diálogo for fechado.

Learn more: