Los niveles de encabezado solo deben aumentar de uno en uno

Los encabezados (h1 a h6) sirven como un esquema estructural de tu página. Los usuarios videntes pueden escanear visualmente una página y comprender su organización a través del tamaño de las fuentes y el peso visual, pero los usuarios de lectores de pantalla dependen completamente de niveles de encabezado correctamente marcados para lograr la misma comprensión. Cuando se saltan niveles de encabezado — por ejemplo, saltando de un h2 a un h4 — se crea confusión porque los usuarios no pueden saber si se perdieron una subsección o si la estructura simplemente es incorrecta.

Esta regla afecta principalmente a usuarios que son ciegos, sordociegos, o tienen discapacidades de movilidad y dependen de tecnología asistiva para navegar. Los lectores de pantalla proporcionan atajos de teclado que permiten a los usuarios saltar entre encabezados, creando efectivamente una tabla de contenidos para la página. Si la jerarquía de encabezados tiene saltos, los usuarios pueden perder tiempo intentando encontrar contenido que asumen que existe en el nivel faltante, o pueden malinterpretar la relación entre las secciones.

Esta es una regla de mejores prácticas de Deque. Aunque se alinea con la intención del Criterio de Éxito 1.3.1 de WCAG (Información y relaciones) y el Criterio de Éxito 2.4.6 (Encabezados y etiquetas), el ordenamiento secuencial de los niveles de encabezado no es un requisito explícito de WCAG. Sin embargo, mantener un orden lógico de encabezados se considera ampliamente esencial para contenido utilizable y accesible.

Cómo solucionarlo

1. Audita la estructura de tus encabezados. Revisa todos los encabezados de la página y verifica que sigan un orden secuencial. Un h1 debe ir seguido de un h2, un h2 de un h3, y así sucesivamente. Puedes volver a un nivel superior en cualquier momento (por ejemplo, de h3 a h2), pero nunca debes saltar niveles al descender.
2. Comienza el contenido principal con un h1. Los usuarios de lectores de pantalla pueden saltar directamente al primer h1 de una página, así que colocarlo al comienzo de tu contenido principal les permite saltar la navegación y otros preámbulos.
3. No uses encabezados para estilo visual. Si necesitas que el texto se vea más grande o en negrita, usa CSS en lugar de elementos de encabezado. El marcado de encabezados solo debe usarse para encabezados reales que describan el contenido que sigue.
4. Lee solo los encabezados. Una prueba rápida: lee solo los encabezados de tu página. ¿Te dan una idea clara de la estructura y contenido de la página? Si no, revísalos.

Ejemplos

Incorrecto: Niveles de encabezado saltados

Este ejemplo salta de h1 a h3, saltándose completamente el nivel h2.

<h1>Photography Basics</h1>
<p>Learn the fundamentals of photography.</p>

<h3>Understanding ISO</h3>
<p>ISO controls the sensor's sensitivity to light.</p>

<h3>Choosing an Aperture</h3>
<p>Aperture affects depth of field and light intake.</p>

Correcto: Niveles de encabezado secuenciales

Los encabezados siguen un orden lógico sin saltar ningún nivel.

<h1>Photography Basics</h1>
<p>Learn the fundamentals of photography.</p>

<h2>Understanding ISO</h2>
<p>ISO controls the sensor's sensitivity to light.</p>

<h2>Choosing an Aperture</h2>
<p>Aperture affects depth of field and light intake.</p>

Correcto: Anidación más profunda con jerarquía adecuada

Cuando el contenido tiene subsecciones, cada nivel se incrementa de uno en uno. Puedes volver a un nivel superior al comenzar una nueva sección principal.

<h1>Setting Exposure Manually on a Camera</h1>
<p>Manual exposure involves three key settings.</p>

<h2>Set the ISO</h2>
<p>Start by choosing an ISO value.</p>

  <h3>Low Light Conditions</h3>
  <p>Use a higher ISO in dim environments.</p>

  <h3>Bright Light Conditions</h3>
  <p>Use a lower ISO outdoors in sunlight.</p>

<h2>Choose an Aperture</h2>
<p>Aperture is measured in f-stops.</p>

<h2>Set a Shutter Speed</h2>
<p>Shutter speed controls motion blur.</p>

Incorrecto: Usar encabezados para estilo visual

Aquí, se usa un h4 no porque encaje en la jerarquía del documento, sino porque el desarrollador quería texto más pequeño.

<h1>Our Services</h1>
<p>We offer a range of professional services.</p>

<h4>Contact us today for a free quote!</h4>

Correcto: Usar CSS en lugar de marcado de encabezado para estilo

<h1>Our Services</h1>
<p>We offer a range of professional services.</p>

<p class="callout">Contact us today for a free quote!</p>

Learn more:

Deque Reference

Deque University - How To Fix

→

accessibility.psu.edu

PennState Accessibility - Heading Tags

→