HTML für Unterüberschriften und Überschriften

Nehmen wir an, Sie haben eine Doppelüberschriften-Situation. Eine kleine über einer großen. Das kommt, ich weiß nicht, eine Milliarde Mal am Tag vor, würde ich sagen. Welches HTML nehmen Sie dafür? Wage ich zu sagen, es kommt darauf an? Aber haben Sie alle Optionen in Betracht gezogen? Und wie wirken sich diese Optionen semantisch und zugänglichkeitsmäßig aus?

Wie wir es hier manchmal tun, gehen wir die Optionen durch.

Die visuellen Beispiele

Gehen wir davon aus, dass dies nicht die <h1> auf der Seite sind. Nicht, dass sich die Dinge dramatisch ändern würden, wenn es doch eine wäre, aber nur um die Bühne zu bereiten. Ich finde, das kommt am häufigsten in Unterabschnitten oder Karten vor.

Hier ist ein Beispiel, das ein Freund neulich in einem Gespräch aufbrachte

Hier ist eines, an dem ich auch erst kürzlich gearbeitet habe

Und hier ist eine klassische Karte

Option 1: Die alte Methode mit <h3> und dann <h2>

Die kleinere ist oben und die größere darunter, und offensichtlich ist <h3> immer kleiner als ein <h2>, richtig?

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

Das ist wahrscheinlich ein ziemlich verbreiteter Gedanke und meine geringste bevorzugte Methode.

Ich würde es vorziehen, Klassennamen zu verwenden, damit die Formatierung auf diese Klassen beschränkt ist.

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

Treffen Sie keine semantischen Entscheidungen, insbesondere solche, die die Zugänglichkeit betreffen, basierend auf dieser rein visuellen Behandlung.

Das größere Seltsame ist die Verwendung von zwei Überschriftenelementen überhaupt. Zwei Überschriften für einen einzelnen Inhalt zu verwenden, fühlt sich nicht richtig an. Die Kombination fühlt sich an wie: „Hey, hier ist ein wichtiger neuer Abschnitt, und hier ist eine weitere Unterüberschrift, weil es davon mehr in diesem Unterabschnitt geben wird, also ist diese nur für diesen ersten Unterabschnitt.“ Aber dann gibt es keine weiteren Unterabschnitte und keine weiteren Unterüberschriften. Selbst wenn das nicht seltsam ist, ist die Reihenfolge seltsam, da die Unterabschnittsüberschrift zuerst kommt.

Wenn Sie zwei verschiedene Überschriftenelemente verwenden möchten, scheint mir die kleinere Überschrift fast eher als die <h2> sinnvoll zu sein, was uns zu… führt

Option 2: Kleine & mächtige <h2> und <h3>

Wenn wir Klassen im Einsatz haben und die Unterüberschrift kontextuell als die dominanteste Überschrift fungiert, dann können wir das tun

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

Nur weil diese <h2> visuell kleiner ist, heißt das nicht, dass sie nicht immer noch die dominante Überschrift in der Dokumentengliederung sein kann. Wenn Sie sich das Beispiel aus CodePen oben ansehen, wirkt der Titel „Context Switching“ besser als Überschrift als der folgende Satz. Ich denke, die Verwendung von <h2> für diese kleinere Überschrift funktioniert dort gut und hält die Struktur „normaler“ (nehme ich an), da die <h2> zuerst kommt.

Immer noch fühlt sich die Verwendung von zwei Überschriften für einen Abschnitt seltsam an.

Option 3: Eine Überschrift, ein Div

Vielleicht muss nur eine der beiden eine Überschrift sein? Das erscheint mir im Allgemeinen richtiger. Das habe ich definitiv schon gemacht

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

Das fühlt sich in Ordnung an, abgesehen von der Seltsamkeit, dass die Unterüberschrift relevante Inhalte haben könnte und Leute das möglicherweise verpassen könnten, wenn sie über einen Screenreader zur Überschrift navigieren und von dort aus weiterlesen. Ich schätze, man könnte die visuelle Reihenfolge vertauschen…

<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;
}

Aber ich denke, die visuelle Reihenfolge so zu verändern ist generell ein No-Go, also unangenehm für sehende Screenreader-Nutzer. Also verraten Sie niemandem, dass ich Ihnen das gezeigt habe.

Option 4: Alles in einer Überschrift belassen

Da wir ohnehin nur einen Teil des Inhalts als Überschrift anzeigen, scheint es richtig, nur eine einzige Überschrift zu verwenden.

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

Die Verwendung des <strong>-Elements darin gibt uns einen Anker im CSS, um denselben Stil zu erzielen. Zum Beispiel…

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

Der Trick hierbei ist, dass die Überschriften dann als Einheit funktionieren/gelesen werden müssen. Entweder sie lesen sich natürlich zusammen, oder man könnte einen Doppelpunkt : oder etwas Ähnliches verwenden.

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

ARIA-Rolle

Es stellt sich heraus, dass es eine ARIA-Rolle gibt, die für Untertitel vorgesehen ist

👉Wenn Sie eine Überschriften-Untertitel semantisch identifizieren möchten, suchen Sie nicht weiter als role="doc-subtitle" https://#/wG2rVfU3d4#HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz

— Steve Faulkner [email protected] (@stevefaulkner) 7. März 2020

Also wie

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

Ich mag Stile, die auf ARIA-Rollen basieren, im Allgemeinen (weil es deren korrekte Verwendung erfordert), also könnten die Stile direkt damit gemacht werden

[role="doc-subtitle"] { }

Tests von Steve und Léonie deuten darauf hin, dass Browser es generell als „Überschrift ohne Ebene“ behandeln. JAWS ist die Ausnahme, die es wie eine <h2> behandelt. Das scheint in Ordnung… vielleicht? Steve findet sogar dass es in Ordnung ist, die Unterüberschrift zuerst zu setzen.

Das schlechte und das hässliche

Was hier passiert, ist, dass die Unterüberschrift dem Haupttitel einen allgemeinen Kontext gibt – quasi als Beschriftung.

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

Aber wir haben hier keine Formularelemente, also wird davon abgeraten. Eine weitere Möglichkeit, es zu einer einzigen Überschrift zu machen, wäre die Verwendung eines Pseudoelements, um die Unterüberschrift zu platzieren, wie z.B.:

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

.card-head::before {
  content: attr(data-subheading);
  display: block;
  font-size: 75%;
  opacity: 0.75;
}

Früher haben Screenreader Pseudoinhalte ignoriert, aber es ist besser geworden, aber immer noch nicht perfekt. Das macht dies nur etwas nutzbarer, aber der Text ist immer noch nicht auswählbar und nicht auf der Seite auffindbar, also würde ich das lieber lassen.