Estructura de encabezados y accesibilidad: cómo usar h1 a h6

Por qué la estructura de encabezados importa para la accesibilidad

Quien ve la pantalla identifica un encabezado de un vistazo. La documentación del criterio 1.3.1 lo describe así: los encabezados suelen mostrarse en una fuente más grande y en negrita, separados de los párrafos por líneas en blanco. Esa estructura se percibe gracias a la presentación visual.

El problema aparece cuando la presentación cambia. El W3C cita dos situaciones: el contenido lo lee un lector de pantalla, o el usuario sustituye la hoja de estilos del autor por la suya. Por eso el criterio 1.3.1 (nivel A) exige que la información, la estructura y las relaciones transmitidas por la presentación puedan determinarse mediante programación o estén disponibles en texto.

Un encabezado bien marcado cumple esa condición: su existencia y su rango quedan expuestos a los navegadores y a las tecnologías de apoyo, que pueden ofrecer navegación dentro de la página. Un párrafo simplemente en negrita no expone su función de encabezado.

Los seis niveles de encabezado y la regla de anidamiento

El tutorial del W3C establece una regla central: anidar los encabezados según su rango (o nivel). El rango 1 es el más importante y el rango 6 el menos importante. Un encabezado de rango igual o superior abre una nueva sección; uno de rango inferior abre una subsección que forma parte de la sección de rango superior.

Saltarse rangos puede resultar confuso y conviene evitarlo en la medida de lo posible. Hay un caso en el que es aceptable: al cerrar subsecciones.

• A evitar: un h2 seguido directamente de un h4, sin h3 entre ambos.
• Aceptable: un h4 seguido de un h2, que cierra las subsecciones abiertas e inicia una nueva sección.
• Excepción: en las zonas fijas de la página, como una barra lateral, el rango de los encabezados no debe cambiar según los rangos usados en el contenido principal, porque ahí la coherencia entre páginas es más importante.

Dónde va el h1: los ejemplos del W3C

El tutorial presenta varios ejemplos de organización. En el caso más sencillo, los encabezados solo organizan bloques de texto, por ejemplo el contenido principal: el ejemplo tiene un h1 seguido de tres h2.

Primer ejemplo de página completa: el encabezado de rango 1 es el primer encabezado del documento. El menú de navegación, la barra lateral, el pie de página y el contenido principal llevan encabezados un rango por debajo, como h2. Dentro del contenido, una subsección es un h3, dividida a su vez por un h4; el h2 siguiente cierra ambas subsecciones a la vez.

Segundo ejemplo: el encabezado principal no es el nombre del sitio sino el encabezado del contenido, de rango 1. La página empieza con un h2 para el menú de navegación, luego un h2 para la barra lateral y después el h1. Todos los demás encabezados, incluido el pie de página, son h2, y los subtítulos del contenido también son de rango 2, al mismo nivel que los demás encabezados estructurales.

En nuestra opinión, lo esencial no es la posición del h1 en el código, sino que el rango de cada encabezado corresponda al lugar de la sección que introduce.

Elegir un encabezado por su tamaño: un error que evitar

En nuestra opinión, elegir un nivel de encabezado porque su aspecto encaja (un h4 porque es «más pequeño», un h1 porque es «más grande») puede producir un rango que ya no corresponde a la organización real del contenido y, por tanto, romper el anidamiento que recomienda el W3C.

Entre las técnicas del criterio 1.3.1, algunas se refieren al marcado de la estructura: H42 (usar h1-h6 para identificar encabezados), ARIA12 (usar role=heading para identificar encabezados), G115 (usar elementos semánticos para marcar la estructura). Otras se refieren a la presentación: C22, técnica recomendada (usar CSS para controlar la presentación visual del texto), y G140, técnica suficiente (separar la información y la estructura de la presentación para permitir distintas presentaciones). Nuestra recomendación se desprende de ello: elegir el nivel según la estructura y ajustar el tamaño con CSS.

También existe el error contrario: un texto con estilo grande y en negrita para parecer un encabezado, sin marcado de encabezado. Corresponde al fallo F2, definido como un fallo del criterio 1.3.1 por usar cambios en la presentación del texto para transmitir información sin el marcado o el texto adecuados. De forma más general, el fallo F43 cubre el uso de marcado estructural de una manera que no representa las relaciones del contenido.

Encabezados y regiones de la página

Los encabezados también sirven para etiquetar las regiones de una página. El tutorial recomienda usar aria-labelledby para asociar un encabezado con su región y recuerda que los encabezados visibles ayudan a todos los usuarios a identificar esas regiones.

La documentación del criterio 1.3.1 incluye además, entre sus técnicas suficientes, ARIA13 (usar aria-labelledby para nombrar regiones y landmarks), ARIA11 (usar landmarks ARIA para identificar regiones de una página) y H101 (usar elementos HTML semánticos para identificar regiones de una página).

Criterios WCAG y técnicas que conviene conocer

El tutorial «Headings» vincula los encabezados con cuatro criterios de conformidad de distintos niveles. Indica que ofrece buenas prácticas que combinan esos niveles.

• 1.3.1 Info and Relationships, nivel A.
• 2.4.1 Bypass Blocks, nivel A.
• 2.4.6 Headings and Labels, nivel AA.
• 2.4.10 Section Headings, nivel AAA.
• Técnicas relacionadas: G130 (proporcionar encabezados descriptivos), G141 (organizar una página mediante encabezados), H69 (colocar un elemento de encabezado al principio de cada sección de contenido), H80 (identificar el propósito de un enlace mediante su texto combinado con el encabezado anterior) y PDF9 (marcar los encabezados en documentos PDF).

Cómo revisar la estructura de encabezados de su página

La documentación del criterio 1.3.1 propone una forma de comprobarlo: acceder a la información de manera secuencial, a través de distintas modalidades. Aplicado a los encabezados, en nuestra opinión consiste en preguntarse si la estructura sigue siendo comprensible sin la presentación visual. Esta es una lista de control basada en las reglas anteriores.

Para detectar rápidamente los problemas en todas sus páginas, puede lanzar una prueba gratuita y después activar una supervisión continua que detecte las regresiones en cada actualización del sitio.

• ¿Todo texto que visualmente funciona como encabezado está marcado con un elemento h1 a h6 (o role=heading)?
• ¿Los rangos están anidados, sin saltos como un h2 seguido directamente de un h4?
• ¿Los niveles se eligieron según la estructura y no según su tamaño en pantalla?
• ¿Los encabezados de las zonas fijas, como la barra lateral, mantienen el mismo rango en todas las páginas?
• ¿Las regiones importantes empiezan con un encabezado visible, asociado mediante aria-labelledby si hace falta?

Preguntas frecuentes

Más sobre el tema en Conformly

• Criterio RGAA 9.1 explicado en detalle
• Criterio RGAA 9.2 explicado en detalle
• Escáner RGAA gratuito para su sitio

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Tutoriel titres
• W3C — Comprendre 1.3.1