Quando uma pessoa vidente abre uma página na web, seus olhos escaneiam rapidamente os textos em destaque, títulos grandes e seções antes de decidir ler o conteúdo. Para usuários com deficiência visual ou baixa visão que utilizam leitores de tela, esse mesmo escaneamento mental é executado através da hierarquia de títulos (<h1> a <h6>). Pesquisas globais do WebAIM revelam que mais de 67% das pessoas cegas utilizam os cabeçalhos como seu método primordial de localização na página. Nesta lição, você dominará como a Árvore de Acessibilidade processa a estrutura de títulos, as regras inegociáveis para não pular níveis e como separar definitivamente semântica estrutural de estilização visual.

Como a Árvore de Acessibilidade Enxerga os Títulos

No HTML, cada elemento de cabeçalho (<h1> a <h6>) possui uma semântica nativa fortíssima. Quando o navegador constrói a Accessibility Tree, ele atribui automaticamente a cada nó:

1. Role: heading (cabeçalho).
2. Level: Um valor numérico correspondente de 1 a 6.
3. Name: O texto visível contido no título.

Com essas propriedades expostas na API do sistema operacional, os leitores de tela oferecem comandos de navegação extremamente eficientes:

• Tecla H: Salta para o próximo cabeçalho da página, independente do nível.
• Teclas numéricas de 1 a 6: Saltam exclusivamente para cabeçalhos daquele nível exato (por exemplo, pressionar a tecla 2 pula direto para a próxima grande seção <h2>).
• Lista de Elementos (Insert + F7 no NVDA): Exibe uma janela com o outline completo da página em formato de sumário indentado, permitindo ao usuário escolher a seção desejada e teclar Enter para ir até ela.

Critérios WCAG: Info and Relationships & Headings and Labels

A organização correta dos títulos atende diretamente a dois critérios de sucesso da WCAG 2.2:

• Critério 1.3.1 — Informações e Relações (Nível A): A estrutura visual de tópicos e subtópicos percebida na tela por meio de tamanhos de fonte e pesos tipográficos deve ser reproduzida programaticamente no código HTML.
• Critério 2.4.6 — Títulos e Rótulos (Nível AA): Os títulos devem descrever com clareza o propósito ou tópico da seção que introduzem. Evite títulos vagos como “Mais informações” ou “Detalhes” sem contexto.

As 4 Regras de Ouro dos Títulos Acessíveis

1. Um Único <h1> por Página

O <h1> representa o assunto central de todo o documento (o título do artigo, o nome do curso ou a proposta de valor principal da landing page). Ter múltiplos <h1> espalhados confunde o usuário e os robôs de busca sobre qual é o tema primário da página.

2. Nunca Pule Níveis Hierárquicos

A hierarquia deve descer em degraus sucessivos: de <h1> para <h2>, e de <h2> para <h3>. Nunca salte de um <h2> diretamente para um <h4>! Quando o usuário de leitor de tela ouve um “nível 4” imediatamente após um “nível 2”, ele deduz que perdeu uma seção inteira de nível 3 ou que o site está quebrado.

3. Nunca Escolha a Tag Pela Aparência Visual

Um dos maiores vícios de desenvolvedores e designers é usar <h5> ou <h6> em subtítulos de destaque apenas porque a fonte padrão do navegador é pequena. A tag HTML define a arquitetura da informação; o CSS define o design visual. Se você precisa de um <h2> semântico com tipografia delicada e compacta, utilize classes CSS para estilizá-lo.

4. Não Deixe Títulos Vazios

Evite tags de cabeçalho sem conteúdo de texto (ex: <h2></h2>) criadas para fins de espaçamento ou preenchidas apenas por imagens sem texto alternativo. Isso cria nós fantasmas que são anunciados como “cabeçalho nível 2 em branco”.

Código na Prática: Hierarquia Quebrada vs Hierarquia Padrão Ouro

Examine a comparação abaixo entre uma página com títulos estruturados de forma puramente estética e a refatoração acessível recomendada pelo W3C:

<!-- ❌ HIERARQUIA QUEBRADA (BASEADA EM APARÊNCIA VISUAL) -->
<h1>Portal de Cursos</h1>
 
<!-- Erro: pulou de H1 direto para H4 porque queria fonte menor -->
<h4>Curso de Desenvolvimento Web Full Stack</h4>
<p>Aprenda as tecnologias mais requisitadas...</p>
 
<!-- Erro: Usou H2 depois de H4, invertendo a lógica mental do sumário -->
<h2>Módulo 1: Fundamentos</h2>
 
<!-- Erro: Usou span em negrito em vez de heading para um tópico relevante -->
<span style="font-size: 20px; font-weight: bold;">Aula 01: Setup do Ambiente</span>
<!-- Consequência no Leitor de Tela: O usuário não consegue entender qual tópico 
     pertence a qual módulo e o atalho de teclado H falha no span. -->
 
 
<!-- ================================================================= -->
 
 
<!-- ✅ HIERARQUIA PADRÃO OURO: ANINHAMENTO LÓGICO COM ESTILOS VIA CSS -->
<main>
    <h1>Portal de Cursos Web-ZoneWare</h1>
 
    <!-- H2: Grande divisão temática do documento -->
    <section aria-labelledby="titulo-curso-web">
        <h2 id="titulo-curso-web" class="texto-destaque-compacto">
            Curso de Desenvolvimento Web Full Stack
        </h2>
        <p>Aprenda as tecnologias mais requisitadas...</p>
 
        <!-- H3: Subdivisão lógica pertencente ao H2 acima -->
        <section aria-labelledby="titulo-modulo-1">
            <h3 id="titulo-modulo-1">Módulo 1: Fundamentos do Front-end</h3>
 
            <!-- H4: Subtópicos específicos do Módulo 1 -->
            <article>
                <h4>Aula 01: Setup do Ambiente & Ferramental</h4>
                <p>Configuração de editor e navegadores de teste.</p>
            </article>
 
            <article>
                <h4>Aula 02: HTML Semântico & Acessibilidade</h4>
                <p>Construção da árvore de acessibilidade nativa.</p>
            </article>
        </section>
    </section>
</main>
<!-- Consequência no Leitor de Tela: O sumário do NVDA (Insert + F7)
     gera uma árvore indentada perfeita:
     └─ [1] Portal de Cursos Web-ZoneWare
        └─ [2] Curso de Desenvolvimento Web Full Stack
           └─ [3] Módulo 1: Fundamentos do Front-end
              ├─ [4] Aula 01: Setup do Ambiente & Ferramental
              └─ [4] Aula 02: HTML Semântico & Acessibilidade -->

Matriz de Referência Arquitetural de Cabeçalhos

Utilize a tabela a seguir como guia padrão para a hierarquia de qualquer página ou aplicação web: