{"action":"created","issue":{"url":"https://api.github.com/repos/frontendbr/forum/issues/24","repository_url":"https://api.github.com/repos/frontendbr/forum","labels_url":"https://api.github.com/repos/frontendbr/forum/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/frontendbr/forum/issues/24/comments","events_url":"https://api.github.com/repos/frontendbr/forum/issues/24/events","html_url":"https://github.com/frontendbr/forum/issues/24","id":131442700,"number":24,"title":"Múltiplos H1 por página x Acessibilidade","user":{"login":"diogorodrigues","id":1757632,"avatar_url":"https://avatars.githubusercontent.com/u/1757632?v=3","gravatar_id":"","url":"https://api.github.com/users/diogorodrigues","html_url":"https://github.com/diogorodrigues","followers_url":"https://api.github.com/users/diogorodrigues/followers","following_url":"https://api.github.com/users/diogorodrigues/following{/other_user}","gists_url":"https://api.github.com/users/diogorodrigues/gists{/gist_id}","starred_url":"https://api.github.com/users/diogorodrigues/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/diogorodrigues/subscriptions","organizations_url":"https://api.github.com/users/diogorodrigues/orgs","repos_url":"https://api.github.com/users/diogorodrigues/repos","events_url":"https://api.github.com/users/diogorodrigues/events{/privacy}","received_events_url":"https://api.github.com/users/diogorodrigues/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/frontendbr/forum/labels/Acessibilidade","name":"Acessibilidade","color":"bfe5bf"},{"url":"https://api.github.com/repos/frontendbr/forum/labels/HTML","name":"HTML","color":"eb6420"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-02-04T18:55:20Z","updated_at":"2016-02-05T00:10:56Z","closed_at":null,"body":"[Nessa issue](https://github.com/frontendbr/forum/issues/23) o @fdaciuk e o @LFeh levantaram o debate sobre a utilização de múltiplos H1 por página. \r\n\r\n**Um tema polêmico e mamílico e, por isso, decidi abrir essa issue.**\r\n\r\nNa é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.\r\n\r\nMas, 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](http://www.powermapper.com/tests/screen-readers/headings/aria-role-heading/). Mas mesmo assim ainda pode enfrentar problemas em alguns leitores. [Essa outra ferramenta](https://gsnedders.html5.org/outliner/) pode testar o outiline.\r\n\r\nE vocês? Como utilizam o H1? \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/frontendbr/forum/issues/comments/180116114","html_url":"https://github.com/frontendbr/forum/issues/24#issuecomment-180116114","issue_url":"https://api.github.com/repos/frontendbr/forum/issues/24","id":180116114,"user":{"login":"fdaciuk","id":487669,"avatar_url":"https://avatars.githubusercontent.com/u/487669?v=3","gravatar_id":"","url":"https://api.github.com/users/fdaciuk","html_url":"https://github.com/fdaciuk","followers_url":"https://api.github.com/users/fdaciuk/followers","following_url":"https://api.github.com/users/fdaciuk/following{/other_user}","gists_url":"https://api.github.com/users/fdaciuk/gists{/gist_id}","starred_url":"https://api.github.com/users/fdaciuk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fdaciuk/subscriptions","organizations_url":"https://api.github.com/users/fdaciuk/orgs","repos_url":"https://api.github.com/users/fdaciuk/repos","events_url":"https://api.github.com/users/fdaciuk/events{/privacy}","received_events_url":"https://api.github.com/users/fdaciuk/received_events","type":"User","site_admin":false},"created_at":"2016-02-05T00:10:56Z","updated_at":"2016-02-05T00:10:56Z","body":"Pois é.. esse é mamilão haueheuahe!\r\nMas 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\r\n\r\nEle quis dizer que a melhor coisa a fazer, é manter a marcação mais semântica possível, pois isso sim facilita a acessibilidade.\r\n\r\nEu 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:\r\n\r\n1) 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;\r\n2) 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.\r\n\r\nEnfim, eu parei de usar dessa forma por uma questão de experiência do usuário.\r\n\r\nPode ser que hoje muita coisa já tenha melhorado, mas faz um tempinho que eu não vou atrás disso mais."}}