Os níveis de cabeçalho devem aumentar apenas de um em um

Os cabeçalhos (h1 até h6) servem como um esquema estrutural da sua página. Os utilizadores que veem podem percorrer visualmente uma página e compreender a sua organização através dos tamanhos de fonte e peso visual, mas os utilizadores de leitores de ecrã dependem inteiramente de níveis de cabeçalho adequadamente marcados para alcançar a mesma compreensão. Quando os níveis de cabeçalho são saltados — por exemplo, saltando de um h2 para um h4 — isto cria confusão porque os utilizadores não conseguem perceber se perderam uma subsecção ou se a estrutura está simplesmente incorreta.

Esta regra afeta principalmente utilizadores que são cegos, surdocegos, ou têm limitações de mobilidade e dependem de tecnologia assistiva para navegar. Os leitores de ecrã fornecem atalhos de teclado que permitem aos utilizadores saltar entre cabeçalhos, criando efetivamente um índice da página. Se a hierarquia de cabeçalhos tem lacunas, os utilizadores podem perder tempo tentando encontrar conteúdo que assumem que existe no nível em falta, ou podem compreender mal a relação entre secções.

Esta é uma regra de melhores práticas da Deque. Embora se alinhe com a intenção do Critério de Sucesso 1.3.1 WCAG (Informação e Relações) e Critério de Sucesso 2.4.6 (Cabeçalhos e Etiquetas), a ordenação sequencial dos níveis de cabeçalho não é um requisito explícito das WCAG. No entanto, manter uma ordem lógica de cabeçalhos é amplamente considerado essencial para conteúdo utilizável e acessível.

Como corrigir

1. Audite a sua estrutura de cabeçalhos. Reveja todos os cabeçalhos na página e verifique se seguem uma ordem sequencial. Um h1 deve ser seguido por um h2, um h2 por um h3, e assim por diante. Pode voltar a um nível superior a qualquer momento (por exemplo, de h3 de volta para h2), mas nunca deve saltar níveis ao descer.
2. Comece o conteúdo principal com um h1. Os utilizadores de leitores de ecrã podem saltar diretamente para o primeiro h1 numa página, por isso colocá-lo no início do seu conteúdo principal permite-lhes saltar a navegação e outros preâmbulos.
3. Não use cabeçalhos para estilo visual. Se precisar que o texto pareça maior ou mais negrito, use CSS em vez de elementos de cabeçalho. A marcação de cabeçalho deve apenas ser usada para cabeçalhos reais que descrevem o conteúdo que se segue.
4. Leia apenas os cabeçalhos. Um teste rápido: leia apenas os cabeçalhos na sua página. Eles dão-lhe uma noção clara da estrutura e conteúdo da página? Se não, revise-os.

Exemplos

Incorreto: Níveis de cabeçalho saltados

Este exemplo salta de h1 para h3, saltando completamente o nível h2.

<h1>Photography Basics</h1>
<p>Learn the fundamentals of photography.</p>

<h3>Understanding ISO</h3>
<p>ISO controls the sensor's sensitivity to light.</p>

<h3>Choosing an Aperture</h3>
<p>Aperture affects depth of field and light intake.</p>

Correto: Níveis de cabeçalho sequenciais

Os cabeçalhos seguem uma ordem lógica sem saltar níveis.

<h1>Photography Basics</h1>
<p>Learn the fundamentals of photography.</p>

<h2>Understanding ISO</h2>
<p>ISO controls the sensor's sensitivity to light.</p>

<h2>Choosing an Aperture</h2>
<p>Aperture affects depth of field and light intake.</p>

Correto: Aninhamento mais profundo com hierarquia adequada

Quando o conteúdo tem subsecções, cada nível incrementa de um. Pode regressar a um nível superior ao começar uma nova secção principal.

<h1>Setting Exposure Manually on a Camera</h1>
<p>Manual exposure involves three key settings.</p>

<h2>Set the ISO</h2>
<p>Start by choosing an ISO value.</p>

  <h3>Low Light Conditions</h3>
  <p>Use a higher ISO in dim environments.</p>

  <h3>Bright Light Conditions</h3>
  <p>Use a lower ISO outdoors in sunlight.</p>

<h2>Choose an Aperture</h2>
<p>Aperture is measured in f-stops.</p>

<h2>Set a Shutter Speed</h2>
<p>Shutter speed controls motion blur.</p>

Incorreto: Usar cabeçalhos para estilo visual

Aqui, um h4 é usado não porque se adequa à hierarquia do documento, mas porque o programador queria texto mais pequeno.

<h1>Our Services</h1>
<p>We offer a range of professional services.</p>

<h4>Contact us today for a free quote!</h4>

Correto: Usar CSS em vez de marcação de cabeçalho para estilo

<h1>Our Services</h1>
<p>We offer a range of professional services.</p>

<p class="callout">Contact us today for a free quote!</p>

Learn more:

Deque Reference

Deque University - How To Fix

→

accessibility.psu.edu

PennState Accessibility - Heading Tags

→