Práticas Web acessíveis Títulos
Os cabeçalhos (títulos) em HTML são representados pelas tags<h1> até <h6>.Assim, as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que aquele elemento trata-se de um cabeçalho (h vem do inglês "heading", que significa cabeçalho). O h1 deve ser o título principal da página, ou seja, deverá existir apenas um elemento h1 em cada página. A seguir, devem ser utilizados os níveis subsequentes de título, de maneira hierárquica, sem pular um ou mais níveis. A apresentação visual dos títulos poderá ser modificada através das folhas de estilo.
Imagine o seu conteúdo como sendo um livro. O título do livro seria o h1, os capítulos seriam elementos h2, os sub-capítulos são representados por elementos h3 e assim por diante. Dessa forma, o título principal de um site seria o h1, o que nos leva a ter apenas um h1 em cada página. O título do conteúdo principal passa a ser o h2, as seções internas do conteúdo seriam o h3 e assim por diante.
Por que é tão importante utilizar corretamente os títulos em um site?
Para quem enxerga, basta diferenciar os títulos visualmente, pelo tamanho, tipo ou cor da fonte. No entanto, para quem não pode ver, essa diferenciação visual perde seu propósito. Pessoas que navegam pelos sites utilizando um leitor de tela são informadas por esse software sobre o tipo de elemento pelo qual estão passando. Por exemplo, quando o usuário passar por um título dentro do conteúdo que foi inserido como um h2, o leitor de tela irá ler algo do tipo “cabeçalho de nível 2, texto do cabeçalho”. Assim, o usuário, mesmo sem enxergar, saberá que se trata de um título e conhecerá a hierarquia do conteúdo da página. Além disso, os leitores de tela permitem que os usuários naveguem rapidamente através dos títulos, pressionando a tecla “h”. Assim, poderão pular de título em título, compreendendo a hierarquia da página e chegando rapidamente ao conteúdo desejado.
Código
<h1> Acessibilidade na Web</h1>
<h2>Introdução à Acessibilidade na Web</h2>
<p> ...texto...</p>
<h3>Barreiras enfrentadas por pessoas com deficiência</h3>
<p> ...texto...</p>
<h3>Recursos de Tecnologia Assistiva</h3>
<p> ...texto...</p>
<h2>Garantindo a Acessibilidade na Web</h2>
<p> ...texto...</p>
<h3>Recomendações de acessibilidade</h3>
Resultado
