La guía de encabezados de HTML

Publicado el:

Los encabezados son una herramienta de HTML muy útil para mejorar la accesibilidad de un sitio. En este artículo busco explicarte como usar estos encabezados de una manera óptima.


Introducción (Link permanente)

Probablemente te estés preguntando cosas como “¿Para qué necesitaría una guía para usar los tags de encabezados, Cristian? ¡Son fáciles de usar!” A lo que les responderé que es técnicamente cierto, pero hay más profundidad sobre el tema de lo que esperarían.

Bien usados, son una herramienta efectiva para mejorar la accesibilidad de nuestros sitios, y por desgracia, veo que un buen uso de estos no es algo que se vea tan a menudo. En este artículo busco explicar cómo usar estos tags de forma efectiva y qué consideraciones debes tener en cuenta al momento de crear el contenido de tu sitio.


¿Por qué es importante? (Link permanente)

Antes de hablar sobre cómo usarlos, hablemos un poco de su importancia, y para esto quiero traer a colación algo que me pasó a modo de analogía.

Verán, estaba comprando un libro en Amazon sobre technical writing y me topé con este libro llamado The Product is Docs⁠ (Abre en una nueva pestaña) , lo compré, pero noté que el libro no era para mi (porque buscaba algo más básico) al leer su tabla de contenido, así que pedí el reembolso pertinente.

Sin esta tabla de contenido no hubiera sabido si este libro tiene lo que yo buscaba. ¿A qué viene este ejemplo? Verás, los encabezados de HTML funcionan exactamente igual como una tabla de contenido.

Esto es particularmente útil para usuarios de lectores de pantalla, ya que estos por lo general no van a consumir todo el contenido de tu sitio. Lo que harán será navegar a las partes que les interesa ver y para esto tienen varias estrategias: pueden usar la lista de enlaces que tiene tu sitio, pueden navegar a través de puntos de navegación (marcados por los tags <header>, <footer>, <main>, <section> y demás), y —una de las estrategias más usadas— a través de los encabezados de tu sitio para saber qué secciones son de su interés.

Para dar un ejemplo, usaré una página de la Wikipedia y usaré NVDA como mi lector de pantalla. Supongamos que.. No sé, quiero saber más sobre los nautilos, así que abro el artículo de Wikipedia sobre los nautilos⁠ (Abre en una nueva pestaña) y con NVDA activo, presiono las teclas Ins + F7, lo que mostrará la ventana de navegación, y seleccionaré la lista de elementos del sitio y seleccionaremos la vista por encabezados.

Lista de encabezados del artículo de nautilos de la Wikipedia. El encabezado principal dice Nautilina y debajo de estos desciende una serie de encabezados que dice Índice, Descripción, Fisiología, Referencias, Enlaces Externos y Menú de navegación. De este último encabezado desciende otro encabezado que dice Buscar

Como puedes notar, la estructura de encabezados está bien organizada y define muy bien lo que trata el artículo. También hay un encabezado mostrando una parte importante de la funcionalidad el sitio (el menú de navegación) Todo esto permite una fácil navegación entre los elementos de un sitio y esta estructura es importante de tener en cuenta.

Bien, ya comprendes por qué un buen uso de encabezados es importante para la accesibilidad de tu sitio ¿Cómo asegurarnos de que estamos haciendo una estructura de encabezados adecuada para nuestro sitio?


Consideraciones (Link permanente)

Crear una estructura de nuestro sitio usando encabezados es fácil, pero hay que tener un par de cosas en mente.

¿Un h1 por página? Link permanente

Antes de escribir este artículo no sabía que traer la pregunta a foros / chats de accesibilidad web de ¿Debería usarse solo un elemento h1 por sitio? es algo así como abrir la caja de Pandora: es una discusión a la cual no se llega un consenso claro.

Algunas personas dicen que es técnicamente posible utilizar más de un elemento h1 por sitio sin que genere problemas de navegación, mientras que otros mencionan que es mejor limitarse a sólo 1 por sitio. ¿Qué es lo mejor? Esto depende de tu sitio, pero en la gran mayoría de los casos usar sólo un tag h1 por sitio es la mejor opción.

Usar múltiples tags h1 puede generar una estructura de HTML con un significado confuso (además de ser menos beneficioso para el SEO). Había una proposición para poder usarse múltiples tags h1 y que se estos se organizaran en una estructura lógica a través de un algoritmo llamado Document Outline (o esquema del documento en español), pero este nunca fue adaptado para los navegadores o para tecnología asistivas (como lectores de pantallas) así que no hay que tenerse en cuenta. Si quieres saber más de la historia de este algoritmo, este artículo de Steve Faulkner sobre el Document Outline⁠ (Abre en una nueva pestaña) .

