Título: Semántica, fluidez y estilo – ¡Dios mío!

Algunos enlaces a los títulos que tengo guardados debajo de mi chistera.

Martín Underhill:

¿Por dónde empezaré? <h1> debería ser colocado y comenzarás a entender por qué <header> Ubicación incorrecta: es el título de la página, el contenido de la página de inicio debe estar en <main> elemento.

¡Un rompecabezas clásico! Veo el título de la página de inicio (<h1>) colocados en varios lugares, tales como:

• en el sitio <header> (Título del sitio web del paquete)
• uno <header> anidado en <main> contenido
• un dedicado <header> otro que <main> contenido

Además de la primera estructura (el título de un sitio web tiene un propósito diferente que el título de una página), Martin examina otras dos estructuras, describiendo cómo la semántica implícita afecta la usabilidad de tecnologías de asistencia como los lectores de pantalla. uno <header> Es un contenedor de contenido introductorio y puede contener un elemento de título (así como otros tipos de elementos). Asimismo, el título podrá considerarse parte del contenido. <main> contenido en lugar de su propia entidad.

entonces:

<!-- 1️⃣ -->
<header>
  <!-- Header stuff -->
  <h1>Page heading</h1>
</header>
<main>
  <!-- Main page content -->
</main>

<!-- 2️⃣ -->
<main>
  <header>
    <!-- Header stuff -->
    <h1>Page heading</h1>
  </header>
  <!-- Main page content -->
</main>

Como muchas decisiones que tomamos en el trabajo, tiene las siguientes consecuencias:

• Si el título está en <header> Eso fue en <main> elementoel título puede perderse por completo si el usuario usa un para saltar al contenido principal saltar enlace. O bien, los usuarios de lectores de pantalla podrían perderlo al navegar por marca de posición. Por supuesto, si el primer usuario ve el título antes de saltarlo, o si la página se muestra a un usuario de lector de pantalla, es posible que no se produzca ningún daño. <title> antes de saltar puntos de referencia. Sin embargo, en el peor de los casos, el lector de pantalla anunciará información adicional sobre cómo llegar al final del banner (<header> mapeado a role="banner") antes de entrar en el contenido principal.
• Si el título está en <header> anidado en <main> elementoeste <header> perdió su semántica y efectivamente se convirtió en un genérico <div> o <section>lo que genera confusión en la ubicación del punto de referencia del título de la página de inicio cuando se utiliza un lector de pantalla.

Todo esto lleva a Martin a un tercer enfoque, donde el título debería ubicarse directamente <main> contenido, fuera <header>:

<!-- 3️⃣ -->
<header>
  <!-- Header stuff -->
</header>
<main>
  <h1>Page heading</h1>
  <!-- Main page content -->
</main>

Por aquí:

• este <header> Los monumentos se conservan (y sus role).
• este <h1> Conéctate a <main> contenido.
• Navegar entre <header> y <main> Sea predecible y consistente.

Como dice Martin: «Definitivamente estoy siendo quisquilloso, pero es importante pensar más allá de lo que es visualmente obvio».

«Título fluido»

Donnie D’Amato:

No faltan publicaciones que expliquen cómo realizar tipografía responsiva. (…) Sin embargo, en estos artículos nadie menciona realmente a qué cualidades se debe prestar atención al determinar los valores. (…) La sugerencia es siempre Incluya unidades que no sean ventanas gráficas en los cálculos con unidades de ventanas gráficas.

En resumen, estamos hablando de texto que escala con el tamaño de la ventana gráfica. Esto generalmente se hace usando clamp() Función que establece un tamaño de fuente «ideal» que está bloqueado entre un valor mínimo y un valor máximo que no se puede exceder.

.article-heading {
  font-size: clamp(<min>, <ideal>, <max>);
}

Como explica Donnie, es común basar los valores mínimo y máximo en el tamaño de fuente real:

.article-heading {
  font-size: clamp(18px, <ideal>, 36px);
}

…y un valor «ideal» intermedio en las unidades de ventana gráfica para permitir fluidez entre los valores mínimo y máximo:

.article-heading {
  font-size: clamp(18px, 4vw, 36px);
}

Pero el problema aquí, como se explica Maxwell Barvian aparece en la revista Smashinglo que puede reducir la accesibilidad si el usuario aplica zoom a la página. La idea de Maxwell es utilizar unidades que no sean ventanas gráficas como un valor «ideal» intermedio para que el tamaño de fuente se escale según la configuración del usuario.

La idea de Donnie es calcular el valor medio como la diferencia entre los valores mínimo y máximo, y hacerlo relativo a la diferencia entre el número máximo de caracteres por línea (entre 40 y 80 caracteres) y el tamaño mínimo de ventana gráfica que desea admitir (probablemente 320px Esto es lo que tradicionalmente hemos asociado con dispositivos móviles más pequeños), lo que se traduce en rem unidades, donde .

.article-heading {
  --heading-smallest: 2.5rem;
  --heading-largest: 5rem;
  --m: calc(
     (var(--heading-largest) - var(--heading-smallest))
     / (30 - 20) /* 30rem - 20rem */
   );
  font-size: clamp(
    var(--heading-smallest),
    var(--m) * 100vw,
    var(--heading-largest)
  );
}

No puedo hacer que esto funcione. Al intercambiar valores sin unidades por rem. Pero sólo en Chrome y Safari. A Firefox no le debe gustar dividir unidades entre otras unidades… lo cual tiene sentido ya que está en línea con lo que está en la especificación.

De todos modos, así es como se ve cuando funciona, al menos en Chrome y Safari.

estilo :headings

Hablando de Firefox, últimamente han aparecido algunas cosas en Nightly, pero todavía no en ningún otro lugar.

Álvaro Montoro:

Aplicar estilo a los encabezados en CSS será más fácil. con el nuevo :heading Pseudoclase y :heading() función, puede colocar sus títulos de una manera más clara y flexible.

• :heading: Seleccionar todo <h*> elemento.
• :heading(): Mismo trato, pero con la posibilidad de seleccionar ciertos títulos en lugar de todos.

Me rasco la cabeza preguntándome por qué necesitamos algo de esto. Álvaro dijo en su introducción que eligen títulos de una manera más limpia y flexible. Entonces, por supuesto, esto:

:heading { }

…mucho más limpio que esto:

h1, h2, h3, h4, h5, h6 { }

Como en:

:heading(2, 3) {}

…mucho más limpio (pero no más corto) que esto:

h2, h3 { }

Pero Álvaro aclaró más, afirmando que el alcance de ambos elementos se limita estrictamente al elemento del título, ignorando cualquier otro elemento que pueda ser similar al título usando atributos HTML y ARIA. Muy buenos antecedentes y vale la pena leerlo completo.