WCAG 2.4.10: Encabezados de sección

Qué significa esta regla

WCAG 2.4.10 — Encabezados de sección (Nivel AAA) establece: «Se utilizan encabezados de sección para organizar el contenido.» Esto significa que cuando una página web o un documento se divide en varias secciones distintas, cada sección debe tener un encabezado determinable mediante programación que describa su tema o propósito. La intención no es simplemente tener texto con estilo visual que parezca un encabezado, sino usar marcado de encabezado real que transmita una estructura jerárquica tanto a los navegadores como a las tecnologías de asistencia.

En HTML, esto significa usar adecuadamente los elementos nativos de encabezado <h1> a <h6>. Una página con un tema principal debe llevar un <h1>, las secciones principales deben usar <h2>, las subsecciones dentro de estas usan <h3>, y así sucesivamente. El nivel del encabezado debe reflejar la profundidad lógica del contenido, no elegirse arbitrariamente por motivos de estilo visual. Cuando se usa ARIA, el role="heading" combinado con aria-level también es aceptable, aunque siempre se prefieren los elementos nativos de HTML.

Un aprobado según este criterio significa que cada sección de contenido distinta en la página tiene un encabezado que describe con precisión lo que sigue, que el encabezado está marcado semánticamente (no solo como texto grande o en negrita a nivel visual) y que la jerarquía de encabezados refleja lógicamente la organización del contenido del documento. Se produce un fallo cuando las secciones de contenido no tienen encabezado alguno, cuando se omiten niveles de encabezado de forma arbitraria (saltando de <h1> a <h4> sin una razón lógica) o cuando se usa texto con estilo en lugar de elementos de encabezado adecuados para etiquetar una sección.

Es importante tener en cuenta la excepción oficial de WCAG: este criterio se aplica solo cuando la propia página contiene secciones. Las páginas muy cortas con un único tema unificado —como un formulario de inicio de sesión simple sin secciones diferenciadas— no están obligadas a tener múltiples encabezados. El requisito se activa por la presencia de varias áreas de contenido distintas que se benefician de un etiquetado. Además, este criterio no exige una estructura de jerarquía de encabezados específica más allá de la organización lógica; el requisito clave es que existan encabezados y se usen de forma significativa allí donde existan secciones.

Este criterio se clasifica como Nivel AAA, lo que significa que no es obligatorio para la conformidad básica con WCAG 2.2, pero representa una práctica de accesibilidad de primer nivel que mejora significativamente la experiencia de una amplia gama de personas usuarias.

Por qué es importante

Las personas usuarias de lectores de pantalla dependen de los encabezados como su principal medio para navegar por documentos largos y páginas web. Según la encuesta de usuarios de lectores de pantalla de WebAIM, la gran mayoría de las personas usuarias de lectores de pantalla navegan regularmente por encabezados: se sitúa de forma constante entre los métodos de navegación más utilizados. Cuando los encabezados están ausentes o mal estructurados, una persona usuaria de lector de pantalla debe escuchar cada fragmento de contenido secuencialmente desde la parte superior de la página, lo que equivale a obligar a una persona vidente a leer un libro entero sin índice ni títulos de capítulos.

Considere un ejemplo del mundo real: un sitio turco de comercio electrónico que vende productos electrónicos podría tener una página de detalle de producto con secciones que cubren especificaciones del producto, reseñas de clientes, información de envío y una política de devoluciones. Si ninguna de estas secciones tiene un elemento de encabezado, una persona ciega que navega con NVDA en Firefox no puede saltar entre ellas. Debe escuchar todo el contenido o usar estrategias de búsqueda de prueba y error, lo que aumenta significativamente la carga cognitiva y el tiempo necesario para completar la tarea. Con encabezados <h2> adecuados para cada sección, esa misma persona puede pulsar la tecla H para saltar instantáneamente de una sección a otra en cuestión de segundos.

Las personas con discapacidades cognitivas también se benefician sustancialmente. Los encabezados claros actúan como señales, permitiendo que personas con trastornos de atención, dificultades de lectura o problemas de memoria se reorienten rápidamente después de perder la concentración. La Organización Mundial de la Salud estima que aproximadamente 1.3 mil millones de personas viven con algún tipo de discapacidad en todo el mundo, y las condiciones cognitivas y neurológicas representan una parte grande y creciente de esta población.

