HTML para subtítulos y encabezados | Programar Plus

Digamos que tienes un encabezado doble situación en curso. Uno pequeño encima de uno grande. Aparece, no sé, mil millones de veces al día, diría yo. ¿Qué HTML te gusta? ¿Me atrevo a decir que depende? Pero, ¿ha considerado todas las opciones? ¿Y cómo se desarrollan esas opciones de forma semántica y de accesibilidad?

Como hacemos a veces por aquí, echemos un vistazo a las opciones.

Los ejemplos visuales

Supongamos que estos no son los <h1> en la pagina. No es que las cosas fueran dramáticamente diferentes si uno de ellos lo fuera, sino solo para preparar el escenario. Encuentro que esto tiende a aparecer más en subsecciones o tarjetas.

Aquí hay un ejemplo que un amigo mencionó en una conversación el otro día:

Aquí hay uno en el que trabajé también el otro día:

Y aquí hay una carta clásica:

Opción 1: El viejo <h3> entonces <h2>

El más pequeño está en la parte superior y el más grande está debajo, y obviamente <h3> es siempre más pequeño que un <h2> ¿derecho?

<h3>Subheading</h3>
<h2>Heading</h2>

Este es probablemente un pensamiento bastante común y mi menos enfoque favorito.

Prefiero ver los nombres de las clases en uso para que el estilo esté aislado de esas clases.

<h3 class="card-subhead">Subheading</h3>
<h2 class="card-head">Heading</h2>

No haga elecciones semánticas, especialmente aquellas que afecten a la accesibilidad, basadas en este tratamiento puramente visual.

La mayor rareza es usar dos elementos de título. Usar dos títulos para un solo contenido no se siente bien. La combinación se siente como: “Hola, aquí hay una nueva sección importante, y luego aquí hay otro subtítulo porque habrá más de ellos en esta subsección, por lo que este es solo para esta primera subsección”. Pero entonces no hay otras subsecciones ni otros subtítulos. Incluso si eso no es extraño, el orden es extraño con el encabezado de la subsección en primer lugar.

Si va a utilizar dos elementos de encabezado diferentes, me parece que es más probable que el encabezado más pequeño tenga más sentido ya que el <h2>, lo que nos lleva a …

Opción 2: Pequeño y poderoso <h2> y <h3>

Si tenemos clases en su lugar y el subtítulo funciona contextualmente como el encabezado más dominante, entonces podemos hacer esto:

<h2 class="card-subheading">Subheading</h2>
<h3 class="card-heading">Heading</h3>

Solo porque eso <h2> es visualmente más pequeño no significa que aún no pueda ser el encabezado dominante en el esquema del documento. Si observa el ejemplo de CodePen anterior, el título “Cambio de contexto” parece que funciona mejor como encabezado que la siguiente oración. Creo que usando el <h2> en ese encabezado más pequeño funciona bien allí, y mantiene la estructura más “normal” (supongo) con el <h2> viniendo primero.

Aún así, usar dos encabezados para una sección todavía se siente extraño.

Opción 3: un título, un div

¿Quizás solo uno de los dos necesita ser un encabezado? En general, eso me parece más correcto. Definitivamente he hecho esto antes:

<div class="card-subheading">Subheading</div>
<h3 class="card-heading">Heading</h3>

Eso se siente bien, excepto por la rareza de que el subtítulo podría tener contenido relevante y la gente podría perderlo si navegaran a la cabeza a través del lector de pantalla y leyeran desde allí en adelante. Supongo que podrías cambiar el orden visual …

<hgroup> <!-- hgroup is deprecated, just defiantly using it anyway -->

  <h3 class="card-heading">Heading</h3>
  <div class="card-subheading">Subheading</div>

</hgroup>
hgroup {
  display: flex;
  flex-direction: column;
}
hgroup .card-subheading {
  /* Visually, put on top, without affecting source order */
  order: -1;
}

Pero creo que jugar con el orden visual de esa manera es generalmente un no-no, como, incómodo para los usuarios de lectores de pantalla videntes. Así que no le digas a nadie que te mostré eso.

Opción 4: manténgalo todo en un solo título

Dado que de todos modos solo mostramos un título para un fragmento de contenido, parece correcto usar solo un título.

<h2>
  <strong>Subheading</strong>
  Heading
</h2>

Utilizando el <strong> El elemento allí nos da un gancho en el CSS para hacer el mismo tipo de estilo. Por ejemplo…

h2 strong {
  display: block;
  font-size: 75%;
  opacity: 0.75;
}

El truco aquí es que los títulos deben trabajar / leer juntos como uno. Entonces, o leen juntos de forma natural, o podrías usar dos puntos : o algo.

<h2>
  <strong>New Podcast:</strong>
  Struggling with Basic HTML
</h2>

Rol de ARIA

Resulta que hay un rol de ARIA dedicado a los subtítulos:

Asi como:

<h2 class="card-heading">Heading</h2>
<div role="doc-subtitle">Subheading</div>

Me gustan los estilos basados ​​en roles ARIA en general (porque exige su uso adecuado), por lo que el estilo se podría hacer directamente con él:

[role="doc-subtitle"] { }

Prueba de Steve y Léonie sugieren que los navegadores generalmente lo tratan como un “encabezado sin nivel”. JAWS es la excepción, que lo trata como una <h2>. Eso parece bien … ¿tal vez? Steve incluso piensa poner el subtítulo primero está bien.

Lo malo y lo feo

Lo que está sucediendo aquí es que el subtítulo proporciona un contexto general al encabezado, como etiquetarlo:

<label for="card-heading-1">Subheading</label>
<h2 id="card-heading-1" class="card-heading">Heading</h2>

Pero no estamos tratando con elementos de formulario aquí, por lo que no se recomienda. Otra forma de convertirlo en un solo encabezado sería usar un pseudoelemento para colocar el subtítulo, como:

<h2 class="card-heading" data-subheading="Subheading">Heading</h2>
.card-head::before {
  content: attr(data-subheading);
  display: block;
  font-size: 75%;
  opacity: 0.75;
}

Solía ​​ser que los lectores de pantalla ignoraban el pseudocontenido, pero ha mejorado, aunque todavía no es perfecto. Eso hace que esto sea un poco más utilizable, pero el texto aún no se puede seleccionar y no se puede encontrar en la página, por lo que prefiero no ir aquí.