Bedeutung und Einsatz von Überschriften

Diagonales Lesen ermöglichen

Webseiten werden kaum wie Romane von der ersten bis zur letzten Zeile gelesen. Vielfach wird lediglich nach einzelnen Inhalten oder Funktionalitäten recherchiert. Überschriften stellen dabei eine wesentliche Orientierungshilfe dar.

Für das diagonale Lesen müssen Überschriften zunächst als Blickfang visuell hervorgehoben werden. Redaktionell sollten sie den folgenden Inhalt knapp und präzise zusammenfassen. Und damit vor allem blinde Menschen diagonal einen Seiteninhalt erarbeiten können, muss jede Überschrift auch technisch angemessen in der entsprechenden Überschriftenebene realisiert werden.

Missbrauch von Markup für Überschriften

Das Markup für Überschriften darf nicht missbräuchlich zur visuellen Formatierung oder Hervorhebung von Seitenelementen verwendet werden. Was technisch als Überschrift gekennzeichnet ist, muss tatsächlich eine Überschrift sein.

Leider werden Textabschnitte in folgenden Kontexten häufig missverständlich eingesetzt:

Hervorhebung statt Überschriftensemantik

Redaktionell Verantwortlichen steht im CMS in der Regel die Möglichkeit zur Verfügung, einen Absatz als Überschrift zu formatieren. Dies ändert das visuelle Erscheinungsbild des Absatzes. Leider werden auf diese Weise unreflektiert Absätze missbräuchlich hervorgehoben.

Zur semantischen Hervorhebung stehen in HTML die Elemente strong (stark hervorgehoben) und em (emphasized = hervorgehoben) zur Verfügung.

Die entsprechende visuelle Darstellung auf Zweiter Blick entspricht im Wesentlichen der Standarddarstellung der meisten Browser:

Redaktionell Verantwortliche sollten zur Vorbeugung von missbräuchlichem Markup im CMS auch die Möglichkeit erhalten, einen Absatz einfach nur visuell hervorzuheben. Ebenso sollte in einigen Kontexten auch das blockquote-Element zur Kennzeichnung eines Zitatblocks verfügbar sein.

Hervorgehobener Überschriftenzusatz

Wir kennen es aus Zeitungen: Der erste Absatz unter einer Überschrift wird bei längeren Beiträgen visuell hervorgehoben. Um diesen visuellen Effekt zu erzielen, wird einem solchen Folgeabsatz vielfach technisch eine untergeordnete Überschrift zugewiesen. Sofern der erste Absatz unter der Überschrift jedoch nicht als Zwischenüberschrift neben anderen fungiert, ist eine Überschriftensemantik nicht angemessen.

Ein Artikel könnte technisch daher etwa folgendermaßen eingeleitet werden (Der Text ist als fiktiver Zeitungsartikel konstruiert.):

<h2>Barrierefreies Internet auf dem Vormarsch</h2>
<p><strong>Tiroler Gemeinden und Tourismusverbände verbessern ihre digitalen Angebote für alle.</strong></p>
<p>Seit dem Jahr 2019 ist beim Land eine Ombudsstelle für barrierefreies Internet und mobile Anwendungen angesiedelt. Seitdem …</p>

Wenn diese Absätze gelegentlich auch als Subheadings bezeichnet werden, sind sie funktionell jedoch keine Überschriften, sondern erweiterte Informationen zur Überschrift beziehungsweise eine Einleitung zum Inhalt (Intro, Kicker) oder dessen kurze Zusammenfassung (Nutshell paragraph / Nut Graph).

WCAG Erfolgskriterien

1.3.1 Infos und Beziehungen

Was visuell wie eine Überschrift aussieht, muss auch technisch als Überschrift realisiert sein.

Überschriften dürfen nicht missbräuchlich eingesetzt werden, um visuelle Effekte zu erzielen.
(F43 Failure Example 1: A heading used only for visual effect)

1.3.2 Bedeutungstragende Reihenfolge

Sofern die Abfolge der Überschriften von Relevanz für die Bedeutung des Inhalts ist, muss die Abfolge auch technisch bedeutungstragend dargestellt werden können.

Probleme treten durch Umgruppieren von Inhalt mittels CSS oder unsorgsame Realisierung von PDF-Dateien auf.

1.4.3: Kontrast (Minimum)

Überschriften benötigen einen bestimmten Helligkeitskontrast zum Hintergrund, auch wenn sie über eine erhöhte Schriftgröße verfügen.

2.4.6 Überschriften und Beschriftungen

Vorhandenen Überschriften müssen den folgenden Inhalt aussagekräftig beschreiben.

2.4.10 Abschnittsüberschriften

Konformitätsstufe AAA

Textabschnitte sind zur Strukturierung mit Überschriften zu versehen.