Encabezados, párrafos, listas y jerarquía de la información

Una persona que ve la página capta su estructura de un vistazo: títulos grandes, bloques de texto, viñetas. Una persona que usa lector de pantalla, o que navega con teclado, o que amplía la pantalla al 400 %, solo capta esa estructura si está codificada de verdad en el documento. Esta lección explica cómo dar estructura real a un contenido con encabezados, párrafos y listas, y qué criterios WCAG están en juego.

Por qué la estructura tiene que ser semántica

El criterio 1.3.1 Información y relaciones (nivel A) exige que la información que se transmite visualmente (esto es un título, esto es una lista, esto es una tabla) esté también disponible mediante programación. En la práctica significa que un título debe ser un elemento <h2>, no un párrafo en negrita y tamaño grande. La diferencia no se ve, pero se oye: el lector de pantalla anuncia «encabezado nivel 2» y permite saltar directamente a él con la tecla H, o abrir una lista con todos los encabezados de la página para navegar como por un índice.

<!-- Incorrecto: parece un título pero no lo es -->
<p><strong><span class="grande">Cómo pedir cita</span></strong></p>

<!-- Correcto: es un título de verdad -->
<h2>Cómo pedir cita</h2>

Si trabajas en un gestor de contenidos (WordPress, Drupal, un CMS corporativo), esto se traduce en una regla sencilla: usa siempre el selector de «Título 2», «Título 3», etc. del editor, nunca la negrita ni el tamaño de fuente para simular un título.

Jerarquía de encabezados

Los encabezados forman un esquema, como el índice de un libro. Las reglas prácticas son:

• Un único <h1> por página, que coincide (o casi) con el título de la página. En la mayoría de los CMS lo genera la plantilla; el redactor empieza en <h2>.
• No saltar niveles hacia abajo: después de un <h2> viene un <h3>, no un <h4>. Sí se puede «subir» varios niveles al cerrar una sección.
• No elegir el nivel por el aspecto. Si el <h3> de tu plantilla te parece pequeño, es un problema de diseño, no una razón para usar <h2>.
• Cada encabezado describe el contenido que le sigue. El criterio 2.4.6 Encabezados y etiquetas (nivel AA) exige precisamente eso: que los encabezados describan el tema o propósito.
• Evita encabezados vacíos o decorativos: un <h2> sin texto o con solo un icono confunde la navegación.

h1 Empadronarse en el municipio
  h2 Quién puede empadronarse
  h2 Documentación necesaria
    h3 Si eres ciudadano español
    h3 Si eres ciudadano extranjero
  h2 Cómo presentar la solicitud
    h3 Por internet
    h3 Presencialmente
  h2 Plazos y resolución

El criterio 2.4.10 Encabezados de sección (AAA) recomienda, además, que cada sección de contenido tenga su propio encabezado. No es obligatorio en AA, pero es una buena práctica que cuesta poco.

Párrafos que se pueden leer en pantalla

En pantalla, y especialmente en el móvil, los párrafos largos se convierten en muros de texto. Recomendaciones:

• Entre 40 y 70 palabras por párrafo, con la idea principal en la primera frase.
• Un salto de párrafo real (<p>), no dos <br> seguidos. Los saltos de línea forzados no crean párrafos para el lector de pantalla y rompen el reflow al cambiar el ancho de pantalla.
• Texto alineado a la izquierda; el justificado crea «ríos» de espacio en blanco que dificultan la lectura a personas con dislexia (el criterio 1.4.8 Presentación visual, AAA, lo desaconseja de forma explícita).
• Usa <strong> para destacar algo importante, con moderación. Si destacas media página, no destacas nada.

Listas: cuándo y cómo

Las listas son el recurso más infrautilizado de la redacción web. Un lector de pantalla anuncia «lista de 4 elementos» y permite saltarla o recorrerla, lo que da a la persona una idea inmediata de la extensión del contenido. Para que eso ocurra, la lista tiene que ser una lista real (<ul> u <ol>), no líneas que empiezan con un guion o un asterisco escrito a mano.

• Lista numerada (<ol>): cuando el orden importa: pasos de un proceso, clasificación.
• Lista con viñetas (<ul>): cuando el orden no importa: requisitos, opciones, documentos.
• Lista de definiciones (<dl>): para pares término-definición, como un glosario.

Mantén los elementos de una lista gramaticalmente paralelos (todos empiezan con un verbo, o todos con un nombre) y evita listas de un solo elemento o con más de 8-10 elementos sin agrupar.

Cómo comprobarlo

No hace falta ser técnico para verificar la estructura de una página:

• Extensiones como HeadingsMap (Firefox y Chrome) o la pestaña «Structure» de WAVE muestran el esquema de encabezados. Si el esquema no tiene sentido leído solo, la página no tiene estructura.
• Desactiva los estilos (en Firefox: Ver > Estilo de página > Sin estilo). Lo que queda es lo que «ve» un lector de pantalla: ¿se distinguen los títulos y las listas?
• En NVDA o VoiceOver, abre la lista de encabezados (Insert+F7 en NVDA) y comprueba que puedes ir a cualquier sección en un par de pulsaciones.

Resumen

• 1.3.1 Información y relaciones exige que títulos, listas y tablas estén codificados semánticamente, no solo con apariencia visual.
• Jerarquía de encabezados: un h1, sin saltos de nivel hacia abajo, cada encabezado describe su sección (2.4.6).
• Párrafos de 40-70 palabras, alineados a la izquierda, con la idea principal al principio.
• Usa listas reales (ul, ol, dl) para pasos, requisitos y glosarios; nunca guiones escritos a mano.
• Comprueba con HeadingsMap, WAVE o la lista de encabezados del lector de pantalla.