2 problemas documentados

Estrutura de Cabeçalhos

Hierarquia correta de h1–h6, um único h1 por página, saltos de níveis e uso para estrutura vs. estilo.

Imagens Formulários Contraste Estrutura Links Acessibilidade Tabelas Multimídia:

WCAG A

Hierarquia de cabeçalhos inconsistente ou com saltos

Cabeçalhos devem formar uma hierarquia lógica (h1 > h2 > h3...) sem pular níveis. Usuários de leitores de tela navegam pela página usando cabeçalhos como pontos de referência.

Impacto por tipo de deficiência

Cegueira

Usuários de NVDA/JAWS navegam pressionando H para pular de cabeçalho em cabeçalho — hierarquia incorreta desorumenta a navegação.

Cognitiva

A estrutura de cabeçalhos é o "índice" da página — saltos ou inversões tornam a estrutura mental impossível de construir.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Cabeçalhos usados para estilo, não estrutura -->
<h1>Portal de Serviços</h1>
<h3>Bem-vindo</h3>  <!-- Pulou h2 -->
<h2>Serviços Populares</h2>
<h5>Certidão de Nascimento</h5>  <!-- Pulou h3 e h4 -->

<!-- ❌ Múltiplos h1 na mesma página -->
<h1>Portal Gov</h1>
...
<h1>Notícias</h1>

Correto — acessível para todos os usuários

<!-- ✓ Hierarquia linear e consistente -->
<h1>Portal de Serviços</h1>
  <h2>Bem-vindo</h2>
  <h2>Serviços Populares</h2>
    <h3>Documentos</h3>
      <h4>Certidão de Nascimento</h4>
      <h4>RG Digital</h4>
    <h3>Benefícios</h3>
  <h2>Notícias</h2>

<!-- ✓ Ajuste visual via CSS, não via nível de cabeçalho -->
<h3 class="texto-grande">Texto visualmente grande</h3>

Técnicas ARIA relevantes

aria-labelledbyrole="heading" aria-level="2"

WCAG A

Página sem h1 ou com h1 não descritivo

WCAG 2.4.2WCAG 2.4.6WCAG 1.3.1eMAG 3.4 eMAG 3.1

Cada página deve ter exatamente um h1 que descreva o conteúdo principal da página. O h1 é o equivalente ao título de um documento.

Impacto por tipo de deficiência

Cegueira

A primeira ação ao chegar numa página é procurar o h1 para entender onde está — sem h1 descritivo, perde-se o contexto imediatamente.

SEO

H1 ausente ou genérico prejudica o ranqueamento em mecanismos de busca.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ H1 genérico que não descreve a página -->
<h1>Início</h1>
<h1>Bem-vindo</h1>
<h1>Home</h1>

<!-- ❌ Página sem nenhum cabeçalho -->
<div class="titulo">Serviços de Saúde</div>

Correto — acessível para todos os usuários

<!-- ✓ H1 único e descritivo -->
<h1>Portal de Serviços de Saúde — Governo do Estado</h1>

<!-- ✓ Em SPA/Next.js: h1 dinâmico por página -->
<h1>{pageTitle}</h1>
<!-- Com title da aba correspondente -->
<title>{pageTitle} | Portal Gov</title>

🎨 Contraste e Uso de Cor

Próxima categoria

🔗 Links e Navegação

Ver todas as categorias do Guia