FigmaOpenCode

Badge

Synonyme: Hinweis, Plakette, Kennzeichen
Ähnliche Komponenten: Alert, Chips, Toast

Kurzbeschreibung

Ein Badge gibt einen knappen Status-Hinweis zu einem übergeordneten Element.

Beispiele

Varianten

Code anzeigen

<span class="kern-badge kern-badge--info">
<span class="kern-label kern-label--small">Information</span>
</span>
<span class="kern-badge kern-badge--success">
<span class="kern-label kern-label--small">Erfolg</span>
</span>
<span class="kern-badge kern-badge--warning">
<span class="kern-label kern-label--small">Warnung</span>
</span>
<span class="kern-badge kern-badge--danger">
<span class="kern-label kern-label--small">Fehler</span>
</span>

Varianten mit Icon

Code anzeigen

<span class="kern-badge kern-badge--info">
<span class="kern-icon kern-icon--info" aria-hidden="true"></span>
<span class="kern-label kern-label--small">Information</span>
</span>

<span class="kern-badge kern-badge--success">
<span class="kern-icon kern-icon--success" aria-hidden="true"></span>
<span class="kern-label kern-label--small">Erfolg</span>
</span>

<span class="kern-badge kern-badge--warning">
<span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
<span class="kern-label kern-label--small">Warnung</span>
</span>

<span class="kern-badge kern-badge--danger">
<span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
<span class="kern-label kern-label--small">Fehler</span>
</span>

Beschreibung

Mit einem Badge kannst Du einen kompakten Status-Hinweis zu einem übergeordneten Element geben. Es zeigt beispielsweise an, ob ein Antrag erfolgreich übertragen wurde, ob er sich in Bearbeitung befindet oder ob Probleme dabei aufgetreten sind. Ein Badge besteht aus einem Icon und einem beschreibenden – idealerweise sehr kurzen aber dennoch präzisen – Begriff als Label. Steht nur wenig Raum zur Verfügung, kann das Icon weggelassen werden, sofern die Aussage erhalten bleibt. Badges sind nicht interaktiv. Um unmittelbares Feedback auf eine vorangegangene Aktion zu geben, verwende die Komponente „Alert“. Wir unterscheiden vier verschiedene Zustände, die farblich fest kodiert sind: Info (blau), Success (grün), Warning (gelb) und Danger (rot). Zu den Einsatzzwecken lies bitte bei den Verwendungsregeln weiter.

Verwendungsregeln

Badges weisen den Status eines Elements nur sehr stark verkürzt aus. Nutze Badges, um Nutzer:innen eine erste Orientierung zu vorangegangenen Aktionen zu geben. Die kompakte Form eignet sich vor allem für Übersichten, in denen der Status verschiedener Prozesse kurzgefasst und auf einen Blick erkennbar dargestellt werden soll. Signalisiere mit Badges, ob weitere Aktionen seitens des Nutzenden erforderlich sind. Biete den Nutzenden zusätzlich zum Badge die Möglichkeit, das Element genauer und detaillierter einzusehen oder zu bearbeiten.

Information, blau

Einfache Status-Information: Das Element befindet sich in einem stabilen Zustand, der aktuell von keiner Seite beeinflusst oder verändert wird. Es besteht kein Handlungsbedarf.

Erfolgreich, grün

Das Success-Badge kennzeichnet einen geschlossenen Zustand und kann in zwei Weisen angewandt werden: 1. Es veranschaulicht, dass eine Aktion erfolgreich ausgeführt, ein vorangegangener Prozess erfolgreich durchlaufen wurde oder einzugebende Daten vollständig vorliegen. Eine weitere Aktion seitens des Nutzenden ist nicht erforderlich. Umgangssprachlich wäre hier „Alles im grünen Bereich“. 2. Die Voraussetzungen für einen Prozess oder eine Aktion sind erfüllt, der bzw. die nun gestartet werden kann. Umgangssprachlich bekäme man hier „grünes Licht“.

Warnung, gelb

Das Warning-Badge signalisiert einen offenen Zustand, der die Aufmerksamkeit des Nutzenden oder eine Aktion erforderlich macht. Das Warning-Badge kann daher auf zwei Weisen angewandt werden: 1. Kenntnisnahme: Kennzeichnung eines in Bearbeitung oder Veränderung befindlichen Zustands, beispielsweise dass ein Prozess läuft. 2. Eine Aktion ist erforderlich: ein Prozess kann nicht gestartet oder abgeschlossen werden, Daten liegen nicht vollständig vor. Aus dem Kontext muss sich ergeben, ob hier lediglich die Kenntnisnahme gewünscht ist, oder ob eine Aktion seitens des Nutzenden erforderlich ist.

Fehler, rot

Das Danger-Badge signalisiert, dass von Seiten des Nutzenden eine Aktion oder Reaktion erforderlich ist. Insbesondere bei diesem Status ist eine Verlinkung des betreffenden Elements auf weitere Erläuterungen wichtig. Erkläre, welche Aktion von dem/der Nutzer:in möglich oder erforderlich ist.

Badge mit Icon

Im Badge-Komponenten-Design wird das Attribut aria-hidden="true" standardmäßig auf das Icon gesetzt, da der Text des Badges in den meisten Fällen ausreichend aussagekräftig ist. Das Icon fungiert hier nur als visuelles Schmuckelement, das den Inhalt unterstützt, aber keine zusätzliche Bedeutung trägt.

Sollte das Icon jedoch in bestimmten Fällen für Screenreader zugänglich sein, kann aria-hidden auf false gesetzt und zusätzlich ein aria-label hinzugefügt werden. Dies ermöglicht es Screenreadern, das Icon zu erfassen und seinen Zweck den Nutzer:innen klar zu vermitteln.

Mehr Infos: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

Dos und Don’ts

Sorge dafür, dass Badges keine anderen Elemente überdecken.

Verändere nicht das Farbschema.

Ein Objekt soll nicht mehrere Status aufweisen.

Weitere Hinweise

• Minimiere das Badge bei geringem Platzangebot auf das Label oder auf das Icon, wenn die Aussage damit erhalten bleibt.
• Komplexere Status-Hinweise lassen sich besser mit der Alert/Notification/Toast-Komponenten kommunizieren.

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.3.1

Wenn ein Badge in Beziehung zu anderen Inhalten steht, sind diese programmatisch erkennbar

Implementierungsabhängig

WCAG 1.3.3

Das Badge darf nicht ausschließlich über Farbe, Form oder Position beschrieben werden.

Implementierungsabhängig

WCAG 3.2.4

Gleichartige Badges sind konsistent bezeichnet und dargestellt.

Implementierungsabhängig

WCAG 3.3.2

Badges sind eindeutig beschriftet

Implementierungsabhängig

WCAG 4.1.3

Badges mit dynamischen Inhalten werden von Screenreadern angekündigt.

Bestanden

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

Bestanden

WCAG 1.1.1

Badges verwenden keine Zeichen um Icons darzustellen

Bestanden

WCAG 1.1.1

Badges verwenden nicht ausschließlich Icons, um Inhalte zu vermitteln

Bestanden

WCAG 1.4.6

Text auf Badges erfüllt das minimale Kontrastverhältnis von 7:1.

Bestanden

WCAG 1.4.11

Badges heben sich mit mindestens mit einem Konstras von 3:1 vom Umfeld ab.

Siehe auch: BFIT Handreichungen