Estructura de encabezados y regiones

Una forma habitual de leer una página con lector de pantalla es saltar de encabezado en encabezado, así que una página sin elementos h2 se lee como un libro sin capítulos.

Los encabezados son un índice

Quienes ven la página la recorren por encima. Echan un vistazo a las líneas grandes en negrita, encuentran la sección que buscan y empiezan a leer ahí. Quienes usan lectores de pantalla hacen lo mismo con los encabezados. MDN señala que una técnica común es saltar rápido de un encabezado a otro para saber qué contiene una página, y que la mayoría de los lectores de pantalla pueden mostrar una lista de todos los encabezados de la página. Eso solo funciona si los encabezados son elementos reales de h1 a h6. Un párrafo agrandado y en negrita con CSS parece un encabezado, pero se anuncia como texto normal.

WCAG 2.2 lo trata en el criterio de conformidad 1.3.1 Información y relaciones, de nivel A: la estructura que se muestra visualmente también debe estar disponible en el código. El criterio 2.4.6 Encabezados y etiquetas, de nivel AA, agrega que los encabezados deben describir el tema de su sección. Un encabezado que dice "Más" o "Sección 2" pasa la primera prueba y no pasa la segunda.

Tres reglas de MDN

Primero, no saltes niveles. Ve de h1 a h2 y a h3. Quien oye un h4 justo después del h1 se queda preguntándose adónde fueron los niveles que faltan. Segundo, prefiere un solo h1 por página que nombre su contenido, casi como el elemento title. El estándar HTML permite más de uno, pero MDN presenta un solo h1 como la buena práctica habitual. Tercero, no elijas un nivel de encabezado por su tamaño. Si un h3 se ve demasiado pequeño, cambia el tamaño de letra en CSS y conserva el nivel que corresponde a la estructura.

Encabezados que la gente pueda usar

Una lista de encabezados vale lo que valen sus palabras. Pon primero la palabra útil, porque quien recorre una lista de veinte encabezados oye el comienzo de cada uno y sigue: "Horario de atención" funciona mejor que "Cuándo puedes visitarnos". Haz encabezados cortos y distintos entre sí, para que nunca haya dos secciones llamadas "Detalles". Después prueba el esquema. El panel de accesibilidad de las herramientas para desarrolladores del navegador, o la lista de encabezados de un lector de pantalla, muestra solo los encabezados. Léelos seguidos y pregúntate si tienen sentido como índice. Si lo tienen, también salen ganando quienes ven y leen por encima.

Regiones

Los encabezados dividen el contenido; las regiones (landmarks) dividen la página en zonas. Los elementos header, nav, main y footer llevan cada uno un rol incorporado, de modo que un lector de pantalla puede ofrecer una lista de regiones y saltar directamente al contenido principal o a la navegación. Una página normalmente tiene un solo main. Estos roles te los da gratis elegir el elemento correcto, y eso es la primera regla de ARIA en acción: no hace falta ningún atributo extra.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>