Großer fetter Text macht noch lange keine Überschrift veröffentlicht in 2009/2011

die `H1`-Debatte

Generell sollte der Inhalt einer Webseite mit einer H1 beginnen. Im Inhaltsbereich sollten die nachfolgenden Überschriften aufeinander aufbauen, d.h. eine H2 folgt auf H1 und eine H3 auf H2. Wenn möglich, sollte man es vermeiden, eine Überschriftenebene zu überspringen, also z.B. direkt von der zweiten auf die vierte Ordnung überzugehen.

Die Ebene der Hauptüberschrift eines Artikels ist in der Praxis meist eine H1 oder eine H2. Oft ist die Hauptüberschrift gleichzeitig auch der Dokumenttitel der Webseite.

Im folgenden Beispiel wird davon ausgegangen, dass ein Artikel mit einer Überschrift der Ebene 1 (H1) beginnt. Die nachgeordneten Überschriften werden logisch untergeordnet. Die Ordnungszahlen im folgenden Beispiel dienen lediglich der besseren Nachvollziehbarkeit:

<h1>Alles über Überschriften</h1> <h2>1. Einleitung</h2> <h2>2. Überschriften auf Webseiten</h2> <h3>2.1 Überschriften im Inhalt</h3> <h4>2.1.1 Gliederung von Inhalten</h4> <h4>2.1.2 Alternativen zu Überschriften bei Formularen und Tabellen</h4> <h4>2.1.3 Überschriftentexte</h4> <h3>2.2 Überschriften auf anderen Seitenbereichen</h3> <h4>2.2.1 Strukturelle Navigation</h4> <h4>2.2.2 Alternative zu Überschriften</h4> <h2>3. Zusammenfassung</h2>

Nun werden einige sagen, dass Webseiten auch für das Logo eine Überschrift benötigen, so dass die Überschriftenstruktur der Seite wie folgt aussehen müsste:

<h1>Logo der Seite</h1> <h2>Alles ÃŒber Ãberschriften</h2> <h3>1. Einleitung</h3> <h3>2. Ãberschriften auf Webseiten</h3> <h4>2.1 Ãberschriften im Inhalt</h4> <h5>2.1.1 Gliederung von Inhalten</h5> <h5>2.1.2 Alternativen zu Ãberschriften bei Formularen und Tabellen</h5> <h5>2.1.3 Ãberschriftentexte</h5> <h4>2.2 Ãberschriften auf anderen Seitenbereichen</h4> <h5>2.2.1 Strukturelle Navigation</h5> <h5>2.2.2 Alternative zu Ãberschriften</h5> <h3>3. Zusammenfassung</h3>

Anders als in Textverarbeitungsprogrammen gibt es in HTML kein semantisches Element für das Logo oder den Titel einer Webseite. Der Dokumenttitel (TITLE) im Kopfbereich der Seite übernimmt diese Funktion.

In den Intern: Richtlinien für barrierefreie Webinhalte lässt sich in keinem Erfolgskriterium eine Vorgabe für die erste inhaltliche Überschrift finden. Vielmehr wird auf abstrakter Weise gefordert, dass sich die visuell wahrgenommenen Strukturen auch im HTML wieder finden. Allerdings wird in den Techniken mit Beispielen zu Überschriften darauf geachtet, dass die inhaltlichen Überschriften stets mit H1 ausgezeichnet werden.

Die Diskussionen über Überschriftenebenen werden immer wieder geführt. Die generelle Frage lautet dabei, ob das Logo oder die inhaltliche Hauptüberschrift die erste H1 erhalten soll. Eine interessante und laufende Umfrage dazu findet sich auf Extern, englischsprachig: www.h1debate.com. Das letzte Mal, wo ich dort vorbei geschaut habe, waren ca. 70% für die inhaltliche Hauptüberschrift und 30% für das Logo.

Für mich ist es ganz klar:

Die inhaltliche Hauptüberschrift ist ein, wenn nicht der erste Anlaufpunkt auf einer Webseite. Die Verwendung einer H1 für ausschließlich den Inhalt erleichtert die strukturelle Navigation erheblich. Von dieser konkreten Auszeichnung profitieren vor allem Screenreadernutzer.
Das Logo befindet sich auf allen Seiten und leitet keine eigenen Inhalte ein und deswegen ist es per Definition keine Überschrift.

Natürlich passt das Beispiel nicht für alle Webseiten. Für manche Seiten macht es Sinn, mehrere Überschriften erster Ordnung einzusetzen, etwa wenn auf einer Seite verschiedene Themen angesprochen werden, die wenig oder gar nichts miteinander zu tun haben. Nachrichtenportale sind ein Beispiel dafür. In unserem Beispiel handelt es sich aber offenbar um einen zusammenhängenden Text, welcher mit einer einzigen H1-Überschrift auskommt.