Técnica HTML WCAG 2.2
H42Usar h1-h6 para identificar los encabezados
En resumen
Esta técnica pide marcar los títulos y subtítulos del contenido con los elementos de encabezado h1 a h6, con el nivel que corresponda a su jerarquía, y no usar esos elementos para texto que no sea un encabezado. Los lectores de pantalla anuncian los encabezados y permiten saltar entre ellos, así que una estructura correcta ayuda a orientarse y a localizar rápidamente la información en cualquier página.
Ejemplo práctico
En una página de trámite de un ayuntamiento, los encabezados h1-h6 deben reflejar la jerarquía del contenido. El error típico es elegir el nivel según el tamaño de letra que trae por defecto cada etiqueta.
Así no: Niveles elegidos por el tamaño de letra
«Requisitos» y «Cómo solicitarla» se han marcado como h5 porque se querían pequeños, y «Plazo de presentación», que es una subsección de «Cómo solicitarla», como h3 porque se quería más grande. La lista de encabezados del lector de pantalla presenta una jerarquía que no corresponde al contenido.
<h1>Ayudas al alquiler para jóvenes 2026</h1>
<p>Ayuda mensual de hasta 250 € para personas de 18 a 35 años.</p>
<h5>Requisitos</h5>
<ul>
<li>Estar empadronado en el municipio.</li>
<li>Ingresos inferiores a 3 veces el IPREM.</li>
</ul>
<h5>Cómo solicitarla</h5>
<p>Presente la solicitud en la sede electrónica o en el Registro General.</p>
<h3>Plazo de presentación</h3>
<p>Del 1 al 30 de noviembre de 2026.</p>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Niveles según la jerarquía y tamaño con CSS
El nivel de cada encabezado indica su posición en la estructura: h1 para el título, h2 para las secciones y h3 para la subsección. El tamaño se controla con CSS, de forma independiente al nivel.
<style>
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
</style>
<h1>Ayudas al alquiler para jóvenes 2026</h1>
<p>Ayuda mensual de hasta 250 € para personas de 18 a 35 años.</p>
<h2>Requisitos</h2>
<ul>
<li>Estar empadronado en el municipio.</li>
<li>Ingresos inferiores a 3 veces el IPREM.</li>
</ul>
<h2>Cómo solicitarla</h2>
<p>Presente la solicitud en la sede electrónica o en el Registro General.</p>
<h3>Plazo de presentación</h3>
<p>Del 1 al 30 de noviembre de 2026.</p>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Elegir h4 o h5 para que el título salga pequeño en lugar de ajustar el tamaño con CSS.
- Logotipo marcado como h1 en todas las páginas, mientras el título real del contenido queda en h2.
- Widgets de barra lateral y pie de página con h2-h4 que desordenan la lista de encabezados.
- Saltos de nivel al pasar de una plantilla a otra porque cada bloque del constructor visual fija su propia etiqueta.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
HTML
Descripción
El objetivo de esta técnica es usar el marcado de encabezados de HTML para proporcionar código semántico a los encabezados del contenido. El marcado de encabezados permite a las tecnologías de asistencia presentar al usuario la condición de encabezado de un texto. Un lector de pantalla puede reconocer el código y anunciar el texto como un encabezado con su nivel, emitir un pitido o proporcionar algún otro indicador sonoro. Los lectores de pantalla también pueden navegar por el marcado de encabezados, lo que puede ser una forma eficaz de que sus usuarios encuentren más rápidamente el contenido que les interesa. Las tecnologías de asistencia que modifican la presentación visual creada por el autor también podrán ofrecer una presentación visual alternativa adecuada para los encabezados que puedan identificarse mediante el marcado de encabezados.
Ejemplos
Organización jerárquica de los encabezados
En el siguiente ejemplo, los encabezados se usan en una disposición jerárquica, con h3 como subsección de h2, que a su vez es una subsección de h1.
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat ...</p>
<h2>Fruit</h2>
<p>A fruit is a structure of a plant that contains its seeds ...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree ...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin ...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ...</p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar group
of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
sweetness of their pods ...</p>Encabezados en una maquetación de tres columnas
En este ejemplo, el contenido principal de la página está en la columna central de una página de tres columnas. El título del contenido principal coincide con el título de la página y está marcado como h1, aunque no sea lo primero que aparece en la página. El contenido de la primera y la tercera columna es menos importante y está marcado con h2.
Es importante señalar que el código del ejemplo siguiente no pretende prescribir qué nivel de encabezado debe usarse para una sección concreta de la página web. En el ejemplo, la maquetación podría presentarse con el primer encabezado de cada columna en el mismo nivel lógico (por ejemplo, un h1) o, como ocurre en el ejemplo, con un nivel lógico que refleja su importancia con respecto al contenido principal.
<!doctype html>
<html lang="en">
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<nav class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</nav>
<!-- main contents -->
<main class="main">
<h1>Stock Market up today</h1>
<!-- content here -->
</main>
<!-- right panel -->
<aside class="side-bar">
<h2>Related links</h2>
<!-- content here -->
</aside>
</body>
</html>Pruebas
Procedimiento
- Comprobar que se usa marcado de encabezado cuando el contenido es un encabezado y que dicho marcado indica el nivel de encabezado adecuado para el contenido.
- Comprobar que no se usa marcado de encabezado cuando el contenido no es un encabezado.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
-
HTML: los elementos
h1,h2,h3,h4,h5yh6. -
MDN
<h1>-<h6>: The HTML Section Heading elements (los elementos de encabezado de sección de HTML). - Nomensa: How to structure headings for web accessibility (web.archive.org) (cómo estructurar los encabezados para la accesibilidad web).
- WebAIM: Semantic Structure: Regions, Headings, and Lists (estructura semántica: regiones, encabezados y listas).
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H42 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
