Encabezados anidados
Los encabezados están pensados para ir uno junto a otro, marcando cada uno el inicio de una sección. Cuando un encabezado se coloca dentro de otro, los dos se funden en un solo anuncio — o uno de ellos desaparece por completo de la lista de encabezados. Un usuario de lector de pantalla que navega por encabezados se salta de largo una sección que, en pantalla, parecía estar ahí.
Esta revisión encuentra elementos de encabezado anidados dentro de otros elementos de encabezado.
Qué comprueba la herramienta
Se examina cada encabezado de la página para ver si hay otro encabezado dentro. La herramienta mira la página tal como el navegador la renderiza finalmente, no el marcado de origen.
Por qué importa
Saltar de encabezado en encabezado es la forma más rápida que tiene un usuario de lector de pantalla de recorrer una página. Un encabezado que nunca llega a esa lista es una sección que el usuario no va a encontrar, por muy destacada que se vea.
Cuándo reporta un problema
Un elemento de encabezado contiene otro elemento de encabezado. El reporte identifica tanto el encabezado externo como el interno, con sus niveles y su texto.
Cuándo no reporta
| Situación | Por qué no se reporta |
|---|---|
| Marcado que el navegador ya corrigió | Algunos anidamientos inválidos, como <h1><h2>...</h2></h1>, los reescribe el navegador en silencio como dos encabezados hermanos. Para cuando la página se renderiza ya no queda anidamiento, así que no hay nada que reportar — ni nada que le afecte al usuario. |
| Encabezados hermanos en el mismo contenedor | Dos encabezados uno al lado del otro son estructura normal, no anidamiento. |
| Encabezados ocultos | Los encabezados retirados de la vista con display: none o visibility: hidden quedan fuera. |
Qué dice el reporte
Título: Headings incorrectly nested into each other
Descripción:
<inner_tag>(level N) "text" is nested inside<outer_tag>(level M) "text".Resultado actual: The nested heading is not announced correctly and may be skipped during navigation.
Resultado esperado: Heading elements should not be nested. Each heading should be independent in the DOM structure.
Checkpoint WCAG: 1.3.1 - Info and Relationships
Cómo verificarlo a mano
- Abre la página y activa un lector de pantalla.
- Navega por encabezados — la tecla H en NVDA.
- Comprueba si cada encabezado que ves en pantalla se anuncia como una entrada propia, o si alguno se salta o se fusiona con el anterior.
Limitaciones conocidas
- La revisión lee la página renderizada, no el código fuente. Como los navegadores reparan en silencio algunos anidamientos inválidos, un problema que existe en el código puede no aparecer nunca en el reporte. Ese es el resultado correcto para el usuario, pero significa que el reporte no es una revisión del HTML tal como está escrito.
- Solo mira el anidamiento. Si los niveles de encabezado siguen un orden razonable —un
h4después de unh1sin nada en medio— no forma parte de esta revisión.
Referencia WCAG
Criterio de conformidad 1.3.1 Información y relaciones (Nivel A)