FigmaOpenCode

Title

Synonyme: Komponententitel, Abschnittstitel
Ähnliche Komponenten: Heading, Subline

Kurzbeschreibung

Ein Title wird für Überschriften innerhalb von Komponenten verwendet.

Beispiele

Varianten

Code anzeigen

<h2 class="kern-title kern-title--large">Dieser Title ist in der Größe „large" dargestellt. Diese Variante eignet sich für prominente Titel in größeren UI-Elementen wie Dialogen oder Cards.</h2>
<h3 class="kern-title">Dieser Title ist in der Größe „default" dargestellt. Diese Standardgröße eignet sich für Cards, Formularabschnitte und Tabellen.</h3>
<h4 class="kern-title kern-title--small">Dieser Title ist in der Größe „small" dargestellt. Er eignet sich für kompakte Layouts mit begrenztem Raum.</h4>

Beschreibung

Title eignet sich für Überschriften innerhalb von Komponenten, z. B. in Cards, Dialogen oder Formularabschnitten. Die Komponente ist in drei Größen verfügbar – „small“, „default“ und „large“.

Sie dient der visuellen Gliederung innerhalb von UI-Elementen und hilft Nutzenden, sich schnell zu orientieren.
Ein Title besteht meist aus einem kurzen, prägnanten Text und wird in der Regel über dem Inhalt platziert, auf den er sich bezieht.

Verwendungsregeln

Verwende Title, um Komponenten prägnant zu benennen – z. B. in Dialogen, Formulargruppen oder Karten. Die Komponente dient der visuellen Gliederung innerhalb von UI-Elementen und unterstützt die schnelle Orientierung im Interface.

Da visuelle Struktur immer auch inhaltliche Struktur bedeutet, muss Title mit einem passenden HTML-<h*>-Element ausgezeichnet werden. Nur so ist die Überschrift auch für assistive Technologien wie Screenreader zugänglich. Diese semantische Auszeichnung verpflichtend, um die Barrierefreiheit nach WCAG und BITV sicherzustellen.

Die Variante „large“ eignet sich für prominente Titel in größeren UI-Elementen wie Dialogen oder Cards.
„Default“ ist die Standardgröße und kann in Formularabschnitten und Tabellen verwendet werden.
Für kompakte Layouts bietet sich „small“ an.

Kombiniere Title bei Bedarf mit Subline innerhalb einer Größenstufe, um zusätzliche Informationen unterhalb des Titels anzuzeigen.

Welche Heading-Ebene soll ich für Title verwenden?

Kontext	Empfohlene Heading-Ebene
Title in Alert, Dialog o. Ä.	<h2> bis <h3>
Title in Card o. Ä.	<h3> bis <h5>
Visuell betonter Text ohne Struktur	Kein Title, sondern z. B. <p> + Klasse

Dos und Don’ts

• Verwende Title, wenn du einen Abschnitt innerhalb einer Komponente klar benennen möchtest.
• Achte auf eine passende HTML-Heading-Ebene (<h2>, <h3> …), um die visuelle Struktur auch semantisch abzubilden.
• Verwende die passende Größe („large“, „default“, „small“) abhängig vom verfügbaren Raum und der visuellen Hierarchie.
• Innerhalb von Title sollten keine zusätzlichen Formatierungen wie Fettdruck verwendet werden, da der Stil bereits visuell hervorgehoben ist.
• Nutze Title nicht für längere Texte oder erklärende Inhalte – dafür gibt es die Body-Komponente.
• Achte darauf, dass Title nicht die einzige Möglichkeit ist, die Funktion eines Abschnitts zu erkennen. Insbesondere bei barrierefreier Nutzung sollte ergänzende semantische Struktur vorhanden sein.

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

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

Implementierungsabhängig

WCAG 1.4.10

Titel 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

Titel wird als echten Text und nicht als Bild dargestellt

Bestanden

WCAG 1.4.6

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

Bestanden

WCAG 1.4.12

Titel ist bei angepassten Zeilenabständen lesbar