HTML para subtítulos y títulos

Digamos que tienes una situación de doble rumbo . Uno pequeño encima de uno grande. Aparece, no sé, mil millones de veces al día, diría yo. ¿Qué HTML eliges? ¿Me atrevo a decir que depende? ¿Pero ha considerado todas las opciones? ¿Y cómo se desarrollan esas opciones desde el punto de vista semántico y de accesibilidad?

Como hacemos a veces por aquí, demos un paseo por las opciones.

Los ejemplos visuales

Supongamos que estos no son los que aparecen h1en la página. No es que las cosas fueran dramáticamente diferentes si uno de ellos lo fuera, sino simplemente para preparar el escenario. Creo que esto suele 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 tarjeta clásica:

Opción 1: el viejo h3entoncesh2

El más pequeño está arriba y el más grande abajo, y obviamente h3siempre es más pequeño que una h2¿verdad?

h3Subheading/h3h2Heading/h2

Este es probablemente un pensamiento bastante común y el enfoque que menos yo.gusta .

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

h3Subheading/h3h2Heading/h2

No tomes decisiones semánticas, particularmente aquellas que afectan a la accesibilidad, basándose en este tratamiento puramente visual.

La mayor rareza es utilizar dos elementos de encabezado. Usar dos títulos para un solo contenido no parece correcto. La combinación se siente como: “Oye, aquí hay una sección nueva importante y luego aquí hay otro subtítulo porque habrá más 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, ya que el título de la subsección aparece primero.

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 que el h2, lo que nos lleva a…

Opción 2: Pequeños y poderosos h2yh3

Si tenemos clases implementadas y el subtítulo funciona contextualmente como el título más dominante, entonces podemos hacer esto:

h2Subheading/h2h3Heading/h3

El hecho de que h2sea visualmente más pequeño no significa que no pueda ser el título dominante en el esquema del documento. Si observa el ejemplo de CodePen anterior, el título “Cambio de contexto” parece funcionar mejor como título que la siguiente oración. Creo que usar el h2encabezado más pequeño funciona bien allí y mantiene la estructura más “normal” (supongo) con el h2que viene primero.

Aún así, usar dos títulos para una sección todavía resulta extraño.

Opción 3: un encabezado, un div

¿Quizás sólo uno de los dos necesita ser un título? En general, eso me parece más correcto. Definitivamente he hecho esto antes:

divSubheading/divh3Heading/h3

Eso se siente bien, excepto por la rareza de que el subtítulo pueda tener contenido relevante y las personas podrían perderlo si navegan hasta el encabezado a través del lector de pantalla y leen desde allí en adelante. Supongo que podrías cambiar el orden visual…

hgroup !-- hgroup is deprecated, just defiantly using it anyway --  h3Heading/h3  divSubheading/div/hgroup

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

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

Opción 4: mantener todo en un solo título

Dado que de todos los modos solo mostramos un encabezado para una parte del contenido, parece correcto usar solo un encabezado.

h2  strongSubheading/strong  Heading/h2

Usar el strongelemento allí nos da un gancho en 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 funcionar/leerse juntos como uno solo. Entonces, o leen juntos de forma natural, o puedes usar dos puntos :o algo así.

h2  strongNew Podcast:/strong  Struggling with Basic HTML/h2

rol de aria

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

Si desea identificar semánticamente un subtítulo de encabezado, no busque más que role=”doc-subtitle” https://t.co/wG2rVfU3d4 #HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz

– Steve Faulkner SteveFaulkner@mastodon.social (@stevefaulkner) 7 de marzo de 2020

Like so:

h2Heading/h2div 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 ellos:

[role="doc-subtitle"] { }

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

Lo malo y lo feo

Lo que sucede aquí es que el subtítulo proporciona un contexto general al título, algo así como etiquetarlo:

label for="card-heading-1"Subheading/labelh2Heading/h2

Pero aquí no estamos tratando con elementos de formulario, por lo que no es recomendable. Otra forma de convertirlo en un título único sería utilizar un pseudoelemento para colocar el subtítulo, como:

h2 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 ni encontrar en la página, por lo que prefiero no ir aquí.