FigmaOpenCode

Label

Synonyme: Beschriftung, Kennzeichnung, Bezeichnung
Ähnliche Komponenten: Body

Kurzbeschreibung

Ein Label dient der Beschriftung interaktiver Elemente und macht deren Funktion klar verständlich.

Beispiele

Varianten

Code anzeigen

<p class="kern-label kern-label--large">Dieses Label ist in der Größe „large" dargestellt. Es eignet sich für hervorgehobene Eingabebereiche oder komplexere Formularstrukturen.</p>
<p class="kern-label">Dieses Label ist in der Größe „default" dargestellt. Es dient der eindeutigen Beschriftung von Eingabe- oder Auswahlfeldern und sollte standardmäßig verwendet werden.</p>
<p class="kern-label kern-label--small">Dieses Label ist in der Größe „small" dargestellt. Es wird verwendet, wenn wenig Platz zur Verfügung steht – z.&#8239;B. in Cards. Aufgrund der geringeren Lesbarkeit sollte diese Variante nur sparsam eingesetzt werden.</p>

Beschreibung

Label ist eine Textkomponente zur Beschriftung interaktiver Elemente. Sie stellt sicher, dass Nutzende Formulareingaben, Buttons oder Kontrollfelder schnell und eindeutig zuordnen können. Ein Label besteht aus einem kurzen, beschreibenden Text. Sie sollten klar, kurz und verständlich formuliert sein – idealerweise in wenigen Worten. Labels stehen dabei stets oberhalb oder – bei Checkboxen und Radios – rechts neben dem zugehörigen Element. Labels gibt es in den Größen „small“, „default“ und „large“. Der Stil ist funktional, klar lesbar und bewusst zurückhaltend gestaltet, um anderen Elementen wie Eingabefeldern nicht die visuelle Priorität zu nehmen.

Verwendungsregeln

Verwende label-default, um Eingabefelder, Auswahlfelder (z. B. Select, Checkbox, Radio) oder interaktive Schaltflächen eindeutig zu beschriften. Die Größe label-large eignet sich für besonders hervorgehobene Eingabebereiche oder in komplexeren Formularstrukturen.
label-small wird genutzt, wenn wenig Platz zur Verfügung steht oder zusätzliche Felder z. B. in Dialogen oder mobilen Ansichten beschriftet werden müssen. Da kleinere Schriftgrößen schwerer lesbar sind, sollte dieser Stil nur gezielt und sparsam eingesetzt werden.

Dos und Don’ts

• Formuliere Labels klar, präzise und selbsterklärend – zum Beispiel „E-Mail-Adresse“ statt „Eingabe“.
• Beschrifte jedes interaktive Element (z. B. Eingabefeld oder Button) mit einem passenden Label.
• Positioniere das Label in der Regel oberhalb des zugehörigen Elements. In Ausnahmefällen – etwa bei kompakten UI-Varianten – kann es auch innerhalb stehen.
• Halte Labels möglichst kurz, sodass sie gut in einer Zeile erfassbar sind.
• Gestalte Labels nicht selbst durch manuelle Style-Anpassungen. Nutze stattdessen die vorgesehenen Varianten.
• Setze Labels nicht für erklärende Texte oder längere Hinweise ein – nutze hierfür die Textkomponente Body.

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

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

Implementierungsabhängig

WCAG 1.4.10

Label 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

Label wird als echten Text und nicht als Bild dargestellt

Bestanden

WCAG 1.4.6

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

Bestanden

WCAG 1.4.12

Label ist bei angepassten Zeilenabständen lesbar