Definition und Verwendung

Spezifikation

„Das hgroup Element repräsentiert eine Überschrift und darauf bezogenen Inhalt.
Das Element kann verwendet werden, um ein h1–h6 Element mit einem oder mehreren p Elementen zu gruppieren, welche Inhalte repräsentieren, die eine Unterüberschrift, einen alternativen Titel oder einen Slogan enthalten.“

(Übersetzung durch Zweiter Blick )

WHATWG | The hgroup element (abgerufen 02.09.2023)

Zulässige Kindelemente sind also <h1> bis <h6> und <p>-Tags.

Das hgroup-Element verfügt über eine implizite group-Rolle für ARIA. Eine entsprechende explizite Rollenzuweisung sollte daher vermieden werden.
<hgroup role="group">

Verwendungshorizont

Weder Browser noch assistierende Technologien interpretieren das Element ohne besondere Zusatzmaßnahmen. Dessen Einsatz bleibt daher weithin ein kosmetischer Eingriff in den Code.

Freaks können mit dem Element ihren HTML-Code etwas übersichtlicher strukturieren. Und es genügt, in der CSS-Datei Anweisungen für die HTML-Tags festzulegen:

hgroup h1 {…}
hgroup p {…}

Durch ARIA-Anweisungen kann eine Überschriftengruppe für assistierende Technologien explizit verständlich gemacht werden (siehe unten). Aus Gründen der Nutzungsfreundlichkeit sollten die entsprechenden Maßnahmen jedoch sehr vorsichtig eingesetzt werden.

HTML Code für eine heading group

Das hgroup-Element dient als Container für die Überschrift und Ergänzungen zur Überschrift. Der Code kann etwa folgendermaßen aussehen:

<hgroup>
  <h1>[Text der Überschrift]</h1>
  <p>[Ergänzender Text zur Überschrift]</p>
</hgroup>
<p>[Normaler Text außerhalb der Überschriftengruppe]</p>

Visuelle Realisierung einer heading group

In der Regel wird lediglich die Hauptüberschrift mit einer Zusatzinformation versehen sein. CSS-Anweisungen werden sich daher auf abweichende Darstellungsanweisungen von der Grunddarstellung für h1 reduzieren lassen:

h1 {
  font-size: 3.2ex;
  padding: 1.25ex .8em .5ex 0; 
  …
} 
hgroup h1 {
  padding-bottom: 0; 
} 

Gewöhnliche Absätze in einer Überschriftengruppe werden kleiner als die Überschrift und größer als Absätze außerhalb der Überschriftengruppe dargestellt. Der Absatz unter der Überschrift im folgenden Beispiel könnte eine kurze alternative Überschrift darstellen. Der Größenunterschied zur Überschrift ist daher gering gehalten:

Zur visuellen Darstellung zugeordneter Absätze werden CSS-Anweisungen anstelle von Hervorhebungen durch HTML empfohlen (<strong>, <em>, …). Das Markup innerhalb der Überschriftengruppe sollte wohl schlank gehalten werden.

Der CSS-Code für einen längeren Zusatztext zur Überschrift sollte sich vom Aussehen eher gewöhnlichen Absätzen annähern und könnte etwa folgendermaßen aussehen:

hgroup p {
  font-size: 125%;
  font-weight: bold;
} 

Aspekte der Barrierefreiheit

Assistierende Technologien interpretieren das hgroup-Element bislang nicht ohne explizite zusätzliche ARIA-Anweisungen. Es genügt trotzdem aus Gründen der Nutzungsfreundlichkeit in der Regel, lediglich den Basiscode anzuwenden.

Semantische Informationen nur wenn nötig

Assistierende Technologien versuchen, eine allzu wortreiche Vermittlung der Semantik (Verbosity) zu vermeiden. Daher wird nicht jedes semantische Element für eine Sprachausgabe oder Braillezeile in dessen Bedeutung angegeben. Dieses Verhalten sollte durch besondere Maßnahmen nur in gut begründeten Ausnahmefällen modifiziert werden.

Dass gelegentlich auf eine Überschrift, insbesondere der Hauptüberschrift, ein Zusatztext erscheint, ist erwartbar und im Kontext gewöhnlich intuitiv verständlich.

Mit punktuellen Anpassungen können folgendermaßen vorsichtig semantische Zusatzinformationen vermittelt werden:

Beschriftung des Elements

Die Beschriftung des hgroup-Elements mit aria-label erhöht die Wahrscheinlichkeit, dass ein Screen Reader die Semantik ankündigt. Der Code sieht etwa folgendermaßen aus:

<hgroup aria-label="Überschriftengruppe">
  <h1>[Text der Überschrift]</h1>
  <p>[Ergänzender Text zur Überschrift]</p>
</hgroup>

Dieser Code kann beispielsweise zu folgendem Aussehen führen:

JAWS gibt in der Standardkonfiguration der Version 2024 in diesem Fall Beginn und Ende der Überschriftengruppe an:

Standardrollen

Eine explizite Ergänzung des Elements mit ARIA-Rollen ist in der Regel unangemessen:

• Das hgroup-Element verfügt implizit über die Rolle einer Gruppe (group). Eine explizite Zuweisung ist unnötig.
• Die Kennzeichnung als Region (role="region") ist übertrieben. Regionen sind Komponenten aus mehreren Elementen, wie dem Kopfbereich, der Hauptnavigation oder dem Hauptinhalt. Eine Überschriftengruppe besteht in der Regel hingegen lediglich aus zwei bis drei Elementen.
• Ob die Semantik einer Überschriftengruppe von assistierenden Technologien übergeben wird, sollte deren Anbieter*innen im Austausch mit Nutzer*innen überlassen bleiben.

<hgroup role="group">
<hgroup role="region">

Selbstgebaute Rollenzuweisungen

Theoretisch kann mit dem Attribut aria-roledescription eine individuelle Rolle mit feingeschliffenen Beschriftungen für die gesamte Überschriftengruppe oder die Zusatzinformationen im <p>-Element realisiert werden. Dies sollte jedoch zur Vermeidung von semantischem Wortreichtum für Screen Reader vermieden werden.

Zudem ist die Unterstützung des Attributs durch assistierende Technologien sehr dürftig.

Konfiguration der assistierenden Technologie

Bislang ist keine Umsetzung des hgroup-Elements für sich durch assistierende Technologien zu erwarten. Sollte sich das ändern?

Assistierende Technologien müssen sich im Austausch mit Anwender*innen darauf einigen, welche semantischen Informationen bereitgestellt werden. Die Darstellung der Semantik wird aus guten Gründen auf das Notwendige eingeschränkt.

Optimalerweise lässt sich in der jeweiligen assistierenden Technologie die Darstellung konfigurieren. Dafür sind mir jedoch keine Beispiele bekannt.

Laborprotokolle zum Screen Reader Verhalten