¿Qué es la jerarquía de encabezamientos?
Los encabezamientos HTML (H1, H2, H3, H4, H5, H6) estructuran el contenido de una página de forma jerárquica, como el sumario de un documento. H1 es el título principal, H2 sueño las secciones principales, H3 su subsecciones dentro de un H2, y así sucesivamente.
El criterio WCAG 1.3.1 exige que la información y las relaciones del contenido sean perceptibles programáticamente. Aplicado a los encabezamientos, significa que la estructura tiene que tener sentido para un lector de pantalla, no solo visualmente.
¿Por qué es importante para la accesibilidad?
Los usuarios de lectores de pantalla navegan frecuentemente por una página saltando de encabezamiento en encabezamiento, igual que una persona con visión escanea visualmente los títulos de un artículo. Cuando un lector de pantalla como NVDA o JAWS lee una página, permite al usuario pedir una lista de todos los encabezamientos para navegar directamente.
Si una página salta de H1 a H3 directamente, el lector de pantalla informa de un alto de nivel que desorientación el usuario. Si una página tiene múltiples H1, el usuario no puede identificar cuál es el título principal. Si los encabezamientos se usan por estilo (uno H3 pequeño porque es «bonito») en lugar de estructura, el documento no tiene sentido auditivo.
Reglas básicas
Una sola H1 por página
Cada página tiene que tener exactamente un H1 que describa el contenido principal. Tiene que coincidir o ser muy similar en el título de la página y al meta title. Tener dos H1 confunde los lectores de pantalla y diluye la señal SEO.
No saltar niveles
Puedes pasar de H2 a H3, de H3 a H4, pero no puedes saltar de H2 a H4 directamente. La orden tiene que ser secuencial en profundidad.
Los encabezamientos su por estructura, no por estilo
Si quieres que un texto sea grande y en negrita, usa CSS. No usas H2 porque te parece grande. No usas H5 porque es pequeño y discreto. La elección del nivel tiene que basarse en la estructura del contenido.
Ejemplos de jerarquía correcta e incorrecta
— MAL: salto de nivel —
H1: Servicios de accesibilidad web
H3: Auditoría WCAG (falta el H2!)
H3: Implementación de mejoras
— MAL: múltiples H1 —
H1: Servicios de accesibilidad web
H1: Por qué elegir webaccessible.cat
— CORRECTO —
H1: Servicios de accesibilidad web
H2: Auditoría WCAG
H3: Revisión automática
H3: Revisión manual
H2: Implementación de mejoras
H2: Testing y validación
Errores habituales en WordPress y Divi
En WordPress, un error frecuente es usar el título del widget de sidebar como H2 cuando el contenido principal tiene H2 para las secciones. Divi por su parte permite configurar el nivel de encabezamiento de cada módulo de título, pero muchos usuarios lo dejan por defecto sin revisar si es coherente con la estructura.
Otro error común: el título principal de la página es un H2 porque «queda mejor visualmente» pero Divi lo renderiza como H2, y entonces las secciones de bajo su H3. Resultado: no hay H1 en la página.
Como detectar y corregir los errores
La herramienta de autoevaluación de webaccessible.cat detecta automáticamente errores de jerarquía de encabezamientos: saltos de nivel, carencia de H1, H1 duplicados. El informe muestra la estructura actual e indica donde hay que hacer ajustes.
Para corregirlo a Divi, ve a cada módulo de título o texto y comprueba el campo «Heading Level» a las opciones de contenido. Ajústalo para mantener la jerarquía lógica. Recuerda que el título de la página (el campo Title de WordPress) suele renderizarse como H1 a la mayoría de templates.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.