Na semana passada li um artigo bem interessante sobre a utilização de múltiplos <h1>
em uma página separada por <section> e como isso impacta a acessibilidade das páginas Web. Depois de algumas conversas pelo Twitter resolvi pesquisar e escrever um pouco sobre o assunto.</>ection>
Antes de mais nada, quero deixar claro que essa é uma abordagem com relação a acessibilidade das páginas e não sobre SEO. Essa conversa sobre como mais de um <h1> interfere no resultado de busca é antiga mas vale um novo post para o tema.
Tudo começou com o artigo do Adrian Roselli sobre esse assunto. Ele discute a questão sobre como as tecnologias assistivas acessam os cabeçalhos <h1> dentro dos elementos <section>.
O primeiro ponto a ser considerado é como a documentação do W3C trata a questão dos múltiplos <h1> dentro de cada página web. Segundo a documentação do próprio HTML5 é possível ter mais de um <h1> na página desde que estejam separados por múltiplas <section>.
Essa questão impacta na compatibilidade com tecnologias assistivas de hoje em dia. Atualmente os principais leitores de tela (JAWS 15 e NVDA 2014) não conseguem identificar a diferença e a importância de um <h1> no título de uma notícia de um <h1> dentro de uma <section>. Explico.
Considere uma página com a seguinte estrutura:
O navegadores exibirão o código da seguinte forma:
Mas para os atuais leitores de tela a informação aparece da seguinte forma:
→ Título importante cabeçalho nível 1
→ Título importante cabeçalho nível 1
→ Título importante cabeçalho nível 1
A Wiki do Grupo de HTML do W3C mostra mais detalhes dessa explicação.
O documento WCAG 2.0 não aborda a questão de múltiplos cabeçalhos de nível 1 e coloca como exemplo apenas os cabeçalhos estruturados entre <h1> e <h6>.
O que temos hoje é uma gama de tecnologias assistivas que navegam pelos cabeçalhos da página mas não fazem distinção de importância por estar dentro de uma <section>.
Ao passar esse pequeno trecho de código dentro do validador de markup do W3C não encontramos erros. Ele passa com validação de HTML5 mas mostra o seguinte warning na página:
Ou seja: para garantir que tecnologias assistivas acessem o conteúdo de cabeçalhos em sua ordem de importância adequada, não considere que elementos <h1> dentro de <section> tenha o mesmo peso de importância de <h1> que estão fora de <section>.Isso não quer dizer que não seja possível utilizar mais de um <h1> dentro de uma página. Se todos os cabeçalhos de nível 1 tem o mesmo valor semântico, eles podem e devem ser utilizados.
Os cabeçalhos de uma página tem função fundamental para a acessibilidade. Pessoas que utilizam softwares leitores de tela navegam pela estrutura de cabeçalhos e utilizam o tipo de cabeçalho para navegar entre eles. Por exemplo, nos principais leitores de tela ao pressionar a tecla “H” o software navega pelos cabeçalhos em sequência. Ao pressionar as teclas “1” a “6” a navegação é feita por níveis de cabeçalho, sendo a tecla “1” utilizada para navegar por cabeçalhos de nível 1 e assim por diante até o nível 6. Inclusive a navegação por cabeçalhos é uma das principais formas de localizar conteúdo, segundo a última pesquisa do WebAim sobre usuários de softwares leitores de tela.