Os títulos criam um esboço lógico da sua página. Uma página bem estruturada é como um livro bem estruturado. Por exemplo, digamos que temos um livro intitulado “O que é acessibilidade na Web” com 2 capítulos: “Por que a acessibilidade é importante” e “Como projetar interfaces acessíveis”.

Digamos também que o primeiro capítulo, “Por que a acessibilidade é importante”, tem uma subseção intitulada “Impacto nos usuários” e “Requisitos legais”. O segundo capítulo, “Como projetar interfaces acessíveis” tem uma subseção intitulada “Contraste de cores”.

Em marcadores, podemos organizar o índice do livro “O que é acessibilidade na Web” da seguinte forma:

• O que é acessibilidade na web
  • Por que a acessibilidade é importante
    • Impacto nos usuários
    • Requisitos Legais
  • Como projetar interfaces acessíveis

Com a mesma ideia da organização em marcadores, podemos usar títulos em HTML para organizar o livro.

 
    
Why Accessibility Matters
 
        
Impact on Users
 
        
Legal Requirements
 
    
How to Design Accessible Interfaces
 
        
Color Contrast

No nosso exemplo de livro, existe apenas um H1, que é o título do livro. Não podemos ter um livro com dois títulos, não é mesmo?

Em seguida, cada capítulo é rotulado com uma tag H2, indicando que está um nível “abaixo” do título/cabeçalho principal. Depois disso, temos as tags H3 no próximo nível abaixo, denotando subseções dentro de cada capítulo.

Observe que você não deve simplesmente pular de H1 para H3 (a menos que tenha um motivo estrutural deliberado). Seria como abrir um livro e pular direto para uma subseção, ignorando o início do capítulo. Provavelmente não faria muito sentido.

O esboço do título torna mais fácil para as pessoas que usam tecnologias assistivas (e qualquer outra pessoa) folhear o conteúdo e entender logicamente a hierarquia da página.

Os estilos vêm do CSS, não do nível do título

Um erro comum que os desenvolvedores costumam cometer é usar uma tag de título só porque parece grande, para atender às expectativas do design. O uso incorreto dos níveis de título pode criar problemas de acessibilidade, pois a página terá a estrutura errada.

É importante lembrar de não escolher um nível de título com base no estilo. Escolha o nível do título com base na estrutura. Em seguida, use CSS para controlar o estilo visual.

Os títulos permitem navegação para tecnologia assistiva

Usar a estrutura de títulos correta em suas páginas da web é crucial para acessibilidade. Os usuários de leitores de tela têm atalhos que podem usar para passar de um título para outro. Com um leitor de tela, eles podem ir para uma seção específica e começar a ouvir o conteúdo a partir daí.

Assim como usar tags de título para estilizar é uma má ideia, não usar tags de título também é uma má ideia. Se você apenas deixar o texto em negrito ou maior com CSS, mas nunca marcá-lo como um título adequado, o leitor de tela não saberá que existe a quebra ou alteração no conteúdo. Isso evita que o usuário folheie ou pule a página conforme necessário.

Por exemplo, digamos que temos uma página de produto:

Product Page
Price
Features

A ausência de cabeçalho em nossa página de produto significa que o conteúdo se torna uma parede gigante de texto que o leitor de tela deve ouvir sequencialmente, aumentando o tempo que o usuário levará para ler o conteúdo.

Neste exemplo simples, estilizamos o título da página com classes CSS, mas não usamos título. Os usuários de leitores de tela não saberão com certeza se a página do produto é o título da página. Eles não obtêm pistas sobre o conteúdo dos estilos CSS.

Uma maneira melhor de criar a página do produto seria usar títulos como este:

  
Price
  
Features

O uso de tags de cabeçalho adequadas permite que os usuários de leitores de tela naveguem pelos títulos e obtenham as informações na página com mais rapidez.

Títulos ajudam SEO e mecanismos de pesquisa

O Google e outros mecanismos de pesquisa leem seus títulos para obter informações importantes sobre o conteúdo. Eles podem dizer pela tag H1 qual é o tópico principal (do que trata a página), quais são os subtópicos principais (denotados com H2) e quais são os detalhes de apoio abaixo de cada subtópico (H3s e assim por diante).

Títulos bem estruturados tornam seu conteúdo mais fácil de indexar e, muitas vezes, mais propenso a ter um melhor desempenho na pesquisa. O Google, por exemplo, usará títulos para construir um esboço da página, assim como um índice analítico. Ele pode então combinar esse esboço/tópicos principais com as consultas de pesquisa corretas.

E embora os mecanismos de pesquisa modernos possam lidar perfeitamente com uma página com vários títulos H1 – sem prejudicar efetivamente o SEO – usando um único título primário claro é uma boa convenção para maior clareza.