Técnica Técnicas generales WCAG 2.2

G141Organizar la página con títulos de sección bien jerarquizados

Nombre oficial en el W3C: Organizar una página mediante encabezados

En pocas palabras

Si una página tiene varias secciones, cada una debe tener su título. Esos títulos se marcan en el código como encabezados y siguen un orden lógico de niveles. Así la página se entiende de un vistazo y se puede recorrer saltando de sección en sección.

Por qué es importante

Las personas que usan lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) suelen moverse por los títulos. Es su forma de «echar un vistazo» a la página.

Sin títulos, o con niveles desordenados, tienen que escuchar todo el contenido para encontrar lo que buscan. Los títulos claros también ayudan a cualquiera a orientarse en una página larga, como unas bases de una convocatoria.

Cómo se hace

Ponga un título a cada sección del contenido.
En HTML, márquelo con h1 a h6. No basta con poner el texto grande o en negrita.
Use un h1 para el título principal de la página.
Respete el orden: después de un h2 va otro h2 o un h3, sin saltarse niveles hacia abajo.
Escriba títulos que describan el contenido, como «Plazos de presentación», y no genéricos como «Más información».

Cómo comprobarlo

Mire la página y anote las secciones que tiene.
Use una extensión del navegador que muestre los encabezados (por ejemplo, HeadingsMap) o el panel de accesibilidad.
Compruebe que cada sección tiene su encabezado y que los niveles siguen un orden lógico.
Con un lector de pantalla, recorra la página por encabezados (en NVDA, tecla H).

Ejemplo

Página de una convocatoria con un título principal, secciones y subsecciones.

<h1>Becas de transporte 2026</h1>
<h2>Requisitos</h2>
<p>…</p>
<h2>Cómo solicitarla</h2>
<h3>En línea</h3>
<p>…</p>
<h3>En persona</h3>
<p>…</p>
<h2>Plazos</h2>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G141 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Páginas con contenido organizado en secciones.

Descripción

El objetivo de esta técnica es garantizar que las secciones tienen encabezados que las identifican. El criterio de conformidad 1.3.1 Información y relaciones exige que los encabezados estén marcados de forma que puedan identificarse por software.

En HTML, esto puede hacerse con los elementos de encabezado de HTML (h1, h2, h3, h4, h5 y h6). Estos permiten que los agentes de usuario identifiquen automáticamente los encabezados de sección. Otras tecnologías utilizan otras técnicas para identificar los encabezados. Para facilitar la navegación y la comprensión de la estructura general del documento, los autores deberían usar encabezados correctamente anidados (p. ej., h1 seguido de h2, h2 seguido de h2 o h3, h3 seguido de h3 o h4, etc.).

Ejemplos

Encabezados utilizados para organizar una página HTML

Una página sobre técnicas de cocina utiliza un elemento h1 para el título general, elementos h2 para las secciones principales sobre cocinar con aceite frente a cocinar con mantequilla, y elementos h3 para las subsecciones sobre técnicas de cocina con aceite.

<!doctype html>
<html lang="en">
  <head>
    <title>Cooking techniques</title>
  </head>
  <body>
    <h1>Cooking techniques</h1>
    ... some text here ...
    <h2>Cooking with oil</h2>
    ... text of the section ...
    <h3>Sautéeing</h3>
    ...
    <h3>Deep frying</h3>
    <h2>Cooking with butter</h2>
    ... text of the section ...
  </body>
</html>

Pruebas

Procedimiento

Examinar una página con contenido organizado en secciones.
Comprobar que existe un encabezado para cada sección.

Resultados esperados

La comprobación n.º 2 es verdadera.

Recursos

WebAIM: Semantic Structure (estructura semántica)
HTML - Los elementos h1, h2, h3, h4, h5 y h6

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G141 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.