Cabeçalhos nível 1, sections e acessibilidade

Como múltiplos H1 dentro de sections impactam a acessibilidade da sua página

por Reinaldo Ferraz 01/09/2014

Na semana passada li um artigo bem interessante sobre a utilização de múltiplos

em uma página separada por

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

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

dentro dos elementos
.

O primeiro ponto a ser considerado é como a documentação do W3C trata a questão dos múltiplos

dentro de cada página web. Segundo a documentação do próprio HTML5 é possível ter mais de um

na página desde que estejam separados por múltiplas
.

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

no título de uma notícia de um

dentro de uma
. 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

e

.

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

.

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

dentro de
tenha o mesmo peso de importância de

que estão fora de
.Isso não quer dizer que não seja possível utilizar mais de um

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.