Überschriften
Eine Überschrift umschreibt mit aussagekräftigen Begriffen den nachfolgenden Inhalt. Ein Leser oder auch eine Suchmaschine entscheiden somit, ob dieser Beitrag interessante bzw. relevante Informationen enthält.
Für die hierarchische Textgliederung sind verschiedene Überschriften mit den Tags H1 bis H3 definiert.
Verwendung
Zur Strukturierung des Inhalts existieren drei Überschriftenebenen: H1, H2. H3 und H4. Während H1 immer nur einmal am Anfang der Seite verwendet wird, dürfen H2, H3 und H4 beliebig oft in einer Seite auftauchen.
Die Überschriften müssen dabei in der richtigen Reihenfolge eingesetzt werden: H1 > H2 > H3 > H4
Die Schriftgröße, Farben sowie die Abstände über- und unterhalb der einzelnen Überschriften-Level sowie zwischen den übrigen Content-Modulen sind für die verschiedenen Bildschirmauflösungen fest definiert.
Einsatz
Headline 1 | Rotis Sans Serif Bold 36 px |
Headline 2 | Rotis Sans Serif Bold 25 px |
Headline 3 | Rotis Sans Serif Bold 19 px |
Headline 4 | Rotis Sans Serif Bold 13 px |
Verhalten und Gestaltung
Die Überschriften haben neben der fest definierten Schrift und Schriftgröße auch eine Farbdefinition. Für H1 und H2 wird die gewählte Portalfarbe hinterlegt, H3 und H4 hingegen bleiben in der Textfarbe.
Barrierefreiheit
Die Verwendung von Überschriften ist eine wesentliche Voraussetzung um die Struktur der Seite zugänglich und nutzbar zu machen. Screenreadern können damit den Aufbau der Seite besser wiedergegeben und es dem Benutzer ermöglichen, sich in dieser Struktur von Überschrift zu Überschrift zu bewegen.
Es ist dabei wichtig, die Hierarchieebenen (h1 bis h6) der durch Überschriften unterteilten Abschnitte einzuhalten. D.h. dass die Überschriften aufeinander folgender Abschnitte immer die gleiche, höhere oder direkt darunter liegende Ebene haben müssen (z.B. h2 gefolgt von h2, gefolgt von h3). Dabei sollten Ebenen möglichst nicht übersprungen werden (also nicht h2 gefolgt von h4).