Überschriften
Symbolgrafik für Überschrift: Schriftzug H1 über Balken, die einen Absatz symbolisieren.

Technische Realisierung von Überschriften

Überschriften müssen technisch als solche gekennzeichnet werden. In HTML gelingt dies durch ein einfaches Markup.

Wo semantisches Markup im Web Design nicht verwendet werden kann, stehen ARIA-Anweisungen zur Verfügung.

Darüber hinaus ist es zweckmäßig, Überschriften mit einer eindeutigen ID zu versehen.

HTML Markup für Überschriften

Was visuell als Überschrift fungiert, muss technisch mit dem entsprechenden Markup versehen werden. Es genügt nicht, einen Textbereich mit vertikalen Abständen zu versehen und ihn größer oder fetter zu formatieren. Solche visuellen Effekte sind zwar erforderlich, reichen aber für die Barrierefreiheit nicht aus.

Für eine Überschrift der Ebene 1 sieht der Code beispielsweise folgendermaßen aus:

<h1>Technische Realisierung von Überschriften</h1>

Die Ziffer im Überschriften-Tag steht für die Überschriftenebene. Zulässig sind Überschriften von Ebene 1 bis 6, allerdings empfiehlt sich im Sinne der Nutzungsfreundlichkeit eine flachere Überschriftenhierarchie zu überlegen.

Ein adäquates Markup erleichtert im Übrigen die Lesbarkeit des Codes und die zentrale Formatierung mittels einer zentralen CSS-Datei.

WHATWG | The h1, h2, h3, h4, h5, and h6 elements
Die HTML-Spezifikation für Überschriften und Überschriftenebenen.

Problematisches Markup für Überschriften

<strong> als Überschrift

ARIA-Anweisungen für Überschriften

In der Regel sollte in HTML das entsprechende Markup für Überschriften verwendet werden. Falls dies nicht möglich ist, stehen ARIA-Anweisungen zur Verfügung.

role="heading"

Mit dem ARIA-Attribut role="heading" wird einem Element die Rolle als Überschrift zugewiesen:

<div role="heading" >Technische Realisierung von Überschriften</div>

Ein Element mit dem ARIA-Attribut role="heading" bedarf einer Zuweisung der Ebene mittels aria-level. Fehlt eine entsprechende Zuweisung, wird dem Element die Überschriftenebene 2 als Standardwert zugewiesen:

[Beispiel:] Überschrift ohne ARIA-Level.

WAI ARIA | heading (role)
Die Spezifikation für die ARIA Rolle heading für Überschriften.
WAI Techniques | ARIA12: Using role=heading to identify headings
WAI Technikhinweis zum Einsatz von role="heading".

aria-level

Befinden sich auf einer Webseite mehr als eine Überschrift und unterscheiden sich Überschriftenebenen visuell, muss die Überschriftenhierarchie adäquat mit dem aria-level-Attribut versehen werden. Der Code könnte insgesamt also folgendermaßen aussehen:

<div role="heading" aria-level="1">Technische Realisierung von Überschriften</div>
WAI ARIA | aria-level (property)
Die Spezifikation für die Eigenschaft aria-level.

ID Attribut

Es empfiehlt sich, jeder Überschrift eine eindeutige ID zuzuweisen. Dies ist einerseits nötig, um allenfalls ein verlinktes Inhaltsverzeichnis einer Webseite zu erstellen, andererseits erlaubt es, von einer anderen Webseite direkt auf einen Seitenbereich zu verlinken.

Der Code für die Überschrift mit einem id-Attribut könnte etwa folgendermaßen aussehen:

<h2 id="id-attribute">ID-Attribut</h2>

In einem Inhaltsverzeichnis würde der Code für einen Link zu dieser Überschrift entsprechend folgendermaßen aussehen:

<a href="#id-attribute">ID-Attribut</a>
  • Der Wert eines id-Attributs muss auf einer Webseite einzigartig sein. (Erfolgskriterium 4.1.1)
  • Es ist zur besseren Lesbarkeit von Codes hilfreich, als Text für die ID keine Zufallswerte zu generieren, sondern eine Zeichenfolge mit inhaltlichem Bezug zum Element zu verwenden.
  • Umlaute, Leerzeichen und Sonderzeichen sind nicht für IDs zulässig.
WHATWG | The h1, h2, h3, h4, h5, and h6 elements
Die HTML-Spezifikation für .

Überschrift mit Zusatzinformation (<hgroup>)

Überschriften werden gelegentlich mit einem ergänzenden Absatz versehen, der den Überschriftentext vertieft, den folgenden Inhalt knapp zusammenfasst oder auch bloß als Teaser dient.

Technisch werden diese Zusatzinformationen oft als untergeordnete Überschrift (h2-h6) oder als strong-Element realisiert. Beides entspricht nicht der jeweiligen Spezifikation und ist als Fehler in Bezug auf das Erfolgskriterium 1.3.1 (Info und Beziehungen) einzustufen. Überschriften leiten einen neuen Abschnitt ein, was bei einer Zusatzinformation zur Überschrift nicht der Fall ist.

<hgroup>-Element (heading group)