Cabeçalhos não devem estar vazios

Os utilizadores de leitores de ecrã frequentemente navegam nas páginas web saltando entre cabeçalhos para obter uma visão geral do conteúdo, muito semelhante à forma como os utilizadores com visão examinam visualmente uma página. Quando um elemento de cabeçalho está vazio ou o seu conteúdo está oculto das tecnologias de apoio, o leitor de ecrã anuncia algo como “cabeçalho nível 2” sem nada a seguir. Isto é desorientador e pode fazer os utilizadores pensarem que falta conteúdo ou que a página está quebrada.

Esta regra é sinalizada como uma melhor prática da Deque e afeta principalmente utilizadores cegos ou surdo-cegos que dependem de leitores de ecrã, embora também impacte utilizadores com deficiências motoras que usam navegação baseada em cabeçalhos. Cabeçalhos bem estruturados e significativos são fundamentais para uma página acessível — eles comunicam o esquema do documento e ajudam todos os utilizadores a encontrar rapidamente a informação de que precisam.

Um cabeçalho pode estar efetivamente “vazio” de várias formas:

• O elemento não contém texto algum (<h2></h2>)
• O elemento contém apenas espaços em branco ou elementos não-texto sem nome acessível
• O texto está oculto das tecnologias de apoio usando aria-hidden="true" ou CSS como display: none

Como corrigir

1. Adicione texto significativo a cada elemento de cabeçalho. Os cabeçalhos devem ser breves, claros e descritivos da secção que introduzem.
2. Remova tags de cabeçalho de elementos que não são realmente cabeçalhos. Não use <h1> a <h6> apenas para estilo visual — use CSS em vez disso.
3. Não oculte texto de cabeçalho dos leitores de ecrã usando aria-hidden="true" ou display: none. Se um cabeçalho não deve ser visível no ecrã mas é necessário para acessibilidade, use uma técnica CSS visualmente oculta em vez disso.
4. Mantenha uma hierarquia lógica de cabeçalhos. Os cabeçalhos devem ser ordenados por nível (<h1>, depois <h2>, depois <h3>, etc.) para transmitir com precisão a estrutura da página.

Como verificação rápida, leia apenas os cabeçalhos da sua página. Se eles não lhe derem uma noção clara do conteúdo e estrutura da página, reescreva-os.

Exemplos

Cabeçalho vazio (incorreto)

<h2></h2>
<p>Esta secção não tem texto de cabeçalho.</p>

O <h2> é anunciado por um leitor de ecrã, mas não há conteúdo para ler.

Cabeçalho apenas com espaços em branco (incorreto)

<h3>   </h3>

Espaços em branco sozinhos não fornecem um nome acessível, então isto é tratado como vazio.

Cabeçalho oculto das tecnologias de apoio (incorreto)

<h2 aria-hidden="true">Sobre a Nossa Equipa</h2>

O atributo aria-hidden="true" oculta o cabeçalho completamente dos leitores de ecrã, mesmo que utilizadores com visão possam vê-lo. Isto cria uma lacuna na estrutura da página para utilizadores de tecnologias de apoio.

Cabeçalho oculto com CSS (incorreto)

<h2 style="display: none;">Contacte-nos</h2>

Usar display: none remove o cabeçalho tanto do layout visual quanto da árvore de acessibilidade, tornando-o inacessível para todos.

Cabeçalho com texto visível (correto)

<h2>Sobre a Nossa Equipa</h2>
<p>Somos uma pequena empresa dedicada ao design acessível.</p>

O cabeçalho descreve claramente a secção que se segue.

Cabeçalho visualmente oculto apenas para leitores de ecrã (correto)

Quando um cabeçalho é necessário para a estrutura do documento mas não deve aparecer visualmente, use uma classe visualmente oculta em vez de display: none ou aria-hidden:

<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>

<h2 class="visually-hidden">Navegação Principal</h2>
<nav>
  <a href="/home">Início</a>
  <a href="/about">Sobre</a>
</nav>

Isto mantém o cabeçalho acessível aos leitores de ecrã enquanto o oculta visualmente.

Cabeçalho com uma imagem que tem texto alternativo (correto)

<h1>
  <img src="logo.png" alt="Acme Corporation">
</h1>

O nome acessível do cabeçalho vem do atributo alt da imagem, então o cabeçalho não é considerado vazio.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Providing descriptive headings

→

W3C Reference

WCAG 2.1 - Using role=heading to identify headings

→