Tableless

Busca Menu

Cabeçalhos nível 1, sections e acessibilidade

Seja o primeiro a comentar por

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.

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:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Teste</title>
</head>
<body>
<h1>Título Importante</h1>
   <section>
   <h1>Título Importante</h1>
      <section>
      <h1>Título Importante</h1>
      </section>
   </section>
</body>
</html>

O navegadores exibirão o código da seguinte forma:

Imagem com as palavras título importante em três tamanhos

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:

Imagem com o resultado de um aviso do validador de markup referente a  cabeçalhos e leitores de tela

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.

Publicado no dia