Encabezados

La función de los encabezados es la de organizar los contenidos haciendo una pequeña descripción de la sección que precede.

Nota

Define bien los encabezados, deben ser concisos y únicos, los usuarios de lectores de pantalla suelen navegar a través de ellos, también los buscadores les dan importancia a la hora de indexar contenidos. Criterio 2.4.6 ↗️

Resumen para crear encabezados accesibles:

• Todas las páginas deben tener un único encabezado <h1>
• No saltes niveles de jerarquía.
• No simules encabezados mediante estilos.
• Si no podemos usar etiquetas nativas, usaremos el atributo aria-level.

/* incorrecto, no hay etiqueta de encabezado ni aria */
<span class="clase-h1">Encabezado principal</span>

/* correcto, usamos aria */
<span class="clase-h1" aria-level="1">Encabezado principal</span>

/* óptimo, usamos la etiqueta de encabezado */
<h1 class="clase-h1">Encabezado principal</h1>

Jerarquía

Los encabezados tienen una jerarquía, donde su relevancia se ordena de la etiqueta <h1> (mayor importancia) a la <h6> (menor)

<h1>Encabezado nivel 1</h1>
<h2>Encabezado nivel 2</h2>
<h3>Encabezado nivel 3</h3>
<h4>Encabezado nivel 4</h4>
<h5>Encabezado nivel 5</h5>
<h6>Encabezado nivel 6</h6>

Encabezado principal

Todas las páginas deben llevar un encabezado <h1> que represente el contenido principal de la página y debe ser único.

Múltiples encabezados H1

Tener varios encabezados h1 no es una práctica recomendada.

¿Por qué no es una práctica recomendada?

En un inicio, el outline de HTML5 iba a permitir tener varios encabezados <h1> para organizar las distintas secciones como por ejemplo <article>, <section>, <aside>, etc.

Por desgracia, a día de hoy ningún navegador adoptó el outline de HTML5 tal como se ideó, y los H1 que tenga una página son considerados por igual, lo que resultaría confuso para el usuario.

  <section>
      <header>Título sección artículos</header>
      <article>
        <header>
          <h1> Título artículo 1 </h1>
        <header>
      </article>
      <article>
        <header>
          <h1> Título artículo 2 </h1>
        </header>
      </article>
  </section>

Orden encabezados

Dentro de una misma sección no se deben saltar niveles de jerarquía, es decir, el encabezado de nivel inferior a un h1 debería ser un h2, y posterior a este, un h3, y así consecutivamente hasta el nivel h6.

<!-- incorrecto -->
<article>
  <h2>Encabezado nivel 2</h2>
  ...
  <h4>Sub-encabezado nivel 4</h4>
  ...
</article>

<!-- correcto -->
<article>
  <h2>Encabezado nivel 2</h2>
  ...
  <h3>Sub-encabezado nivel 3</h3>
  ...
</article>

Encabezados consecutivos del mismo nivel

A partir del <h2> pueden haber encabezados del mismo nivel consecutivamente, por ejemplo:

<h1>Encabezado principal</h1>
...
<h2>Sub-encabezado nivel 2</h2>
...
<h2>Sub-encabezado nivel 2</h2>
...
<h3>Sub-encabezado nivel 3</h3>
...
<h3>Sub-encabezado nivel 3</h3>
...
<h2>Sub-encabezado nivel 2</h2>
...