Las personas con discapacidad motriz que dependen de la navegación solo con teclado o de dispositivos de acceso por pulsador también se benefician porque muchas tecnologías de asistencia utilizan la estructura de encabezados para crear oportunidades de saltar navegación, reduciendo el esfuerzo físico necesario para llegar al área de contenido deseada.

Más allá del acceso para personas con discapacidad, una estructura adecuada de encabezados tiene importantes beneficios de SEO. Los motores de búsqueda utilizan la jerarquía de encabezados para comprender la estructura temática de una página, lo que puede influir en la clasificación y en cómo se muestra el contenido en los resultados de búsqueda. Un esquema de encabezados bien estructurado señala calidad de contenido tanto a las personas usuarias como a los rastreadores. Esto hace que el argumento empresarial para implementar este criterio AAA sea convincente incluso para organizaciones que no están legalmente obligadas a cumplirlo.

Reglas relacionadas de Axe-core

WCAG 2.4.10 requiere pruebas manuales y no puede automatizarse por completo. A continuación se explica por qué las herramientas automatizadas se quedan cortas y qué pueden y no pueden detectar:

• Se requiere prueba manual — Integridad estructural: Herramientas automatizadas como axe-core pueden detectar la presencia o ausencia de elementos de encabezado en una página y pueden señalar problemas como niveles de encabezado omitidos (por ejemplo, saltar de <h1> a <h3>). Sin embargo, no pueden determinar si el contenido de una página se ha dividido lógicamente en secciones o si un encabezado describe con precisión la sección que introduce. Una herramienta puede ver una jerarquía de encabezados correcta y aprobar la comprobación, mientras que la página en realidad tiene cuatro secciones de contenido distintas, tres de las cuales no tienen encabezado alguno. La idoneidad semántica de la ubicación de los encabezados requiere una persona revisora que entienda el propósito y la estructura del contenido.
• Regla de axe-core — heading-order: Esta regla señala los casos en los que se omiten niveles de encabezado de una manera que rompe el esquema lógico del documento (por ejemplo, pasar directamente de <h1> a <h4>). Aunque se trata de una señal de calidad relacionada, aprobar esta regla no garantiza el cumplimiento de 2.4.10, porque la regla solo comprueba el orden relativo de los encabezados existentes: no puede determinar si falta un encabezado en una sección que lo necesita.
• Regla de axe-core — page-has-heading-one: Esta regla comprueba si la página contiene al menos un elemento <h1>, lo cual es un requisito estructural básico. De nuevo, aprobar esta comprobación es una señal positiva, pero no confirma el cumplimiento total de 2.4.10, ya que una página puede tener un <h1> y seguir teniendo varias secciones sin etiquetar por debajo.
• Por qué la automatización completa es imposible: Determinar si una región de contenido constituye una «sección» que merece un encabezado requiere comprender la semántica y el propósito del contenido, una tarea que actualmente requiere juicio humano. Un algoritmo no puede distinguir de forma fiable entre un párrafo coherente que continúa de forma natural lo que le precede y un área temática realmente nueva que merece su propio encabezado etiquetado. Por eso 2.4.10 siempre se indica como criterio que requiere evaluación manual en cualquier auditoría exhaustiva.

Cómo probar

