Überschriftenebenen

Überschrift Ebene 1

Es sollte ausschließlich der Überschrift des Hauptinhalts eine Überschrift der Ebene 1 zugewiesen werden. Dies erleichtert assistierenden Technologien eine rasche und konsistente Navigation zum Hauptinhalt.

„ A page should typically have only one <h1>. “

Quelle: WebAIM | Semantic Structure: Regions, Headings, and Lists (abgerufen 03.01.2023)

Für Überschriften der Ebene 1 in Dokumenten gelten teilweise abweichende Anforderungen. (Umfangreiche Dokumente, wie Berichte, Gebrauchsanweisungen, Zeitschriften und Ähnliches im PDF-Format, …)

Technische Realisierung

Die Hauptüberschrift jeder Webseite wird als Überschrift der Ebene 1 gekennzeichnet. Wenn eine Webseite über Seitenregionen verfügt, eröffnet die Überschrift der Ebene 1 zweckmäßig den Hauptinhalt (<main>-Bereich).

<main>
  <h1>[Überschriftentext]</h1>
  […]
</main>

Verlinktes Logo

Es gilt als Empfehlung zur Suchmaschinenoptimierung, das Logo im Kopfbereich semantisch als Überschrift zu kennzeichnen. Ob dieser Trick überhaupt wirkt, ist fraglich.

<header>
  <h1>
    <a href="/" >
      <img
        alt="Logo. Zur Startseite"
        src="[…]/meinlogo.png" >
    </a>
  </h1>
  …
</header>

Wenn die Seitenregionen für Kopfbereich und Hauptinhalt semantisch gekennzeichnet sind, kann das Logo wohl als Überschrift der Ebene 1 zugelassen werden.

Auf dieses Markup kann in einem Kopfbereich aus Logo und üblichen Navigationsmechanismen aber gerne verzichtet werden. Entscheidender ist die semantische Kennzeichnung der Region und allfällig verfügbarer Navigations- und Suchbereiche.

Überschrift Ebene 1 verbergen

Auf einer Startseite befindet sich gelegentlich mehrere Überschriften auf derselben Ebene, ohne dass eine singuläre Überschrift der Ebene 1 visuell erwünscht ist. Die entsprechenden Abschnitte enthalten aktuelle Informationen zu Artikeln, Videos und dergleichen.

Die erforderliche Hauptüberschrift der Ebene 1 kann durch CSS-Anweisungen für Screen Reader exklusiv dargestellt werden. Der Code könnte mit einer CSS-Klasse Screen Reader Only (sr-only) etwa folgendermaßen aussehen:

<h1 class="sr-only" >
  Willkommen auf [Webauftritt]
</h1>

Die einzelnen Hauptabschnitte der Seite sollten in diesem Fall als Überschrift der Ebene 2 gekennzeichnet werden (<h2>).

Überschriftenhierarchie

Die Abfolge der Überschriftenebenen muss konsistent sein:

• Auf Ebene 1 folgt Ebene 2:
  

  <h1>
    <h2>
  

• Auf Ebene 2 folgt entweder erneut Ebene 2 oder untergeordneter Inhalt auf Ebene 3:
  

  <h2>
  <h2>
    <h3>
  

• Auf Ebene 3 folgen übergeordnete Inhalte unter Ebene 2, erneut Ebene 3 oder untergeordneter Inhalt unter Ebene 4:
  

  <h2>
    <h3>
  <h2>
    <h3>
    <h3>
      <h4>
  

• …

Überschriftenebenen dürfen also nicht zu Formatierungszwecken übersprungen werden. Diese Strukturierung des Seiteninhalts erleichtert sowohl das Verständnis, als auch das diagonale Lesen und die Navigationsmechanismen innerhalb einer Webseite mittels assistierender Technologien.

Überschriften außerhalb des Hauptinhalts

Der <main>-Bereich sollte also in der Regel mit einer singulären Überschrift der Ebene 1 beginnen. Wie sieht es aber außerhalb des Hauptinhalts aus? Hier sind Überlegungen zur Nutzungsfreundlichkeit angebracht, die insbesondere Nutzungsgewohnheiten berücksichtigen.

Kopfbereich

Der header-Bereich einer Webseite benötigt nicht unbedingt Überschriften. Navigationsbereiche, Suchfunktionalitäten oder Darstellungsangebote können auch ohne Überschrift visuell und technisch intuitiv verständlich gestaltet werden.

Sofern jedoch visuell Überschriften im Kopfbereich vorhanden sind, müssen diese auch über das entsprechende Markup verfügen. Üblicherweise wird dafür die Ebene 2 ohne weitere Verschachtelung eingesetzt.

aside-Bereich

Das <aside>-Element ist in HTML für ergänzende Informationen zum jeweiligen Seiteninhalt vorgesehen.

Der Bereich beginnt typischerweise mit einer Überschrift der Ebene 2. (Linksammlung, Begriffsklärungen, Kontaktangaben zu einer verantwortlichen Abteilung innerhalb einer Organisation, …)

Befinden sich in diesem Bereich weitere sichtbare Überschriften, müssen diese mit dem entsprechenden Markup versehen sein.

Werden Informationen unter Überschriften verschachtelt, muss auf eine angemessene Hierarchie der Überschriftenebenen geachtet werden.

footer-Bereich

Das <footer>-Element ist in HTML für ergänzende Informationen zum gesamten Webauftritt vorgesehen. Typischerweise befinden sich darin Kontaktangaben, Allgemeine Geschäftsbedingungen, ein Impressum und die Barrierefreiheitserklärung.

Befinden sich in diesem Bereich sichtbare Überschriften, müssen diese mit dem entsprechenden Markup versehen sein.

Werden Informationen unter Überschriften verschachtelt, muss auf eine angemessene Hierarchie der Überschriftenebenen geachtet werden.

Meta-Ebene 6?

Gelegentlich wird für Metabereiche die Überschriftenebene 6 verwendet. Für dieses Vorgehen werden folgende Argumente ins Treffen geführt: :

• Die Überschriftenebene 6 kommt im Hauptinhalt wohl kaum einmal vor. Sie kann daher gezielt eingesetzt werden, um einen Navigationsmechanismus für Metabereiche bereitzustellen.
• Screen Reader stellen teilweise eine Funktionalität zur Verfügung, die Überschriften nur bis zu einer bestimmten Ebene auflistet. Bei einer flachen Überschriftenhierarchie kann ein solcher Screen Reader ein exklusives Inhaltsverzeichnis für inhaltliche Informationen generieren.

Diese Strategie ist jedoch kaum bekannt und wird hier auch nicht weiter empfohlen. Validationstools liefern teilweise auch eine Fehlermeldung, weil die Überschriftenhierarchie dabei nicht konsistent ist.