Estrutura de cabeçalhos em documentos web

Publicado em: 27/01/2009

Autor: Roger Johansson
URL do original: https://www.456bereastreet....outlines/
Título original: Headings, heading hierarchy, and document outlines
Traduzido com conhecimento do autor

Importância dos cabeçalhos

Vamos começar revendo alguns conceitos básicos sobre a função e a importância dos cabeçalhos em um documento HTML. Se você já sabe o porquê da importância dos cabeçalhos sinta-se à vontade para pular esta introdução e passar para a seção seguinte.

Cabeçalhos em marcação HTML são criados com os elementos h1-h6, são úteis e devem ser usados para destacar visualmente todo texto que atue como, obviamente, cabeçalho de uma seção. Sua importância se destaca não somente porque é a escolha semanticamente correta, mas também porque facilita a indexação do documento pelos mecanismos de busca. Contudo, a maior importância do uso correto de cabeçalhos diz respeito ao incremento da acessibilidade.

Usuários de leitores de tela, por exemplo, podem usar atalhos de teclado para navegar pelos cabeçalhos do documento. Para ver como isto funciona assista um vídeo, em inglês, hospedado em: A importância dos cabeçalhos HTML para a acessibilidade. O vídeo mostra como um usuário de leitor de tela navega pelos cabeçalhos de um documento. Tal como para leitores de tela, alguns navegadores também permitem que se navegue pelos cabeçalhos usando atalhos de teclado, agilizando a navegação principalmente para usuários dependentes de teclado.

Assim concluimos que existem várias razões para se usar cabeçalhos e usá-los de maneira apropriada.

Diretrizes para criação de um documento bem estruturado

O objetivo final das discussões que tivemos no nosso escritório, envolvendo o assunto, foi o de chegar-se a uma conclusão sobre as normas ou diretrizes fundamentais de uma boa escolha para estruturar os cabeçalhos de um documento. Algumas conclusões se basearam naquilo que nós "achamos correto", outras nas diretrizes de acessibilidade e outras ainda nas boas práticas de desenvolvimento. Como produto final chegamos a algumas regras de bolso listadas a seguir:

• Cada documento deve ter uma estrutura lógica de cabeçalhos, começando com o cabeçalho de nível 1 e seguir sem pular níveis.
• Tudo que se pareça visualmente com um cabeçalho deve ser marcado como tal.
• O título do conteúdo principal do documento deve ser marcado com cabeçalho nível 1.
• Deverá haver somente um cabeçalho de nível 1 no documento.

Uma questão para a qual eu não encontrei uma resposta definitiva é: como proceder quando o título do conteúdo principal do documento não é o primeiro texto que aparece na marcação? Criar um "texto falso" no início do documento e marcá-lo com h1? Marcar o primeiro texto com h2 em detrimento de uma estrutura perfeita? Adotar outra solução?

Guia para cabeçalhos

Procurando por orientações sobre emprego de cabeçalhos eu encontrei o seguinte nas técnicas WCAG2.0 das Diretrizes de Acessibilidade WCAG 2.0.

Soluções

Baseado no que foi dito eu conclui que há duas opções possíveis:

1. O primeiro cabeçalho deve ser necessariamente o de nível h1 seguido dos cabeçalhos de nível inferior (de acordo com o segundo exemplo mostrado no documento das WCAG 2.0).
2. Colocar o logo da organização logo no início da marcação e marcá-lo como cabeçalho de nível 1. Usar cabeçalhos de nível inferior até encontrar o título do conteúdo principal do documento e então marcar este conteúdo principal com cabeç;alho h1.

Para um layout de três colunas, com a estrutura de cabeçalhos preconizada na opção 2, a marcação resumida é mostrada a seguir:

<div id="header">
	<h1><img src="logo.gif" alt="Nome da Organização"></h1>
	<h2>Menu principal </h2>
	<ul>
	<li></li>
	</ul>
</div>

<div id="nav-sec">
	<h2>Menu secundario </h2>
	<ul>
	<li></li>
	</ul>
</div>

	<div id="principal">
	<h1>Título do conteúdo principal</h1>
	<p>Conteúdo da página</p>
</div>

Os títulos do menu principal e secundário, caso o design permita, poderão ser escondidos visualmente e permanecer acessíveis aos leitores de tela.

Para pessoas que precisam navegar pelos cabeçalhos de um documento a marcação deles de forma correta e estruturada é mais importante que a perfeição na compartimentação dos conteúdos. Não me parece correto começar uma página com um cabeçalho de nível inferior. Por outro lado, marcar dois cabeçalhos h1 na mesma página ou marcar o logo com cabeçalho h1 é considerado incorreto por alguns.

Como já dissemos no início da matéria, não é fácil encontrar uma solução perfeita para esta questão.

Quatro perguntas para você

Você saberia responder as questões a seguir?

1. Você tem uma solução melhor que as apresentadas nesta matéria?
2. Se não, qual a solução que você considera melhor? Por que?
3. Muitos recomendam o uso de somente um cabeçalho h1 na página. Por que exatamente? e quais os problemas que podem surgir devido ao uso de dois ou mais níveis 1? Exemplos concretos são bem-vindos.
4. O nível do primeiro cabeçalho em uma página faz alguma diferença para leitores de tela e para a navegação pelos cabeçalhos?