FigmaOpenCode

Heading

Synonyme: Überschrift, Seitentitel
Ähnliche Komponenten: Title, Preline, Subline

Kurzbeschreibung

Eine Heading strukturiert und beschreibt Inhaltsabschnitte, um Nutzenden und assistiven Technologien eine schnelle Orientierung zu ermöglichen.

Beispiele

Varianten

Code anzeigen

<h1 class="kern-heading-display">Heading-display</h1>
<h2 class="kern-heading-x-large">Heading-x-large</h2>
<h3 class="kern-heading-large">Heading-large</h3>
<h4 class="kern-heading-medium">Heading-medium</h4>
<h5 class="kern-heading-small">Heading-small</h5>

Beschreibung

Headings gliedern Seiten und Abschnitte klar und nachvollziehbar. Sie fassen die Inhalte der übertitelten Textabschnitte knapp und verständlich zusammen. Headings sind Teil der semantischen Dokumentenstruktur. Die korrekte semantische Auszeichnung wie <h1> bis <h6> sorgt dafür, dass Inhalte strukturiert erfasst, schnell gefunden und barrierefrei gelesen werden können.

Verwendungsregeln

Kennzeichne Überschriften immer mit den passenden HTML-Tags wie <h1>, <h2> usw., um die semantische Struktur deiner Seite sicherzustellen. Verwende zusätzlich eine passende CSS-Klasse – z. B. <h1 class="kern-heading-large"> – um die Überschriften visuell einheitlich zu gestalten. Nutze Headings als Überschriften für die Seite und alle ihre Abschnitte.

Übersicht: Rolle und Verwendung von Überschriftenelementen

Rolle	Verwendung
Title-Tag	Definiert den Seitentitel im Browser-Tab und in den Suchmaschinenergebnissen. Er ist nicht auf der Seite sichtbar, aber essenziell für SEO und die Orientierung im Browser. Der Title-Tag sollte für jede Unterseite konsistent aufgebaut sein. Typischerweise wird ein Title-Tag aus folgenden Teilen zusammengesetzt: Titel der aktuellen Unterseite – Name des Online-Dienstes (gleichbleibend). Beispiel: Persönliche Angaben – Name des Online-Dienstes
H1	Erste sichtbare Überschrift (Hauptüberschrift) auf der Seite. Sollte pro Seite nur einmal verwendet werden. Sie beschreibt präzise den Inhalt der Seite und hilft sowohl Nutzenden als auch Suchmaschinen bei der Einordnung.
H2	Mit H2 strukturierst du die Inhalte einer Seite. Jede Hauptüberschrift eines Abschnitts sollte als H2 ausgezeichnet werden.
H3 und H4	Unterüberschriften innerhalb eines H2-Abschnitts werden mit H3 ausgezeichnet. Falls ein H3-Abschnitt weiter untergliedert werden muss, verwende dafür H4.

Anwendung der visuellen und semantischen Hierarchie

Wähle die visuelle Größe abhängig von der Anzahl der Hierarchieebenen auf deiner Seite. So bleibt die visuelle Gliederung auch bei komplexeren Seiten klar und gut lesbar.

Seiten mit bis zu drei Ebenen

Semantische Ebene	Visuelle Größe
Ebene 1 <h1>	Heading-large
Ebene 2 <h2>	Heading-medium
Ebene 3 <h3>	Heading-small

Seiten mit vier und mehr Ebenen

Semantische Ebene	Visuelle Größe
Ebene 1 <h1>	Heading-x-large
Ebene 2 <h2>	Heading-large
Ebene 3 <h3>	Heading-medium
Ebene 4 <h4>	Heading-small

infoHinweis

In besonderen Fällen kann es sinnvoll sein, von der üblichen visuellen Hierarchie abzuweichen – z. B. bei der Alert-Komponente. Stelle in solchen Fällen sicher, dass die Seite weiterhin barrierefrei bleibt – insbesondere für Screenreader-Nutzende.

Display-Überschrift

Heading-Display ist eine besonders groß gesetzte Überschrift, die ausschließlich für herausgehobene, gestalterisch dominante Aussagen eingesetzt werden sollte. Sie eignet sich nicht zur Strukturierung von Inhalten, sondern wirkt als aufmerksamkeitsstarkes Element zur Einleitung oder visuellen Rahmung.

Verwende diese Komponente nur in Ausnahmefällen, z. B.:

• als starker Einstiegssatz auf einer Landingpage
• als persönliche Begrüßung auf einer Startseite
• zur emotionalen Rahmung eines besonderen Bereichs

Da visuelle Struktur auch immer semantische Bedeutung hat, sollte Heading-display mit <h1> ausgezeichnet werden.

Achtung!

Prüfe bei jedem Einsatz sorgfältig, wie sich die Darstellung auf kleinen Geräten verhält.

Dos und Don’ts

Jede Seite hat nur eine H1.

Nutze niemals händische Textformatierungen – wie Fettungen und Schriftgrößen – um Überschriften für die Inhalte zu erzeugen. Diese werden weder von Suchmaschinen noch von Screenreadern als Überschriften erkannt.

Halte Dich an die hierarchische Reihenfolge der Headings: vor einer H2 darf keine H3 oder H4 stehen.

Schreibe Überschriften mit regulärer Groß- und Kleinschreibung – nicht in Versalien.

Weitere Hinweise

• Halte Überschriften kurz.
• Nutze Headings zur inhaltlichen Strukturierung deiner Inhalte.
• Prüfe, ob umfangreiche Seiten besser in mehrere Seiten aufgeteilt werden sollten.
• Vermeide händisch eingefügte Absatzumbrüche in Headings.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.4.4

Heading ist bis auf 200% vergrößerbar ohne Inhaltsverlust

Implementierungsabhängig

WCAG 1.4.10

Heading ist bei einer Bildschirmbreite von 320px ohne horizontales Scrollen lesbar

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.4.5

Heading wird als echten Text und nicht als Bild dargestellt

Bestanden

WCAG 1.4.6

Heading erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.12

Heading ist bei angepassten Zeilenabständen lesbar