Landmarks, encabezados, listas y regiones

Una persona que ve la pantalla capta la estructura de una página en un segundo: dónde está el menú, cuál es el contenido principal, qué es un título y qué es una lista. Una persona que usa un lector de pantalla solo puede captar esa estructura si está en el código. Esta lección trata de las tres herramientas que la hacen explícita: las regiones o landmarks, los encabezados y las listas. Están detrás de cuatro criterios: 1.3.1 Información y relaciones (A), 2.4.1 Evitar bloques (A), 2.4.6 Encabezados y etiquetas (AA) y 2.4.10 Encabezados de sección (AAA).

Landmarks: el mapa de la página

Los landmarks son regiones con un rol reconocido que permiten saltar directamente de una zona a otra. En NVDA se recorren con la tecla D; en VoiceOver, con el rotor. HTML5 los crea de forma implícita con estos elementos:

Dos reglas de oro. Primera: debe haber un único <main> visible y conviene que todo el contenido visible esté dentro de algún landmark; el contenido «huérfano» fuera de ellos es difícil de encontrar. Segunda: si hay varios landmarks del mismo tipo, dales un nombre que los distinga con aria-label o aria-labelledby.

<header>
  <nav aria-label="Principal">…</nav>
</header>
<main id="contenido">
  <h1>Solicitud de certificado de empadronamiento</h1>
  <nav aria-label="Pasos del trámite">…</nav>
  …
</main>
<aside aria-labelledby="t-rel">
  <h2 id="t-rel">Trámites relacionados</h2>…
</aside>
<footer>…</footer>

Los landmarks son una de las técnicas aceptadas para cumplir 2.4.1 Evitar bloques, junto con los enlaces de salto (skip links) que veremos en el curso de teclado. Conviene ofrecer ambas: los landmarks sirven a quien usa lector de pantalla; el enlace de salto sirve también a quien navega con teclado sin lector.

Encabezados: el índice del contenido

Los encabezados <h1>…<h6> son el método de navegación más usado por las personas usuarias de lectores de pantalla, según las encuestas periódicas de WebAIM. Con la tecla H saltan de uno al siguiente; con 1…6 van a un nivel concreto; y pueden abrir la lista completa de encabezados como si fuera el índice de un libro.

Para que ese índice funcione:

• Un solo <h1> por página, que coincida con el tema de la página (normalmente igual o similar al <title>). HTML permite varios y WCAG no lo prohíbe, pero con uno solo el índice suele ser más claro.
• No saltes niveles hacia abajo: de <h2> se pasa a <h3>, no a <h4>. Subir sí puede saltarse (de <h4> volver a <h2> al cambiar de sección).
• El nivel refleja la jerarquía del contenido, no el tamaño visual. Si el diseño pide un <h3> grande, cámbialo con CSS.
• Los encabezados describen el contenido que sigue (2.4.6). «Información» no describe nada; «Documentación que debes aportar» sí.
• No uses encabezados para dar formato a texto que no encabeza nada (un precio destacado, un eslogan), ni texto en negrita y grande para lo que sí es un encabezado.

<p class="titulo-seccion">Horarios de atención</p>
<div class="h2">Cita previa</div>

El criterio 2.4.10 Encabezados de sección es AAA y pide que cada sección de contenido tenga su encabezado. No es obligatorio en el nivel AA que exige la normativa española, pero en la práctica es la forma natural de organizar un texto largo y conviene seguirlo.

Listas: cuántos elementos y cuáles

Cuando una lista está marcada con <ul>, <ol> o <dl>, el lector anuncia «lista de 5 elementos» y permite saltarla entera o recorrerla elemento a elemento. Si en lugar de eso hay párrafos separados por guiones o <br>, la persona no sabe cuántos elementos hay ni dónde acaba la enumeración. Reglas:

• <ul> para conjuntos sin orden (menús, requisitos, etiquetas); <ol> cuando el orden importa (pasos de un proceso, clasificación).
• <dl>, <dt>, <dd> para pares término-definición, como fichas de datos (Expediente: 2024/0123; Estado: en tramitación).
• Los únicos hijos directos de <ul> y <ol> deben ser <li>. Un <div> intermedio rompe la lista en muchos lectores.
• Ojo con list-style: none: Safari con VoiceOver puede dejar de anunciar como lista las que no tienen viñetas. Si la semántica de lista importa (un menú de navegación), añade role="list" al <ul> para recuperarla.
• No uses listas para maquetar en columnas cosas que no son listas.

Regiones y agrupaciones

Para bloques que no encajan en un landmark estándar pero tienen entidad propia (un panel de filtros, un mapa interactivo, un bloque de estadísticas), usa <section> con nombre accesible, que se convierte en role="region". Sin nombre, <section> es semánticamente un <div>. No conviertas cada tarjeta o cada párrafo en región: diez regiones en una página son ruido y dejan de servir para orientarse. Como orientación, entre tres y ocho landmarks por página suele ser un rango razonable. En la lección «Patrones de estructura para páginas reales» verás cómo se combinan landmarks, regiones, encabezados y listas en las plantillas de portada, listado, ficha y artículo.

Resumen

• Los landmarks (header, nav, main, aside, footer, search, section con nombre) crean el mapa de la página; un solo main y nombres distintos cuando se repite un tipo.
• Los encabezados forman el índice: un h1, sin saltos de nivel hacia abajo, con textos que describan el contenido (2.4.6).
• Texto que parece título pero no es hN, o viceversa, incumple 1.3.1.
• Las listas reales se marcan con ul, ol o dl; solo li como hijos directos.
• Comprueba siempre con la lista de encabezados y de landmarks de un lector de pantalla o de una extensión de inspección.