Día 13. Encontré un artículo

Introducción

Cuando se inventó HTML, hace muchos años, el mundo era muy distinto. Quienes escribieron la especificación se inspiraron en documentos de texto con párrafos, listas, tablas, imágenes y, por supuesto, encabezados, uno detrás de otro. Como en un trabajo escolar: 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 nombre al contenido que viene después y permiten reconocer secciones implícitas: partes lógicas de la página que se deducen a partir de los encabezados, sin una etiqueta que las delimite.

<h1>Comida</h1>
  <h2>Frutas</h2>
  <p>Deliciosas</p>
    <h3>Manzanas</h3>
    <p>De verdad</p>

Por eso la especificación recomienda no usar los elementos h* para los subtítulos que acompañan a un encabezado. Ese texto puede ser un párrafo normal: un encabezado debe identificar una parte del contenido. La especificación incluye ejemplos de marcado para elementos más complejos, como subtítulos, rutas de navegación y diálogos. Puedes consultarlos.

La etiqueta section

También podemos delimitar las secciones de forma explícita con el elemento section. Este fragmento expresa la misma organización que el anterior, pero resulta más claro, aunque sea más largo.

<h1>Comida</h1>
<section>
  <h2>Frutas</h2>
  <p>Deliciosas</p>
  <section>
    <h3>Manzanas</h3>
    <p>De verdad</p>
  </section>
</section>

Niveles de encabezado

Bien, si las secciones son explícitas, su anidamiento permite ver cómo se relacionan. ¿No podría el navegador deducir el nivel de cada encabezado? Así no habría que ir contando: h1, h2, h… ya perdí la cuenta. Además, sería más fácil mover partes del código. A quienes diseñaron HTML5 se les ocurrió lo mismo y describieron un algoritmo para generar el esquema del documento. La idea era usar solo h1 y expresar la jerarquía mediante el anidamiento de elementos como article y section.

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

La idea gustó mucho y bastantes personas empezaron a usarla. Pero había un problema: no se podía contar con que los navegadores, lectores de pantalla y buscadores aplicaran ese algoritmo. En esas páginas, todos los encabezados se anuncian como de primer nivel. Y, si todo es lo más importante, nada destaca.

No uses ese enfoque: la propia especificación dejó de recomendarlo. Debemos elegir los niveles de los encabezados. No es tan difícil: una página típica rara vez necesita más de tres niveles de secciones. ¡Solo hay que prestar atención!

No es tan sencillo

Un momento. Si pongo una clase en un div, todo el mundo ve que es el encabezado más grande. Con otra clase lo hago más pequeño. Se entiende, ¿no? ¿Para qué calcular niveles si ya existe CSS?

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

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

Hay dos grupos importantes que se apoyan en las etiquetas para interpretar una página: los lectores de pantalla y los robots. El tamaño y el color de un div no bastan para indicarles su función; un h1 sí identifica un encabezado principal. Los robots incluyen a los buscadores, a los que conviene ayudar a comprender nuestras páginas.

Los lectores de pantalla ayudan a quienes tienen poca visión o no pueden ver la interfaz, y a otras personas que navegan de otra manera. Herramientas como VoiceOver, NVDA y JAWS pueden leer el contenido en voz alta y usar la semántica del HTML para facilitar la navegación. Por sí solos, div y span no indican la función del contenido, por muchas clases y estilos que tengan. Un sitio así se parece a un periódico sin encabezados: un gran bloque de texto.

¡Pero qué periódico! Estamos en 2017 y estoy creando una aplicación isomórfica de una sola página, no un periódico mural. Tengo estados de componentes. ¿Para qué quiero semántica donde no hay texto? Buena pregunta.

Los lectores de pantalla permiten recorrer el contenido de principio a fin. Pero hacerlo siempre así sería poco eficiente: para cuando terminas de pasar por la cabecera, quizá ya olvidaste qué buscabas. Por eso también ofrecen formas de navegar por partes importantes: regiones como header, nav y main, enlaces o encabezados.

Al consultar la lista de encabezados, puedes formarte una idea de la estructura de la página sin verla. Después puedes ir directamente a la sección que necesitas eligiendo su encabezado. Menú, búsqueda, catálogo, configuración, inicio de sesión: todas estas partes de una aplicación pueden tener encabezados que faciliten el acceso.

— Instagram
  — Noticias
    — Atardecer
    — Latte
  — Configuración
  — Perfil

A veces el diseño no muestra encabezados para partes importantes. A quien lo diseñó todo le parece claro: un menú con su icono de hamburguesa, un buscador con su campo de texto, etcétera. Eso no debe impedirte crear interfaces accesibles. Agrega los encabezados necesarios y ocúltalos visualmente sin quitarlos de la navegación accesible. No uses display: none: también los oculta a los lectores de pantalla. Para eso existe el patrón visually hidden. Además de pensar en la apariencia de la página, piensa en la organización lógica del HTML. No olvides los encabezados: que los estilos muestren la página y los encabezados cuenten cómo está organizada.

Volver al contenido