Múltiplos H1 por página x Acessibilidade

[dionarodrigues]

Nessa issue o @fdaciuk e o @lfeh levantaram o debate sobre a utilização de múltiplos H1 por página.

Um tema polêmico e mamílico e, por isso, decidi abrir essa issue.

Na época do boom do HTML5 e a possibilidade de usar vários H1, eu comecei a utilizá-lo sempre no primeiro título de cada section ou article do meu documento. No entanto, com o tempo comecei a me questionar sobre isso e sua relação com SEO e acessibilidade e passei a utilizar apenas um por página.

Mas, recentemente, estudando sobre acessibilidade, vi que a questão do outiline gerado pelo HTML5 pode ser corrigido para os leitores de tela que ainda não entendem muito bem essa dinâmica utilizando WAI-ARIA, através do atributo "aria-level". Vejam um teste parcial aqui. Mas mesmo assim ainda pode enfrentar problemas em alguns leitores. Essa outra ferramenta pode testar o outiline.

E vocês? Como utilizam o H1?

[felipefialho]

Ótimo ponto @diogorodrigues, legal ter criado uma issue separada, é um assunto que rende bastante.

Faz bastante tempo que utilizo da forma que você comentou, ou seja. Adiciono uma nova sequencia de headings a cada novo section ou article (e em alguns casos no header), pois das ultimas vezes que li sobre o assunto, diziam que era uma boa pratica para acessibilidade.

Gostou dessa pratica também por causa dos componentes, acho que assim os escopos ficam mais livres. Já que em tese, cada 'widget', tem uma nova estrutura de headings para usar conforme necessário. Me sinto mais a vontade trabalhando assim.

Em tese não deveria mais ter problemas com leitores de tela. Se não me engano, a Leda disse algo relacionado a isso no FrontInSampa 2014.

[fdaciuk]

Pois é.. esse é mamilão haueheuahe!
Mas assim.. se você olhar alguma talk do Reinaldo Ferraz (acho que ele falou na BrazilJS do ano passado isso), o melhor uso para o WAI-ARIA é não usar WAI-ARIA xD

Ele quis dizer que a melhor coisa a fazer, é manter a marcação mais semântica possível, pois isso sim facilita a acessibilidade.

Eu usei em vários projetos um h1 por section ou article, dependendo do contexto, mas depois de um tempo, pesquisando e vendo algumas opiniões de pessoas com deficiência, normalmente visual, onde elas diziam que o site não precisa ter os títulos marcados perfeitamente, mas duas coisas facilitavam muito a navegação deles:

1. Não utilizar vários h1, pois eles navegam pelo teclado, através da tecla h, que pula de título em título, do nível mais alto até o nível mais baixo. Com vários h1 na tela, os pulos ficavam meio aleatórios;
2. Ainda que os títulos não sigam perfeitamente o fluxo h1, h2, h3..., mas que deveria ter uma hierarquia, pois isso ajudava bastante na navegação deles.

Enfim, eu parei de usar dessa forma por uma questão de experiência do usuário.

Pode ser que hoje muita coisa já tenha melhorado, mas faz um tempinho que eu não vou atrás disso mais.

[dionarodrigues]

Então, sobre a questão do SEO, encontrei esse vídeo, onde Matt Cutts explica que não há problemas em ter vários H1 na página, desde que sejam utilizados da maneira correta e com moderação

[dionarodrigues]

Então @lfeh , ultimamente tenho pensado em me arriscar a utilizar um H1 por section, quando for necessário. Afinal @fdaciuk , acabo fazendo isso com outras TAGs - as hierarquizando de maneira individual por section/article - e os leitores as bagunçam da mesma maneira, sendo necessário recorrer à WAI-ARIA às vezes. Portanto, por que não fazer isso com H1 também?

Acho que essa questão dos Hs vem se tornando um mito. Pois, se quer desenvolver os Hs como se estivéssemos no HTML4. Talvez, um meio de contornar o problema de alguns leitores de tela é criar uma solução via JS que troca os Hs quando o usuário achar necessário. Concordam?

[fdaciuk]

Pois é, não dá pra saber o que é 100% correto. Mas, antes de usar, eu recomendaria tentar conversar com algumas pessoas que tenham deficiência visual, e que façam uso desses leitores de tela diariamente, para saber a opinião real do que deve ou não deve ser feito, afinal, eles são as melhores pessoas para dizer isso :)

[dionarodrigues]

Concordo @fdaciuk .

[felipefialho]

Eu concordo com a sua questão @diogorodrigues, penso dessa forma também. Até porque, os leitores de tela, tem que acompanhar a evolução dos browsers. É uma questão complicada nesse caso né?