En resumen: usa sólo un tag h1 por página: será lo mejor en la mayoría de los casos y beneficias tanto a la accesibilidad como al SEO con esta práctica. A no ser que tengas un sitio muy grande y hables de temas muy diversos en un sólo sitio, tendría algo de sentido, pero si tienes que hacer esto tal vez deberías reconsiderar reestructurar el contenido de tu sitio.

Estructura, no tamaño Link permanente

Uno de los errores más comunes que veo con el uso de encabezados es usar uno de estos elementos dependiendo del tamaño que se necesite en pantalla. Esto es un gran error, si necesitas tus encabezados de un tamaño adecuado, usa CSS para esto, no comprometas la estructura de tu documento usando un elemento errado.

Dicho esto ¿cómo debería ser una estructura correcta? Volvamos al ejemplo del artículo sobre el nautilo. Tal vez el screenshot anterior no fue lo suficientemente claro sobre como está estructurado así que usaré un plugin llamado Tota11y⁠ (Abre en una nueva pestaña) hecho por Khan Academy.

Al activarlo en este sitio, veremos un ícono de unas gafas en la esquina inferior izquierda, y al hacerle clic, veremos unas cuentas opciones para inspeccionar ciertos aspectos de accesibilidad del sitio. El que nos interesa en este momento es el de headings. Le hacemos clic y veremos la estructura de encabezados de este sitio.

Lista de encabezados desde el plugin Tota11y. El encabezado de Nautila tiene un número 1, los encabezados debajo de este tienen un número 2 y el encabezado de Buscar tiene un número 3

Como puedes notar en el resumen de encabezados, el encabezado principal tiene un número 1, el cual corresponde con el elemento h1 , los encabezados con el número 2 corresponden con el elemento h2 y el último encabezado es un h3. Los encabezados descienden en una estructura lógica para formar un contenido. No vas a ver un encabezado h2 y que luego descienda a un encabezado h4 porque es una estructura que no tiene sentido.

Volviendo a la comparación con un libro, el h1 sería el equivalente al título de este, el h2 sería el equivalente a sus capítulos, el h3 serían las subsecciones de este y así sucesivamente. Esto es lo que deberías tener en cuenta al momento de usar estos elementos, usar una estructura lógica que permita navegar tu sitio con facilidad.

Contenido sobre diseño Link permanente

Hay un último detalle que quiero traer a colación y para esto inspeccionaré otro sitio con el plugin de Tota11y. El sitio en cuestión será a11yproject.com⁠ (Abre en una nueva pestaña) y quiero que notes algo particular aquí.

Inspección de encabezados del sitio a11yproject.com a través del plugin Tota11y. Hay un encabezado llamado tabla de contenido en el resumen a pesar de que no esté visible en el sitio

Este sitio tiene un encabezado llamado “Table of content” pero si notas, no es visible. Esto es porque a pesar de que el contenido requiere un encabezado en esta parte para que la estructura tenga sentido, el diseño no.

¿Qué hacer en estos casos? Lo mejor es priorizar contenido sobre diseño, y si este último no requiere un encabezado visible, siempre se puede ocultar de forma visual, de modo tal que los lectores de pantalla aun tengan acceso a este.

Ten en mente que las propiedades de CSS como display: none o visibility: hidden esconderán el elemento tanto de forma visual como de lectores de pantalla, así que tendremos que recurrir a otros métodos. Aquí compartiré un par de reglas de CSS que puedes usar para este fin:

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Este fragmento de código lo que hace es sacar el elemento del flujo actual del documento, ocultarlo a un tamaño de 1px y moverlo lejos de la pantalla. A mi personalmente no me gusta tanto este método sólo porque al momento de inspeccionarlo, va a ser difícil encontrarlo, pero son detalles menores.

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

Este conjunto de reglas lo que hacen es sacar el elemento del flujo del documento, dejarlo de un ancho de 1px y asegurarse de que el contenido dentro de este no se salga. Este tiene la ventaja de que se queda más cerca de su posición original, por lo si necesitas inspeccionarlo es más fácil.

Seguramente hay otras estrategias para esconder elementos de forma visual pero no de lectores de pantalla, lo importante es que si bien esto es útil para añadir contenido semántico importante, no abuses de esta porque no todos los usuarios de lectores de pantalla son ciegos.

