Día 13. Encontré un artículo

Introducción

Cuando se creó HTML hace muchos años, el mundo era muy distinto. Quienes escribieron la especificación se inspiraron en documentos de texto, donde se sucedían párrafos, listas, tablas, imágenes y, por supuesto, encabezados. Como en los trabajos escolares: el encabezado más grande es el título, y los más pequeños indican las partes o los capítulos.

Encabezados y secciones implícitas

Desde entonces, HTML tiene seis niveles de encabezado: de h1 a h6. Dan título al contenido que viene después y forman las llamadas secciones implícitas, que son divisiones lógicas de la página. Se llaman implícitas porque no tienen una etiqueta de cierre propia: el siguiente encabezado marca el límite.

<h1>Comida</h1>
  <h2>Frutas</h2>
  <p>Deliciosas</p>
    <h3>Manzanas</h3>
    <p>¡Lo máximo!</p>

Por este sistema de secciones implícitas, la especificación recomienda no usar elementos h* para el texto que acompaña a un encabezado. Ese texto es un párrafo normal; un encabezado debe identificar una parte del contenido. La especificación incluye una sección con ejemplos de marcado para elementos complejos: subtítulos, rutas de navegación, diálogos… Vale la pena leerla.

La etiqueta section

Es mejor indicar las secciones de forma explícita con el elemento section. Los dos fragmentos expresan la misma estructura, pero este es mucho más claro, aunque ocupe más espacio.

<h1>Comida</h1>
<section>
  <h2>Frutas</h2>
  <p>Deliciosas</p>
  <section>
    <h3>Manzanas</h3>
    <p>¡Lo máximo!</p>
  </section>
</section>

Niveles de encabezado

¡Muy bien! Con las secciones explícitas, el anidamiento deja clara la relación entre las partes. ¿Y si el navegador dedujera el nivel de cada encabezado? Porque eso de contar h1, h2, h… ya me perdí. Así sería más fácil mover bloques de código. A quienes crearon HTML5 se les ocurrió lo mismo y describieron en la especificación un algoritmo para generar el esquema del documento. Permitía usar solo h1 e indicar la importancia mediante el anidamiento de elementos estructurales como article y section.

<h1>Comida</h1>
<section>
  <h1>Frutas</h1>
  <section>
    <h1>Manzanas</h1>
  </section>
</section>

La idea entusiasmó a muchos desarrolladores, que enseguida empezaron a usarla. Pero hubo un problema: ningún navegador, lector de pantalla ni buscador llegó a implementar ese algoritmo. En esas páginas, todos los encabezados gritan que son el número uno y los más importantes. Y si todo es importante, nada lo es.

No lo hagas así; la propia especificación ya lo desaconseja. Debemos elegir los niveles de encabezado. No es tan difícil: una página típica rara vez necesita más de tres niveles de estructura. Así que vale la pena prestarles atención.

No es tan sencillo

Un momento. Le pongo una clase a un div y todos ven que es el encabezado más grande. Le pongo otra y el encabezado se ve más pequeño. Está clarísimo. ¿Para qué complicarse con los niveles si existe CSS?

<div class="big-black">
  Frutas gratis
</div>
<div class="small-grey">
  Solo si pagas
</div>

Es cierto: los estilos crean una jerarquía visual. El texto grande y negro parece más importante; el pequeño y gris, menos. Pero eso solo funciona si puedes ver la página.

Hay dos grupos importantes que interpretan tu página a partir de las etiquetas. No se fijan en lo grande y negro que sea tu div: buscan h1 para encontrar lo más importante. Son los lectores de pantalla y los robots. Lo de los robots es fácil de entender: son los buscadores, y hay que ayudarlos a comprender tus páginas.

Los lectores de pantalla los usan personas con visión reducida o que no pueden ver la interfaz, y también quienes no pueden manejar el navegador de la forma habitual. VoiceOver, NVDA y JAWS leen el contenido en voz alta y usan las etiquetas semánticas para orientarse. Los elementos div y span, por sí solos, no dicen na-da, por muchas clases y estilos que les pongas. Un sitio así es como un periódico sin titulares: una masa de texto.

¡Pero qué periódico! Estamos en 2017. Estoy creando una aplicación isomórfica de una sola página, no un mural escolar. Aquí hay estados de componentes. ¿Para qué quiero semántica donde no hay texto? Muy buena pregunta.

Los lectores de pantalla pueden recorrer la página etiqueta por etiqueta, de principio a fin, leyendo todo el contenido en orden. Eso puede resultar muy poco eficiente: cada página empieza por la cabecera y, al terminar de recorrerla, ya olvidaste qué buscabas. Por eso tienen modos especiales para acceder a las partes importantes: elementos estructurales como header, nav y main, todos los enlaces o todos los encabezados.

Al leer una lista de todos los encabezados, puedes construir un mapa mental de la página sin verla. Después puedes ir directamente a una sección eligiendo su encabezado. Menú, búsqueda, catálogo, configuración, inicio de sesión: todas esas partes de tu aplicación pueden tener encabezados que faciliten el acceso.

— Instagram
  — Publicaciones
    — Atardecer
    — Café con leche
  — Configuración
  — Perfil

A veces, el diseño no incluye encabezados para ciertas partes importantes. Para quien lo diseñó, todo está claro: el menú tiene su icono de hamburguesa, la búsqueda tiene su campo, y así sucesivamente. Pero eso no debe impedirte crear interfaces accesibles. Agrega los encabezados necesarios y luego ocúltalos de forma accesible. ¿Cómo? Con display: none no, porque los lectores de pantalla también los ignoran. Existe una técnica llamada visually hidden. Piensa en el aspecto de la página y también en la lógica de su estructura HTML. No te olvides de los encabezados: deja que los estilos muestren tus páginas y aplicaciones, y que los encabezados las cuenten.

Volver al contenido