[DevCarlosAugusto]

Nesse assunto eu tenho uma dúvida, no site que trabalho temos um

geral do site onde tem o

principal com o nome da página, o mesmo que vai no atributo <title> do , porém em seguida temos um que também contém um próprio da matéria e um

e

, título e subtítulo respectivamente, vi em alguns blogs falando sobre isso que no caso o 1º

é o mais importante, mas o que vem em seguida é o mais importante dentro do , ou seja, da matéria....o que seria mais indicado ?

[fdaciuk]

@Carlosxell markdown aceita HTML tbem :P
Aqui nos comentários, se colocar tags HTML soltas, elas serão renderizadas :)

Coloque sempre entre crases, se for escrever inline: <h1>

E se for escrever um bloco de código, entre 3 crases, o código na linha de baixo, e mais 3 crases para fechar o bloco:

bloco de código

:)

[DevCarlosAugusto]

Opa, @fdaciuk, valeu o toque, eu nem tinha visto no preview, se colocar uma "" antes da tag também funciona de colocar ela inline.

[fdaciuk]

Opa, @fdaciuk, valeu o toque, eu nem tinha visto no preview, se colocar uma "" antes da tag também funciona de colocar ela inline.

Também funciona xD

Nesse assunto eu tenho uma dúvida, no site que trabalho temos um

geral do site onde tem o

principal com o nome da página, o mesmo que vai no atributo <title> do , porém em seguida temos um que também contém um próprio da matéria e um

e

, título e subtítulo respectivamente, vi em alguns blogs falando sobre isso que no caso o 1º

é o mais importante, mas o que vem em seguida é o mais importante dentro do , ou seja, da matéria....o que seria mais indicado ?

Então, foi por isso que surgiu essa discussão xD
Isso é o que todo mundo já fez, alguns pararam de fazer, outros ainda o fazem. Mas o real problema é: quanto isso afeta o usuário final com deficiência visual, ou que usa um leitor de tela por qualquer outro motivo?

Por isso seria interessante tentar fazer algumas pesquisas, conversar com pessoas que usam esse tipo de software para entender a real necessidade delas :)

[reinaldoferraz]

Opa!
Com relação a acessibilidade, o uso de múltiplos H1 ainda é uma barreira. Os leitores de tela ainda não sabem a diferença de um H1 no header de um H1 dentro de section. Ele trata todos como cabeçalhos do mesmo nível. Fiz um teste agora a pouco com as versões atualizadas de JAWS e NVDA com Chrome, FF e IE no Windows e todos eles tratam os cabeçalhos com o nível declarado, independente de estar dentro de sections.

Não gosto muito do uso de ARIA para isso. Prefiro usar a semântica do HTML dos cabeçalhos para orientar o usuário. Porém, ARIA-LEVEL funciona bem em algumas combinações com leitores de tela (JAWS com Chrome e NVDA com Firefox). Nos testes que fiz não defini "role". Utilizei direto h1 aria-level="2". Nesse caso você mantem a semântica do elemento como cabeçalho mas muda seu nível com ARIA.

Creio que antes de focarmos no que "pode" e "não pode" com relação a acessibilidade, o bom senso no uso e na hierarquia de cabeçalhos é fundamental. O HTML5 permite esse tipo de combinação, mas minha recomendação é usar com cautela e estruturar bem cabeçalhos. Se não for possível ter apenas um H1, aria-level pode ajudar.

Alguns artigos legais sobre isso:
http://tableless.com.br/cabecalhos-nivel-1-e-sections/
https://www.paciellogroup.com/blog/2013/10/html5-document-outline/
http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 (especialmente pelo debate nos comentários)

[fdaciuk]

Debate de altíssimo nível! Valeu pela contribuição @reinaldoferraz 👍 💃 ✨

[felipefialho]

Valeu @reinaldoferraz, bom ter essa explicação. Nunca tinha usado o aria-level, e como uso múltiplos <h1> nos meus projetos acredito ser uma saída eficaz para melhorar a acessibilidade.

[dionarodrigues]

Valeu @reinaldoferraz !! ;)

[eduardojmatos]

@reinaldoferraz 👏 👏 👏 excelente!

[brunopulis]

Bate papo excelente e concordo com o @reinaldoferraz :) mesmo com a possibilidade de usar várias <h1> nas páginas me atenho a utilizar somente um. Dentro das <section> ou <article> utilizo um <h2>. E como o @fdaciuk disse o macete é abusar da semântica do próprio HTML e usar WAI-ARIA quando necessário.