WCAG 2.4.10: Títulos de Seção

O que Esta Regra Significa

WCAG 2.4.10 — Títulos de Seção (Nível AAA) afirma: "Títulos de seção são usados para organizar o conteúdo." Isso significa que, quando uma página da web ou documento é dividido em várias seções distintas, cada seção deve ter um título programaticamente determinável que descreva seu tópico ou propósito. A intenção não é apenas ter texto visualmente estilizado que pareça um título, mas usar marcação de título real que transmita estrutura hierárquica tanto para navegadores quanto para tecnologias assistivas.

Em HTML, isso significa usar adequadamente os elementos nativos de título <h1> a <h6>. Uma página com um tópico principal deve ter um <h1>, seções principais devem usar <h2>, subseções dentro dessas usam <h3> e assim por diante. O nível do título deve refletir a profundidade lógica do conteúdo, não ser escolhido arbitrariamente por motivos de estilo visual. Quando ARIA é usado, o role="heading" combinado com aria-level também é aceitável, embora os elementos nativos de HTML sejam sempre preferidos.

Uma aprovação neste critério significa que cada seção de conteúdo distinta na página tem um título que descreve com precisão o que se segue, que o título está marcado semanticamente (não apenas visualmente estilizado como texto em negrito ou grande) e que a hierarquia de títulos reflete logicamente a organização do conteúdo do documento. Uma falha ocorre quando seções de conteúdo não têm título algum, quando níveis de títulos são pulados arbitrariamente (saltando de <h1> para <h4> sem motivo lógico) ou quando texto simplesmente estilizado é usado em vez de elementos de título adequados para rotular uma seção.

É importante observar a exceção oficial das WCAG: este critério se aplica apenas quando a própria página contém seções. Páginas muito curtas com um único tópico unificado — como um formulário de login simples sem seções distintas — não são obrigadas a ter vários títulos. A exigência é acionada pela presença de várias áreas de conteúdo distintas que se beneficiam de rotulagem. Além disso, este critério não exige uma estrutura específica de hierarquia de títulos além da organização lógica; o requisito principal é que títulos existam e sejam usados de forma significativa sempre que existirem seções.

Este critério é classificado como Nível AAA, o que significa que não é exigido para conformidade básica com as WCAG 2.2, mas representa uma prática de acessibilidade de melhor nível que melhora significativamente a experiência para uma ampla gama de usuários.

Por Que Isso Importa

Usuários de leitores de tela dependem de títulos como seu principal meio de navegação em documentos longos e páginas da web. De acordo com a pesquisa de usuários de leitores de tela da WebAIM, a grande maioria dos usuários de leitores de tela navega regularmente por títulos — isso é consistentemente classificado como um dos métodos de navegação mais usados. Quando os títulos estão ausentes ou mal estruturados, um usuário de leitor de tela precisa ouvir cada parte do conteúdo sequencialmente desde o topo da página, o que equivale a forçar um usuário vidente a ler um livro inteiro sem índice ou títulos de capítulos.

Considere um exemplo do mundo real: um site de comércio eletrônico turco que vende eletrônicos pode ter uma página de detalhes de produto com seções cobrindo especificações do produto, avaliações de clientes, informações de envio e política de devoluções. Se nenhuma dessas seções tiver um elemento de título, um usuário cego navegando com NVDA no Firefox não pode pular entre elas. Ele deve ouvir todo o conteúdo ou usar estratégias de busca por tentativa e erro, aumentando significativamente a carga cognitiva e o tempo necessário para a tarefa. Com títulos <h2> adequados para cada seção, o mesmo usuário pode pressionar a tecla H para pular instantaneamente de seção em seção em segundos.

Usuários com deficiências cognitivas também se beneficiam substancialmente. Títulos claros funcionam como placas de sinalização, permitindo que pessoas com transtornos de atenção, dificuldades de leitura ou comprometimentos de memória se reorientem rapidamente após perder o foco. A Organização Mundial da Saúde estima que aproximadamente 1,3 bilhão de pessoas vivem com algum tipo de deficiência globalmente, e condições cognitivas e neurológicas representam uma parcela grande e crescente dessa população.

Usuários com deficiência motora que dependem de navegação apenas por teclado ou dispositivos de acesso por varredura também se beneficiam porque a estrutura de títulos é usada por muitas tecnologias assistivas para criar oportunidades de pular navegação, reduzindo o esforço físico necessário para alcançar a área de conteúdo desejada.

Além do acesso para pessoas com deficiência, a estrutura adequada de títulos tem benefícios significativos de SEO. Mecanismos de busca usam a hierarquia de títulos para entender a estrutura temática de uma página, o que pode influenciar a classificação e como o conteúdo é exibido nos resultados de busca. Um esboço de títulos bem estruturado sinaliza qualidade de conteúdo tanto para usuários quanto para rastreadores. Isso torna o argumento de negócio para implementar este critério AAA convincente mesmo para organizações que não são legalmente obrigadas a cumpri-lo.

Regras Relacionadas do Axe-core

WCAG 2.4.10 exige testes manuais e não pode ser totalmente automatizado. Eis por que ferramentas automatizadas são insuficientes e o que elas podem ou não detectar:

• Teste Manual Necessário — Completude Estrutural: Ferramentas automatizadas como axe-core podem detectar a presença ou ausência de elementos de título em uma página e podem sinalizar problemas como níveis de títulos pulados (por exemplo, saltar de <h1> para <h3>). No entanto, elas não podem determinar se o conteúdo de uma página foi logicamente dividido em seções ou se um título descreve com precisão a seção que introduz. Uma ferramenta pode ver uma hierarquia de títulos correta e aprovar a verificação, enquanto a página na verdade tem quatro seções de conteúdo distintas, três das quais não têm título algum. A adequação semântica da colocação de títulos exige um revisor humano que entenda o propósito e a estrutura do conteúdo.
• Regra do axe-core — heading-order: Esta regra sinaliza casos em que níveis de títulos são pulados de forma que quebra o esboço lógico do documento (por exemplo, ir diretamente de <h1> para <h4>). Embora isso seja um sinal de qualidade relacionado, passar nessa regra não garante conformidade com 2.4.10, porque a regra apenas verifica a ordem relativa dos títulos que existem — ela não pode determinar se um título está faltando em uma seção que precisa de um.
• Regra do axe-core — page-has-heading-one: Esta regra verifica se a página contém pelo menos um elemento <h1>, o que é um requisito estrutural básico. Novamente, passar nessa verificação é um sinal positivo, mas não confirma conformidade total com 2.4.10, já que uma página pode ter um <h1> e ainda ter várias seções não rotuladas abaixo dele.
• Por que a automação total é impossível: Determinar se uma região de conteúdo constitui uma "seção" que merece um título exige entender a semântica e o propósito do conteúdo — uma tarefa que atualmente requer julgamento humano. Um algoritmo não pode distinguir de forma confiável entre um parágrafo coerente que naturalmente continua o que o precede e uma área de tópico realmente nova que merece seu próprio título rotulado. É por isso que 2.4.10 é sempre listado como exigindo avaliação manual em qualquer auditoria abrangente.

Como Testar

1. Varredura automatizada com axe DevTools ou Lighthouse: Instale a extensão de navegador axe DevTools (disponível para Chrome e Firefox) e execute uma varredura de página inteira. Revise quaisquer problemas relacionados a heading-order e page-has-heading-one. Observe que uma varredura automatizada limpa não confirma conformidade com WCAG 2.4.10 — ela apenas limpa o subconjunto automatizável de verificações. O Lighthouse nas Chrome DevTools também exibe problemas relacionados a títulos em sua auditoria de Acessibilidade; procure avisos como "Heading elements are not in a sequentially-descending order".
2. Revisão manual de conteúdo — esboço do documento: Use uma extensão de navegador como HeadingsMap (disponível para Chrome e Firefox) para gerar um esboço visual de todos os elementos de título na página. Revise esse esboço de forma crítica: ele reflete com precisão a estrutura de conteúdo da página? Cada seção distinta está representada por um título? Existem seções de conteúdo visíveis na página que não aparecem no esboço? Se sim, essas seções estão sem títulos e a página falha em 2.4.10.
3. Navegação com leitor de tela usando NVDA e Firefox: Abra a página no Firefox com o NVDA em execução. Pressione H para avançar pelos títulos e Shift+H para voltar. À medida que você chega a cada título, observe se o título anunciado descreve com precisão o conteúdo que se segue. Observe também se você encontra blocos substanciais de conteúdo que nunca são anunciados como estando sob um título. Abra a Lista de Elementos do NVDA (NVDA+F7), selecione a aba Headings e revise a lista completa de títulos para identificar seções ausentes ou rotuladas incorretamente.
4. Navegação com leitor de tela usando VoiceOver e Safari (macOS/iOS): No macOS, ative o VoiceOver (Command+F5) e abra a página no Safari. Use VO+Command+H para navegar pelos títulos. No iOS, use o rotor (deslize com dois dedos para configurá-lo em Headings) e depois deslize para baixo para percorrer os títulos. Verifique se todas as seções de conteúdo são alcançáveis por meio da navegação por títulos.
5. Navegação com leitor de tela usando JAWS e Chrome: No JAWS, pressione H para percorrer os títulos e abra a Lista de Títulos com Insert+F6. Revise a lista quanto à completude e hierarquia lógica. Confirme que os títulos não são usados apenas para estilo — apenas rótulos de seção genuínos devem aparecer como títulos.
6. Verificação de navegação apenas por teclado: Usando apenas o teclado, tente navegar por todas as seções principais da página sem usar títulos. Observe quantas vezes você precisa pressionar Tab para percorrer elementos interativos até alcançar cada seção. Isso dá uma noção da carga imposta aos usuários de teclado quando a estrutura adequada de títulos está ausente.

Como Corrigir

Seções rotuladas apenas com texto estilizado — Incorreto

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Seções rotuladas apenas com texto estilizado — Correto

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Níveis de título pulados por motivos de estilo — Incorreto

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Níveis de título pulados por motivos de estilo — Correto

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

Sem título para uma seção principal da página — Incorreto

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

Sem título para uma seção principal da página — Correto

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

Função de título ARIA usada sem aria-level — Incorreto

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Função de título ARIA usada sem aria-level — Correto

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Erros Comuns

• Usar classes CSS como .title ou .section-header em elementos <p> ou <div> em vez de elementos reais <h1>–<h6>: Estilo visual por si só não comunica estrutura para tecnologias assistivas. O título deve ser um elemento de título genuíno ou ter uma função ARIA de título válida com um nível explícito.
• Escolher níveis de título com base no tamanho da fonte em vez da hierarquia do documento: Selecionar <h4> porque ele é exibido no tamanho visual desejado, quando logicamente deveria ser um <h2>, quebra o esboço do documento e confunde usuários de leitores de tela que ouvem "heading level 4" sem qualquer nível 2 ou 3 precedente.
• Aplicar substituições de font-size ou font-weight para reduzir visualmente o tamanho de <h1> em vez de usar um elemento de título de nível inferior: Isso cria uma discrepância entre a hierarquia visual e a hierarquia semântica; use CSS para controlar o tamanho e níveis nativos de título para transmitir a estrutura.
• Omitir títulos em seções de conteúdo carregadas dinamicamente (por exemplo, painéis de abas, caixas de diálogo modais ou resultados carregados via AJAX): Quando novo conteúdo é injetado na página, ele frequentemente carece de estrutura de títulos. Cada seção renderizada dinamicamente deve incluir um título apropriado para que usuários que navegam por títulos não fiquem presos em uma ilha de conteúdo sem rótulo.
• Usar apenas um <h1> para o título da página e nenhum outro título em uma página com cinco ou mais seções de conteúdo distintas: A existência de um <h1> satisfaz verificações automatizadas, mas não cumpre 2.4.10 se as seções principais subsequentes estiverem sem rótulo.
• Aninhar títulos dentro de elementos <button> ou <a>: Colocar um título dentro de um elemento interativo cria funções conflitantes para tecnologias assistivas e é HTML inválido. Títulos devem rotular seções de conteúdo, não controles interativos.
• Usar role='heading' sem especificar aria-level: O nível implícito padrão do ARIA é 2, o que pode não corresponder à estrutura pretendida do documento e produzir silenciosamente um esboço incorreto se a seção estiver em outro nível.
• Adicionar títulos decorativos ou repetidos — por exemplo, repetir o título da página como um <h2> dentro de cada cartão de conteúdo — que criam ruído de títulos sem valor significativo de navegação: Títulos devem descrever de forma única e precisa a seção que introduzem; títulos redundantes reduzem a utilidade da navegação por títulos para usuários de leitores de tela.
• Ocultar títulos visualmente com display:none ou visibility:hidden na tentativa de fornecer estrutura apenas para leitores de tela: Essas propriedades CSS também ocultam o elemento das tecnologias assistivas. Use a técnica padrão de visualmente oculto (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) se um título precisar estar presente na árvore de acessibilidade, mas não visível na tela.
• Deixar de atualizar a estrutura de títulos quando o conteúdo da página é reorganizado durante um redesign: Títulos adicionados durante o desenvolvimento inicial frequentemente permanecem desatualizados quando seções de conteúdo são reordenadas, mescladas ou substituídas. Auditorias de títulos devem fazer parte de qualquer ciclo de revisão de conteúdo ou design, não ser apenas uma correção pontual de acessibilidade.

Relação com os Regulamentos de Acessibilidade da Turquia

A Circular Presidencial 2025/10 da Turquia, publicada no Diário Oficial nº 32933 em 21 de junho de 2025, estabelece obrigações abrangentes de acessibilidade digital para uma ampla gama de entidades que operam na Turquia. A circular se alinha às WCAG 2.2 como o padrão técnico para conformidade em acessibilidade digital e se aplica a instituições públicas, plataformas de comércio eletrônico, bancos e instituições financeiras, hospitais e prestadores de serviços de saúde, empresas de telecomunicações com 200.000 ou mais assinantes, agências de viagem, empresas de transporte privado e escolas privadas autorizadas pelo Ministério da Educação Nacional (MoNE).

WCAG 2.4.10 — Títulos de Seção é um critério de Nível AAA. Isso significa que ele não está entre os critérios mínimos legalmente exigidos pela circular, que exige conformidade nos Níveis A e AA para as entidades abrangidas. No entanto, a intenção mais ampla da circular é garantir acesso digital significativo para todos os usuários, e critérios de Nível AAA como 2.4.10 são explicitamente reconhecidos como representando práticas de acessibilidade de melhor nível.

Para entidades abrangidas — particularmente instituições públicas, bancos, hospitais e grandes provedores de telecomunicações — implementar WCAG 2.4.10 demonstra um compromisso com acessibilidade que vai além dos mínimos regulatórios. Na prática, hierarquias de títulos bem estruturadas também são uma pré-condição para vários critérios de sucesso de nível AA (como 1.3.1 Informações e Relacionamentos e 2.4.6 Títulos e Rótulos), o que significa que organizações que buscam conformidade total com o nível AA naturalmente se aproximarão da conformidade com 2.4.10 como parte desse esforço.

Serviços especializados voltados a usuários com deficiência, ou serviços digitais oferecidos por instituições públicas que atendem populações cidadãs diversas, incluindo pessoas idosas, pessoas com deficiências cognitivas ou usuários de tecnologias assistivas, se beneficiariam especialmente da implementação completa de 2.4.10. A crescente ênfase da Turquia em serviços de governo digital (e-devlet) e a expansão do comércio eletrônico tornam uma estrutura de conteúdo robusta não apenas um requisito de acessibilidade, mas também uma prioridade de usabilidade e de gestão de risco jurídico.

Organizações na Turquia que voluntariamente se certificam em WCAG 2.2 Nível AAA — incluindo 2.4.10 — se posicionam como líderes em acessibilidade, o que fortalece a confiança na marca, reduz o risco de litígios e amplia seu público-alvo para incluir os estimados 8,5 milhões de pessoas com deficiência na Turquia, conforme relatado pelo Instituto de Estatística Turco (TÜİK).