Jerarquía de encabezados

La jerarquía de encabezados es la práctica de usar los elementos <h1>-<h6> para formar un esquema coherente del contenido de una página. Aplicada correctamente, proporciona a los usuarios de lectores de pantalla una tabla de contenidos gratuita. Aplicada incorrectamente —niveles saltados, encabezados puramente decorativos, múltiples h1 o divs genéricos usados como encabezados—, hace que la página sea ininteligible para los usuarios de tecnología de apoyo.

La estructura básica

<h1>Título del artículo (uno por página)</h1>
  <h2>Sección principal</h2>
    <h3>Subsección</h3>
    <h3>Subsección</h3>
  <h2>Sección principal</h2>
    <h3>Subsección</h3>
      <h4>Sub-subsección</h4>

Las reglas:

1. Un solo <h1> por página — el título principal de la página. Los lectores de pantalla se confunden sobre la identidad de la página cuando hay varios h1.
2. No saltar niveles en orden descendente. Un <h2> puede ir seguido de un <h3> (un nivel más profundo), pero no de un <h4> (dos niveles más profundo). Saltar un nivel indica al lector de pantalla que falta algo en medio.
3. Los encabezados reflejan la estructura del contenido, no el estilo visual. Si un texto tiene aspecto de encabezado grande pero no es el inicio de un nuevo contenido, hay que usar un párrafo con estilos, no un encabezado.
4. Prohibido dejar encabezados vacíos. <h2></h2> carece de sentido. Hay que rellenarlo o eliminarlo.

Por qué les importa a los lectores de pantalla

La operación de navegación más habitual en los lectores de pantalla es «saltar al siguiente encabezado»: la tecla H en JAWS y NVDA, el modo «Encabezados» del rotor en VoiceOver, el control de lectura de encabezados en TalkBack.

Un usuario que abre un artículo largo presiona H repetidamente para hacerse una idea de la estructura del artículo antes de leer nada. Si los encabezados son coherentes, obtiene un esquema gratuito del contenido. Si son meramente decorativos o saltan niveles, obtiene ruido.

Qué falla en producción

• Sin <h1>. La página no tiene encabezado principal. Los lectores de pantalla anuncian el título de la página desde <title>, pero la navegación por encabezados dentro de la página no tiene punto de anclaje. Es habitual en páginas de CMS mal estructuradas donde el título del artículo se muestra como texto con estilos pero nunca se marca como <h1>.
• Múltiples <h1>. «Título del hero» y «título de la primera sección» marcados ambos como <h1>. Los usuarios de lectores de pantalla escuchan dos h1 y no pueden distinguir cuál es el título de la página.
• Niveles saltados. <h1> → <h3> porque el diseño no quería texto con el tamaño de <h2>. La navegación del lector de pantalla lee «nivel de encabezado ausente».
• Divs estilizados como encabezados. <div class="hed-xl">Título de sección</div>. El lector de pantalla no detecta ningún encabezado. Solución: usar el <hN> correcto y aplicar estilos con CSS.
• Encabezados usados para la maquetación. Poner un <h2> en una etiqueta de barra lateral para que parezca un encabezado visualmente, cuando esa etiqueta no es un encabezado en términos de contenido. Usar un párrafo con estilos.

Cómo auditar la jerarquía de encabezados

Tres métodos:

1. Lista de encabezados del lector de pantalla. Abrir Insertar+F7 en NVDA o VO+U → Encabezados. La lista que se muestra debe tener sentido como esquema de la página. Si no lo tiene, corregir el marcado.
2. Extensión de navegador HeadingsMap. Muestra visualmente el esquema de encabezados de la página. Los niveles y las lagunas resultan inmediatamente evidentes.
3. Escaneo con axe-core. Detecta la ausencia de h1, niveles saltados (en algunas configuraciones) y encabezados vacíos.

Por qué la regla de un solo h1 es debatida

HTML5 propuso originalmente que los elementos <section> anidados creaban sus propios ámbitos de encabezado, permitiendo múltiples <h1>. Los navegadores y los lectores de pantalla nunca implementaron este comportamiento. El Grupo de Trabajo WCAG del W3C ha vuelto a la guía «un h1 por página» como orientación vigente. La mayoría de las guías de estilo modernas y las auditorías de accesibilidad aplican la regla de un solo h1.