
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:
- Logo (mit einer Verlinkung zur Startseite)
- Suchformular oder andere Suchfunktionalitäten
- Navigationsmechanismen für den Webauftritt (Hauptnavigation).
- Accessibility Tools
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.
ARIA Äquivalent: 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.
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:
<headerrole="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>