1. Análisis automatizado con axe DevTools o Lighthouse: Instale la extensión de navegador axe DevTools (disponible para Chrome y Firefox) y ejecute un análisis de página completa. Revise cualquier problema relacionado con heading-order y page-has-heading-one. Tenga en cuenta que un análisis automatizado sin errores no confirma el cumplimiento de WCAG 2.4.10: solo despeja el subconjunto de comprobaciones automatizables. Lighthouse en Chrome DevTools también muestra problemas relacionados con encabezados en su auditoría de Accesibilidad; busque las advertencias «Heading elements are not in a sequentially-descending order».
2. Revisión manual de contenido — esquema del documento: Use una extensión de navegador como HeadingsMap (disponible para Chrome y Firefox) para generar un esquema visual de todos los elementos de encabezado de la página. Revise este esquema de forma crítica: ¿refleja con precisión la estructura del contenido de la página? ¿Cada sección distinta está representada por un encabezado? ¿Hay secciones de contenido visibles en la página que no aparecen en el esquema? Si la respuesta es sí, esas secciones carecen de encabezados y la página no cumple 2.4.10.
3. Navegación con lector de pantalla usando NVDA y Firefox: Abra la página en Firefox con NVDA en ejecución. Pulse H para avanzar por los encabezados y Shift+H para retroceder. A medida que se sitúe en cada encabezado, observe si el encabezado anunciado describe con precisión el contenido que le sigue. Observe también si encuentra bloques sustanciales de contenido que nunca se anuncian como pertenecientes a un encabezado. Abra la lista de elementos de NVDA (NVDA+F7), seleccione la pestaña de encabezados y revise la lista completa de encabezados para detectar secciones ausentes o mal etiquetadas.
4. Navegación con lector de pantalla usando VoiceOver y Safari (macOS/iOS): En macOS, active VoiceOver (Command+F5) y abra la página en Safari. Use VO+Command+H para navegar por los encabezados. En iOS, use el rotor (deslice con dos dedos para configurarlo en Encabezados) y luego deslice hacia abajo para moverse por los encabezados. Verifique que todas las secciones de contenido sean accesibles mediante la navegación por encabezados.
5. Navegación con lector de pantalla usando JAWS y Chrome: En JAWS, pulse H para recorrer los encabezados y abra la lista de encabezados con Insert+F6. Revise la lista para comprobar su integridad y jerarquía lógica. Confirme que los encabezados no se usan solo para estilo: solo las etiquetas de secciones genuinas deben aparecer como encabezados.
6. Comprobación de navegación solo con teclado: Usando únicamente el teclado, intente navegar por todas las secciones principales de la página sin usar encabezados. Observe cuántas veces debe pulsar Tab para recorrer los elementos interactivos hasta llegar a cada sección. Esto da una idea de la carga que se impone a las personas usuarias de teclado cuando falta una estructura adecuada de encabezados.

Cómo corregir

Secciones etiquetadas solo con texto con estilo — Incorrecto

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Secciones etiquetadas solo con texto con estilo — Correcto

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Niveles de encabezado omitidos por motivos de estilo — Incorrecto

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Niveles de encabezado omitidos por motivos de estilo — Correcto

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

Sin encabezado para una sección principal de la página — Incorrecto

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

Sin encabezado para una sección principal de la página — Correcto

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    <form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

Rol de encabezado ARIA usado sin aria-level — Incorrecto

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Rol de encabezado ARIA usado sin aria-level — Correcto

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Errores comunes

