Sobre este problema HTML
Múltiplos elementos h1 numa página podem confundir leitores de ecrã e outras ferramentas de assistência, que tratam cada h1 como o título de nível superior.
Os títulos HTML (h1 até h6) formam um esquema do seu documento. O elemento h1 representa o título de nível mais alto, e a maioria das diretrizes de acessibilidade recomenda usar apenas um h1 por página. Quando os leitores de ecrã encontram múltiplos elementos h1, podem apresentá-los todos como secções de nível superior igualmente importantes, tornando mais difícil para os utilizadores compreender a estrutura da página.
Em vez de usar múltiplos elementos h1, use uma hierarquia de títulos adequada. Comece com um único h1 para o tópico principal da página, depois use h2 para secções principais, h3 para subsecções, e assim por diante. Isto cria um esquema de documento claro e navegável.
O aviso do W3C também menciona um atributo headingoffset, que é uma funcionalidade proposta para elementos <section> que permitiria o ajuste automático do nível de título. No entanto, este atributo ainda não está implementado em nenhum browser, por isso não deve confiar nele.
Exemplo com o problema
<body>
<h1>My Website</h1>
<section>
<h1>About Us</h1>
<p>Some content here.</p>
</section>
<section>
<h1>Contact</h1>
<p>More content here.</p>
</section>
</body>Exemplo com hierarquia de títulos adequada
<body>
<h1>My Website</h1>
<section>
<h2>About Us</h2>
<p>Some content here.</p>
</section>
<section>
<h2>Contact</h2>
<p>More content here.</p>
</section>
</body>
Mantenha um h1 por página e aninhe os títulos subsequentes usando h2 até h6 para refletir a estrutura lógica do seu conteúdo. Esta abordagem é bem suportada em todos os browsers e tecnologias de assistência atualmente.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.