HTML Elemente
Schriftzug <header> und ausgegraut <main> und <footer> übereinander.

HTML header Element
[Materialsammlung]

Die meisten Webseiten verfügen im oberen Bereich über Inhalte und Mechanismen, die für den gesamten Webauftritt von Relevanz sind. Zur Kennzeichnung dieses Bereiches muss seit HTML5 das header-Element verwendet werden.

Das Element dient laut Spezifikation zu Zwecken der Einleitung und Navigation. Die Beispiele in der Spezifikation erscheinen teilweise der Nutzungsfreundlichkeit für Screen Reader entgegenzustehen.

Inhaltsmerkmale

Typischerweise enthält der Kopfbereich folgende Elemente:

Das Erfolgskriterium 2.4.1 verlangt Mechanismen zum Überspringen von gleichlautenden Blöcken innerhalb eines Webauftritts. Standortangaben (Breadcrumbs) enthalten seitenspezifische Angaben. Sie kommen daher zweckmäßig in den Hauptinhalt,.

Auch Angaben zu Autor*innen sollten aus diesem Grund in den Hauptinhalt gelangen, wenn sich diese auf eine einzelne Webseite beziehen.

Mit dem ARIA-Attribut role="banner" kann einem Element die Semantik eines <header> zugewiesen werden. Allerdings sollte bevorzugt das native HTML-Element verwendet werden.

Eine redundante Verwendung des HTML-Elements mit dem ARIA-Attribut ist nicht nötig. Validationstools liefern teilweise eine Warnung, die wir uns bei einem Verzicht auf die Redundanz ersparen:

<header role="banner">

header-Element im Hauptinhalt (main)

Das header-Element kann mit Vorsicht auch zur Kennzeichnung markanter Kopfbereiche in section- oder article-Elementen verwendet werden.

Screen Reader führen diese Kopfbereiche für Abschnitte beim Auflisten der Seitenregionen an. Wird die Liste der Seitenregionen dadurch sehr lange, verliert sie die Funktion, einen raschen Überblick über den Seitenaufbau zu ermöglichen.

Wenn sich auf einer Webseite mehrere Abschnitte mit einem header-Element befinden, empfiehlt es sich, jedes einzelne mit einem aria-label zu beschriften. Ansonsten listen Screen Reader beim Abruf von Seitenregionen jeweils nur Bereiche auf, die als Banner bezeichnet sind.

Überschrift als einziger header-Inhalt

Es ist aus der Perspektive der Nutzungsfreundlichkeit für Screen Reader nicht nötig und zudem störend, jede Überschrift in ein header-Element einzubetten. Die zusätzliche Semantik ergibt nur einen Sinn, wenn sich im header signifikante Elemente, wie etwa ein Inhaltsverzeichnis für den Abschnitt befindet.

<header>
  <h2>[Beschriftung der Überschriften]</h2>
</header

Syntaxfehler

Eine Verschachtelung in einem footer oder einem anderen header ist nicht zulässig.

<header>
  <header> […] </header> 
</header>

<footer>
  <header> […] </header> 
</footer>