• Usar clases CSS como .title o .section-header en elementos <p> o <div> en lugar de elementos reales <h1>–<h6>: El estilo visual por sí solo no comunica estructura a las tecnologías de asistencia. El encabezado debe ser un elemento de encabezado genuino o llevar un rol ARIA de encabezado válido con un nivel explícito.
• Elegir niveles de encabezado en función del tamaño de la fuente en lugar de la jerarquía del documento: Seleccionar <h4> porque se muestra con el tamaño visual deseado, cuando lógicamente debería ser un <h2>, rompe el esquema del documento y confunde a las personas usuarias de lectores de pantalla que escuchan «encabezado nivel 4» sin ningún nivel 2 o 3 precedente.
• Aplicar sobrescrituras de font-size o font-weight para reducir visualmente un <h1> en lugar de usar un elemento de encabezado de nivel inferior: Esto crea una discrepancia entre la jerarquía visual y la jerarquía semántica; use CSS para controlar el tamaño y los niveles nativos de encabezado para transmitir la estructura.
• Omitir encabezados en secciones de contenido cargadas dinámicamente (por ejemplo, paneles de pestañas, cuadros de diálogo modales o resultados cargados por AJAX): Cuando se inyecta contenido nuevo en la página, a menudo carece de estructura de encabezados. Cada sección renderizada dinámicamente debe incluir un encabezado adecuado para que las personas que navegan por encabezados no queden atrapadas en una isla de contenido sin etiquetar.
• Usar solo un <h1> para el título de la página y ningún encabezado adicional en una página con cinco o más secciones de contenido distintas: La existencia de un <h1> satisface las comprobaciones automatizadas, pero no cumple 2.4.10 si las secciones principales posteriores no están etiquetadas.
• Anidar encabezados dentro de elementos <button> o <a>: Colocar un encabezado dentro de un elemento interactivo crea roles en conflicto para las tecnologías de asistencia y es HTML no válido. Los encabezados deben etiquetar secciones de contenido, no controles interactivos.
• Usar role='heading' sin especificar aria-level: El nivel implícito predeterminado de ARIA es 2, lo que puede no coincidir con la estructura prevista del documento y producirá silenciosamente un esquema incorrecto si la sección está en un nivel diferente.
• Añadir encabezados decorativos o repetidos — por ejemplo, repetir el título de la página como un <h2> dentro de cada tarjeta de contenido — que generan ruido de encabezados sin valor de navegación significativo: Los encabezados deben describir de forma única y precisa la sección que introducen; los encabezados redundantes reducen la utilidad de la navegación por encabezados para las personas usuarias de lectores de pantalla.
• Ocultar encabezados visualmente con display:none o visibility:hidden en un intento de proporcionar estructura solo para lectores de pantalla: Estas propiedades CSS también ocultan el elemento de las tecnologías de asistencia. Use la técnica estándar de ocultación visual (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) si es necesario que un encabezado esté presente en el árbol de accesibilidad pero no sea visible en pantalla.
• No actualizar la estructura de encabezados cuando se reorganiza el contenido de la página durante un rediseño: Los encabezados añadidos durante el desarrollo inicial suelen quedar obsoletos cuando las secciones de contenido se reordenan, fusionan o sustituyen. Las auditorías de encabezados deben formar parte de cualquier ciclo de revisión de contenido o diseño, no ser una corrección de accesibilidad puntual.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece obligaciones integrales de accesibilidad digital para una amplia gama de entidades que operan en Turquía. La circular se alinea con WCAG 2.2 como estándar técnico para el cumplimiento de la accesibilidad digital y se aplica a instituciones públicas, plataformas de comercio electrónico, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria, empresas de telecomunicaciones con 200,000 o más abonados, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE).

WCAG 2.4.10 — Encabezados de sección es un criterio de Nivel AAA. Esto significa que no se encuentra entre los criterios mínimos legalmente requeridos según la circular, que exige conformidad en los Niveles A y AA para las entidades cubiertas. Sin embargo, la intención más amplia de la circular es garantizar un acceso digital significativo para todas las personas usuarias, y los criterios de Nivel AAA como 2.4.10 se reconocen explícitamente como representativos de una práctica de accesibilidad de primer nivel.

Para las entidades cubiertas —en particular instituciones públicas, bancos, hospitales y grandes proveedores de telecomunicaciones— implementar WCAG 2.4.10 demuestra un compromiso con la accesibilidad que va más allá de los mínimos normativos. En la práctica, las jerarquías de encabezados bien estructuradas también son una condición previa para varios criterios de éxito de nivel AA (como 1.3.1 Información y relaciones y 2.4.6 Encabezados y etiquetas), lo que significa que las organizaciones que aspiran a una conformidad AA completa se acercarán de forma natural al cumplimiento de 2.4.10 como parte de ese esfuerzo.

Los servicios especializados dirigidos a personas con discapacidad, o los servicios digitales ofrecidos por instituciones públicas que atienden a poblaciones ciudadanas diversas, incluidas personas mayores, personas con discapacidades cognitivas o personas usuarias de tecnologías de asistencia, se beneficiarían especialmente de la implementación completa de 2.4.10. El creciente énfasis de Turquía en los servicios de gobierno digital (e-devlet) y la expansión del comercio electrónico hacen que una estructura de contenido sólida sea no solo un requisito de accesibilidad, sino también una prioridad de usabilidad y de gestión del riesgo legal.

Las organizaciones en Turquía que se certifiquen voluntariamente en WCAG 2.2 Nivel AAA —incluido 2.4.10— se posicionan como líderes en accesibilidad, lo que refuerza la confianza en la marca, reduce el riesgo de litigios y amplía su público potencial para incluir a los aproximadamente 8.5 millones de personas con discapacidad en Turquía, según lo informado por el Instituto de Estadística de Turquía (TÜİK).