Hay usuarios con visión limitada pero aun pueden ver algo y usan un lector de pantalla en conjunto con magnificadores de pantalla como Zoomtext⁠ (Abre en una nueva pestaña) , otros pueden tener dislexia o problemas de aprendizaje, hay casos de gente analfabeta que usa un lector de pantalla para navegar por un sitio. Esta disonancia entre lo que se ve y lo que el lector de pantalla narra puede generar confusión, por lo que usa esto sólo en caso de ser necesario.


¿Son seis niveles de encabezados suficientes? (Link permanente)

Como podrás suponer, el hecho de que contemos con tags desde <h1> hasta <h6> indica que sólo podemos usar seis niveles de encabezados ¿Qué ocurre en caso de que se necesiten más de 6 niveles en un sólo sitio?

Si es el caso, en serio recomendaría dividir tu contenido en páginas distintas de modo tal que esto no sea necesario, pero vale, supongamos que tienes que dejar todo en un sólo sitio. Ahí es donde entra el aria role heading y la propiedad de aria aria-level.

El role heading hace que el elemento sea semánticamente igual al de un encabezado y la propiedad aria-level le da el nivel a dicho encabezado. Por dar un par de ejemplos de como usarlo.

<!-- Será reconocido como un encabezado de nivel 2 -->
<div role="heading" aria-level="2">Encabezado</div>

<!-- A pesar de ser un h3, será reconocido como encabezado nivel 2 -->
<h3 aria-level="2">Encabezado</h3>

Si vas a hacer esto, estás mejor simplemente usando los tags de encabezados correspondientes, pero esto abre la posibilidad a usar más de 6 niveles de encabezados en nuestro sitio porque la propiedad aria-level permite usar niveles mayores a 6. Ya que he usado el ejemplo del nautilo, el único caso donde puedo pensar en tantos niveles de estructura sería en la taxonomía, ¡así que hagamos un ejemplo de estructura de HTML con esto!

<h1>Categorías de la taxonomía</h1>
<h2>Dominio Eukaryota</h2>
<h3>Reino Animalya</h3>
<h4>Filo Mollusca</h4>
<h5>Clase Cephalopoda</h5>
<h6>Orden Nautilida</h6>
<h6 aria-level="7">Familia Nautilidae</h6>
<h6 aria-level="8">Género Nautilus</h6>

Y así es como luciría en la lista de encabezados de NVDA

Lista de encabezados del código anterior. Se puede notar que la lista se despliega hasta tener 8 niveles de encabezados

Ahora, no porque puedas hacer esto significa que debas hacer esto: tal como lo dije anteriormente, si necesitas más de 6 niveles de encabezados, es mejor que reestructures tu contenido de modo tal que no necesites tantas divisiones. Separarlos en múltiples páginas o revisar si es necesario que cierta parte sea un encabezado son buenas maneras de solucionar esto.

Además, si bien aria-level está bien soportado en los lectores de pantalla más conocidos (como NVDA, JAWS, el Narrador de Windows, VoiceOver, TalkBack u Orca) puede que su soporte en otros lectores de pantalla no esté tan bien expandido. Es posible hacer esto, pero estarás mejor si simplemente no lo haces.


Para terminar (Link permanente)

Vaya, este artículo de un tema “sencillo” resultó bastante largo, y no fue por falta de querer sintetizar la información, resumamos un poco lo visto:

  • Los encabezados existen para crear una estructura lógica de nuestro sitio, esto ayuda a usuarios de lectores de pantalla a escanear nuestro sitio más fácilmente.
  • Sólo usa un h1 por página. Es mejor para accesiblidad y para SEO.
  • Usa el orden de descendencia de estos tags para crear una estructura lógica. Tener un <h2> y descender directamente a un <h4> genera una estructura poco lógica, por dar un ejemplo.
  • Puedes usar aria-level para generar más niveles de encabezados, pero muy rara vez vas a necesitar tantos niveles de encabezados en un sólo sitio.

Espero que todo esto te haya servido de ayuda, y que esto te ayude a generar una estructura de encabezados más sólida en tus sitios. Recuerda que para saber más de estos temas de accesibilidad puedes seguirme en mi cuenta de Twitter⁠ (Abre en una nueva pestaña) .

¡Hasta la próxima vez!

Postdata: ¿Alguien conoce un buen libro sobre tech writing? Aun quiero aprender del tema...

Eda de la serie The Owl House saliendo de su casa mientras dice de forma muy alegre 'byeeee'