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, o que significa que nada na página será anunciado ou navegável para utilizadores de tecnologias assistivas.

Este problema tem um impacto crítico em utilizadores cegos ou com baixa visão que 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 podem ainda conseguir navegar para elementos focáveis como links e botões, mas o leitor de ecrã permanecerá silencioso — não fornecendo contexto sobre o que esses elementos são ou o que a página contém.

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

WCAG 1.3.1 (Informação e Relações): A estrutura do conteúdo e as relações devem ser determináveis 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 de interface de 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 há caso de uso válido para isto.
Use aria-hidden="true" com moderação e apenas em conteúdo não-interativo, decorativo ou redundante que não fornece valor aos utilizadores de leitores de ecrã.
Tenha cuidado com aria-hidden="false". Não re-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 para 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: Ocultando 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 está 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: