Estrutura de títulos e pontos de referência

Um jeito comum de ler uma página com leitor de tela é pular de título em título, então uma página sem elementos h2 é como um livro sem capítulos.

Os títulos são um sumário

Quem enxerga passa os olhos. Bate o olho nas linhas grandes em negrito, acha a seção que quer e começa a ler ali. Quem usa leitor de tela faz o mesmo com os títulos. O MDN observa que uma técnica comum é pular rapidamente de título em título para descobrir o que a página contém, e que a maioria dos leitores de tela consegue listar todos os títulos da página. Isso só funciona se os títulos forem elementos h1 a h6 de verdade. Um parágrafo deixado grande e em negrito com CSS parece um título, mas é anunciado como texto comum.

A WCAG 2.2 trata disso no critério de sucesso 1.3.1 Informações e Relações, de nível A: a estrutura mostrada visualmente também precisa estar disponível no código. O critério 2.4.6 Cabeçalhos e Rótulos, de nível AA, acrescenta que os títulos precisam descrever o assunto da sua seção. Um título que diz "Mais" ou "Seção 2" passa no primeiro teste e falha no segundo.

Três regras do MDN

Primeira: não pule níveis. Vá de h1 para h2 e para h3. Quem ouve um h4 logo depois do h1 fica se perguntando onde foram parar os níveis que faltam. Segunda: prefira um único h1 por página, que dê nome ao conteúdo, mais ou menos como o elemento title. O padrão HTML permite mais de um, mas o MDN descreve um h1 só como a boa prática de costume. Terceira: não escolha o nível do título pelo tamanho. Se um h3 parece pequeno demais, mude o tamanho da fonte no CSS e mantenha o nível que combina com a estrutura.

Escrevendo títulos que as pessoas conseguem usar

Uma lista de títulos só é tão boa quanto as suas palavras. Ponha a palavra útil primeiro, porque quem percorre uma lista de vinte títulos ouve o começo de cada um e segue adiante: "Horário de funcionamento" funciona melhor que "Quando você pode nos visitar". Mantenha os títulos curtos e diferentes entre si, para que duas seções nunca se chamem as duas "Detalhes". Depois teste o esquema. O painel de acessibilidade das ferramentas de desenvolvedor do navegador, ou a lista de títulos de um leitor de tela, mostra só os títulos. Leia-os em sequência e pergunte se fazem sentido como sumário. Se fizerem, quem enxerga e passa os olhos também ganha.

Pontos de referência

Os títulos dividem o conteúdo; os pontos de referência (landmarks) dividem a página em regiões. Os elementos header, nav, main e footer carregam cada um uma função embutida, então um leitor de tela pode oferecer uma lista de regiões e pular direto para o conteúdo principal ou para a navegação. Uma página normalmente tem um só main. Você ganha essas funções de graça escolhendo o elemento certo, que é a primeira regra do ARIA na prática: nenhum atributo extra é necessário.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>