Acerca de este problema HTML
Múltiples elementos h1 en una página pueden confundir a los lectores de pantalla y otras herramientas de asistencia, que tratan cada h1 como el encabezado de nivel superior.
Los encabezados HTML (h1 hasta h6) forman un esquema de tu documento. El elemento h1 representa el encabezado de nivel más alto, y la mayoría de las directrices de accesibilidad recomiendan usar solo un h1 por página. Cuando los lectores de pantalla encuentran múltiples elementos h1, pueden presentarlos todos como secciones de nivel superior igualmente importantes, lo que hace más difícil para los usuarios entender la estructura de la página.
En lugar de usar múltiples elementos h1, utiliza una jerarquía de encabezados apropiada. Comienza con un solo h1 para el tema principal de la página, luego usa h2 para las secciones principales, h3 para las subsecciones, y así sucesivamente. Esto crea un esquema de documento claro y navegable.
La advertencia de W3C también menciona un atributo headingoffset, que es una característica propuesta para elementos <section> que permitiría el ajuste automático del nivel de encabezado. Sin embargo, este atributo aún no está implementado en ningún navegador, por lo que no deberías depender de él.
Ejemplo con el 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>Ejemplo con jerarquía de encabezados apropiada
<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>
Mantén un h1 por página y anida los encabezados subsiguientes usando h2 hasta h6 para reflejar la estructura lógica de tu contenido. Este enfoque está bien soportado en todos los navegadores y tecnologías de asistencia actuales.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.