Großer fetter Text macht noch lange keine Überschrift 
veröffentlicht in 2009zuletzt bearbeitet in
Überschriftenhierarchien
Wenn auf Webseiten eine Hierarchie der Überschriften 
visuell erkennbar ist, dann ist die Hierarchie im HTML ebenfalls abzubilden. Visuell erkennbare Überschriftenhierarchien bilden Beziehungen: Meist ist der größere Text eine Hauptüberschrift, weitere Unterteilungen werden kleiner Dargestellt und das daraus gebildete Gefüge an Überschriften erlaubt es dem Nutzer, die Inhalte der Webseite hierarchisch nachzuvollziehen.
In einem Textbeitrag folgt i.d.R. auf eine Hauptüberschrift (H1) eine H2. Unterabschnitte unterhalb eines H2 werden normalerweise mit H3 unterteilt. Das muss aber nicht so sein. In diesem Beitrag geht es um verschiedene Ausnahmen, die bei der Bildung von Überschriftenhierarchien gemacht werden können oder müssen.
Visuell erkennbare Beziehungen zwischen Überschriften
Wenn die Überschriften einer Webseite visuell als Hierarchie wahrgenommen werden können, dann muss diese Ordnung auch strukturell nachvollzogen werden können. Eine 
hierarchische Überschriftenstruktur für die Überschriften einer Webseite ist allgemein empfehlenswert. Allerdings kann dieses Prinzip nicht immer angewandt werden, z.B. wenn das Ausgangsmaterial selbst nicht hierarchisch gegliedert ist. Würden in einem Text die Abschnitte wie folgt nummeriert:
2.7 Strukturelemente in HTML
2.7.1 Datentabellen
2.7.2.1 Überschriften-Elemente
2.7.2.2 Listen
2.7.3 Hervorhebung und Betonung
2.7.4 Strukturelemente in Formularen
wäre die Verwunderung beim Leser vermutlich groß, da bei Kapitel 2.7.2.1 eine Bedeutungsebene (2.7.2) fehlt. Ähnliche Probleme können auf Übersichtsseiten und diversen anderen Inhalten entstehen.
Wenn eine Ordnung am Bildschirm nicht erkennbar ist bzw. wenn eine Überschriftenordnung offenbar unvollständig oder falsch ist, dann stehen Webworker vor einem kleinen Problem: Soll das HTML für Screenreader-Nutzer optimiert werden oder soll die Dokumentenstruktur im HTML abgebildet werden? In diesem Beispiel würde ich tatsächlich eine Überschriftenebene überspringen, weil die Vorlage es so vorsieht. Besser wäre es natürlich, wenn das Ausgangsmaterial überarbeitet werden könnte.
Alternativen zu Überschriften
Überschriftenelemente sind nicht immer das Mittel zur Wahl, um abgesetzten Text auf einer Webseite auszuzeichnen. Insbesondere in Formularen und Datentabellen bietet HTML weitere Elemente für die Auszeichnung von Beschriftungen.
Die folgenden Beispiele sind als Alternative zu Überschriften zu verstehen. Das bedeutet auch, dass die Inhalte bzw. die Beschriftungen nicht in der Überschriftenhierarchie der Webseite stehen.
Formulare
In Formularen sollten Beschriftungen zunächst mit LABEL-Elementen ausgezeichnet werden und mit den jeweiligen Steuerelementen verknüpft werden. Diese Vorgehensweise ist deswegen wichtig, weil Screenreader zum Ausfüllen eines Formulars in einen anderen Modus wechseln müssen und dann Steuerelemente nur über verknüpfte Beschriftungen zuverlässig identifiziert werden können. Überschriften können zwar eingesetzt werden, z.B.:
<h2><label for="suche">Suchbegriffe eingeben</label></h2>
<p><input type="text" id="suche" name="suche" /></p>
aber im Formular- oder Editiermodus eines Screenreaders wird die Semantik gar nicht beachtet. Entscheidend für die Identifizierung des Steuerelements ist der Inhalt des LABEL-Elements und die Verknüpfung zwischen LABEL-Element und Steuerelement.
Gerne werden in Formularen auch FIELDSET-Elemente in Kombination mit LEGEND-Elementen eingesetzt:
<fieldset>
<legend>Persönliche Daten</legend>
<p>
<label for="vorname">Vorname</label>
<input name="vorname" id="vorname" type="text" />
</p>
... Weitere Steuerelemente ...
</fieldset>
Im Formularmodus eines Screenreaders werden solche Gruppenbezeichnungen jedem enthaltenem LABEL-Element vorangestellt, d.h. das erste Steuerelement wird hier als "Persönliche Daten Vorname" identifiziert. Im Einzelfall ist diese Vorgehensweise akzeptabel, aber bei manchen Formularen arten solche Zusatztexte aus und führen zu in Screenreadern nicht einfach auszufüllenden Formularen, insbesondere wenn im LEGEND-Element ein längerer Text steht.
Je nach Formular kann die Verwendung von Überschriften vorteilhafter sein. Das vorherige Beispiel ist ein solcher Fall, denn der Text im LEGEND-Element ist für das Ausfüllen des Eingabefelds nicht zwingend erforderlich:
<h2>Persönliche Daten</h2>
<p>
<label for="vorname">Vorname</label>
<input type="text" name="vorname" id="vorname" />
</p>
In anderen Fällen muss zugunsten eines LEGEND-Elements entschieden werden. Solche Fälle sind oft verbunden mit einer Frage als Beschriftung und verschiedene Antworten als Checkboxen oder Radio-Buttons:
<fieldset>
<legend>Wählen Sie das Obst aus, das Sie am Liebsten essen:</legend>
<p>
<input type="radio" name="obst" value="apfel" id="obst1" />
<label for="obst1">Apfel</label>
</p>
<p>
<input type="radio" name="obst" value="banane" id="obst2" />
<label for="obst2">Banane</label>
</p>
...
</fieldset>
Datentabellen
Ähnlich wie bei Formularen muss auch bei Datentabellen abgewogen werden, ob eine Beschriftung mit einem Überschriftenelement oder mit einer Tabellenüberschrift vorgenommen werden soll. Bei Tabellen können die tabellarischen Inhalte mit CAPTION beschriftet werden:
<table>
<caption>Tabellenüberschrift</caption>
... Tabelleninhalte ...
</table>
Es gibt Situationen, wo eine Überschrift zweckmäßiger ist, z.B. wenn ein Abschnitt oder der gesamte Seiteninhalt aus einer einzigen Tabelle besteht. Eine Überschrift ist deshalb besser, weil in der strukturellen Navigation die Navigation höchstwahrscheinlich über die Überschriftenstruktur erfolgt. Auf jeden Fall sollten beide Techniken alternativ und nicht ergänzend zueinander eingesetzt werden.
Fehlende Semantik
Wer Erfolgskriterium 1.3.1 liest wird vielleicht darüber stolpern, dass visuell erkennbare Strukturen und Beziehungen entweder mittels HTML oder mittels Text abzubilden sind. Da HTML über semantische Elemente verfügt und komplexere Darstellungen zwischenzeitlich mit Rollen semantisch angereichert werden können, ist eine textliche Beschreibung meist nicht erforderlich.
Wo aber textliche Kennzeichnungen für Überschriften erforderlich sind, ist in Adobe Flash und in Java-Applets, denn diese Formate verfügen nicht über Überschriftenelemente.