HTML header Element

Definition und Verwendung

Spezifikation

Das Element wird unter den Abschnittselementen (sections) erörtert:

„Das header Element umfasst eine Gruppe von Einleitungen oder Aufgaben zur Navigation.

Ein header Element wird gewöhnlich mit der Absicht zur Verwendung eines Überschriftenelements ( h1-h6 oder hgroup Elements eingesetzt, aber diese sind nicht erforderlich.

Das header Element kann auch zum Verpacken eines Inhaltsverzeichnisses für einen Abschnitt, eines Suchformulars oder eines relevanten Logos verwendet werden.

(Auszugsweise Übersetzung durch Zweiter Blick )

WHATWG | The header element (abgerufen 17.05.2024)

Verwendung

Typischerweise enthält eine Webseite im oberen Bereich Komponenten, die sich innerhalb eines Webauftritts auf Unterseiten wiederholen. Im darauf folgenden Hauptbereich (main) befinden sich die zentralen Informationen zum Thema , das korrekt im Seitentitel beschrieben wird. Auf den meisten Webseiten befinden sich im Fußbereich (footer) weitere Informationen mit Relevanz zum gesamten Webauftritt, die sich auf anderen Unterseiten wiederholen.

Die Komponenten im Kopfbereich werden zweckmäßig in ein header Element verpackt. Darin sind meist folgende Komponenten enthalten:

• Das Logo mit einer Verlinkung zur Startseite.
• Das Suchformular oder andere Suchfunktionalitäten
• Die Hauptnavigation für den Webauftritt und allfällige Zusatznavigationen
• Eine Sprachauswahl, sofern Inhalte in anderen Sprachen verfügbar sind.
• Accessibility Tools

Positionsangaben (Breadcrumbs) und allfällige Angaben zu Autor*innen enthalten seitenspezifische Angaben. Sie kommen daher zweckmäßig in den Hauptinhalt.

Technische Realisierung

HTML Code

Das header Element dient als Container für Komponenten im Kopfbereich. Ein einleitender und abschließender Tag sind erforderlich. Der Code kann etwa folgendermaßen aussehen:

  <header>
    <img alt="Logo [Einrichtung]" …>
    <nav aria-label="Hauptnavigation" …>
    …
  /header>

ARIA Pendant banner

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

Die Spezifikationen für das HTML Element header und die ARIA Rolle banner sind jedoch nicht ganz deckungsgleich. Bei der Verwendung der banner-Rolle sollte sich beispielsweise innerhalb eines Dokuments oder einer Applikation jeweils nur ein Element mit der banner-Rolle befinden.

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"> 

Zulässige Elternelemente

Das Element darf theoretisch in den meisten Elementen verwendet werden. Typischerweise ist es jedoch das erste Kindelement des body-Elements.

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

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

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

Aspekte der Barrierefreiheit

Blöcke umgehen

Das Erfolgskriterium 2.4.1 verlangt Mechanismen zum Überspringen von gleichlautenden Blöcken innerhalb eines Webauftritts. Werden Seitenregionen korrekt und maßvoll eingesetzt, können assistierende Technologien die Navigation erleichtern und insbesondere blinden Menschen beim Erkunden des Aufbaus einer Webseite helfen:

Typischerweise stehen Tastaturmechanismen zum Auflisten oder Navigieren zur Verfügung. Hier exemplarisch die Tastaturbefehle für Seitenregionen in JAWS:

Der header-Bereich befindet sich zweckmäßig ganz oben und benötigt daher selbst keine Navigationsmechanismen. Er sollte jedoch keine Inhalte aufweisen, die sich lediglich auf die aktuelle Webseite beziehen. Ansonsten entspricht der Kopfbereich nicht der Anforderung des Erfolgskriteriums zum Überspringen gleichlautender Informationen über den gesamten Webauftritt.

header-Element im Hauptinhalt (main)

Aus den Beobachtungen mittels einer Testdatei schein es, dass ein header von assistierenden Technologien überwiegend lediglich beim ersten Auftreten auf einer Webseite dargestellt wird. Nur in Firefox wird von JAWS ein header Element auch nach dessen erstem Vorkommen als banner interpretiert.

Das header Element kann daher nicht als zuverlässiges Navigationselement eingesetzt werden. Andererseits kann dessen Verwendung in bestimmten Browser-Screen Reader-Kombinationen, die das header Element interpretieren, die Übersichtlichkeit des Inhalts beeinträchtigen. Screen Reader führen möglicherweise solche Kopfbereiche für Abschnitte beim Auflisten der Seitenregionen auf. Wird die Liste der Seitenregionen dadurch sehr lange, verliert sie die Funktion, einen raschen Überblick über den Seitenaufbau zu ermöglichen.

Werden bewusst auf einer Webseite mehrere Abschnitte mit einem header-Element eingesetzt , empfiehlt es sich, jedes einzelne mit einem aria-label zu beschriften. Ansonsten liefern Screen Reader beim Auflisten von Regionen allenfalls nur die Information banner für den Seitenbereich.

Ü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.

Und auch der Code wird dadurch überfrachtet und nicht lesbarer.

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