Encabezados de sección

Qué exige este criterio

Cuando una página está dividida en secciones, cada sección debe tener un encabezado programático. El criterio de conformidad no exige que todas las páginas estén estructuradas en secciones —las páginas breves con un único propósito (por ejemplo, una pantalla de inicio de sesión) son perfectamente válidas sin subencabezados—. Sin embargo, cuando existen secciones, estas necesitan marcado real <h1>–<h6> para que la tecnología de apoyo pueda construir un esquema de encabezados.

Este criterio se sitúa en el nivel AAA, pero la práctica subyacente —usar encabezados reales— está también implícita en el criterio 1.3.1 (Información y relaciones) en el nivel A, de modo que la mayoría de los sitios accesibles lo cumplen de forma incidental.

Cómo cumplirlo

• Usar <h1> para el título de la página (una sola vez por página) y descender de forma ordenada mediante <h2> y <h3> para las secciones anidadas, sin saltar niveles.
• Sustituir los <div class="heading"> y los <p> con estilo de «encabezado» por etiquetas de encabezado reales.
• Iniciar con un encabezado cada sección diferenciada del contenido de formato largo: artículos, páginas de documentación, paneles de configuración con pestañas.
• Para componentes de tarjeta que actúan como colecciones de secciones similares, asignar a cada tarjeta un encabezado en el nivel jerárquico adecuado.
• Validar el esquema de encabezados con el algoritmo de esquema HTML5 (axe DevTools, la extensión de navegador headingsMap o el validador del W3C).

Fallos habituales

• Párrafos en negrita que simulan ser encabezados: visualmente convincentes, pero invisibles para la lista de encabezados de un lector de pantalla.
• Niveles de encabezado omitidos (<h1> que salta directamente a <h4>) porque el equipo de contenidos eligió los niveles según el tamaño de la fuente y no según la jerarquía.
• Múltiples elementos <h1> en una sola página (aceptable en los esquemas HTML5, pero rompe la navegación en la mayoría de las tecnologías de apoyo).
• Todas las secciones etiquetadas como <h2> independientemente de su profundidad de anidamiento, lo que aplana por completo el esquema.
• Texto de destacado visual (hero) marcado como <h1> mientras el verdadero título de la página queda por debajo como <h2>.

Por qué es importante

Para los usuarios de lector de pantalla, el esquema de encabezados es la tabla de contenidos. JAWS y NVDA lo presentan en un diálogo (Insert+F6 en JAWS); VoiceOver lo muestra en el rotor. Una página sin encabezados, o con encabezados usados únicamente para el énfasis visual, obliga a esos usuarios a recorrer el contenido línea por línea. Incluso con un compromiso solo con el nivel AA, tratar los encabezados de sección como una norma básica de redacción genera beneficios directos en SEO, reutilización de contenidos y coherencia editorial.