Badge
Verwendung
Überblick
Mit Badges können Informationen zu neuen oder aktualisierten Inhalten separat angegeben werden. Sie zeigen numerische Werte und Zähler an, z. B. die Anzahl der verfügbaren Aktualisierungen oder die Anzahl der ungelesenen Nachrichten. Der numerische Wert im Badge ändert sich dynamisch in Echtzeit, wenn weitere Benachrichtigungen erfolgen.
Zu verwenden
- Zum Anzeigen von Informationen zu neuen oder aktualisierten Inhalten als numerischer Wert.
- In Systemen mit komplexen Workflows, die Zusammenarbeit erfordern. Dadurch können Benutzer sich bei wichtigen Aktivitäten auf dem Laufenden halten.
- Zum Informieren von Benutzern über wichtige Softwareupdates, z. B. Fehlerkorrekturen oder neu hinzugefügte Funktionen.
Nicht zu verwenden
- Für nicht numerische Statusinformationen. Verwenden Sie stattdessen die Komponente InfoLabel.
- Zum Kategorisieren von Elementen und Filtern von Daten. Verwenden Sie stattdessen Tags.
Formatierung
Aufbau
Die Badge-Komponente besteht aus den folgenden Elementen:
- Container mit einer bestimmten, vom Anwendungsfall abhängigen Farbfüllung.
- Beschriftung, die eine Zahl anzeigt. Informationen zum Umgang mit großen Zahlenwerten finden Sie unter Best Practices.
Typen
Badges sind in verschiedenen Farben gehalten, die eine bestimmte Bedeutung haben:
- Primär: Verwenden Sie das primäre Badge, wenn Elemente im Zusammenhang mit einem Workflow nachverfolgt werden.
- Benachrichtigung: Verwenden Sie das Benachrichtigungs-Badge, um Symbole einzublenden und neue und aktualisierte Inhalte zu übermitteln, z. B. die Anzahl der ungelesenen Nachrichten.
- Neutral: Verwenden Sie das neutrale Badge für nicht wesentliche Informationen.
- Invertiert: Verwenden Sie das invertierte Badge, um den Farbkontrast vor einem dunklen Hintergrund beizubehalten.
Best Practices
- Verwenden Sie eine einheitliche Position von Badge-Überlagerungen innerhalb eines Produkts oder einer Benutzeroberfläche.
- Verwenden Sie Badges als eigenständige Komponente (links) oder als Überlagerung (rechts).
- Jutro verfügt über die Eigenschaft
maxValue, mit der der Höchstwert für das Badge festgelegt werden kann. Wenn die Eigenschaftvaluegrößer alsmaxValueist, wird im Badge „maxValue+“ angezeigt. Wenn es einen Anwendungsfall mit Tausenden von Threads, Instanzen oder Fehlern gibt, wird empfohlen, einen Wert für die EigenschaftmaxValuefestzulegen.
| Badge als eigenständige Komponente | Badge als Überlagerung |
|---|---|
 |  |
Interaktionen
Maus
- Durch Klicken auf ein Badge, das ein Symbol überlagert, wird eine Liste mit weiteren Informationen zu den jeweiligen Benachrichtigungen angezeigt.
- Ein Link kann in einer Liste angezeigt werden, die mit einem Badge verknüpft ist. Durch Klicken auf diese Links können Benutzer Aktionen auslösen. Zum Beispiel „Alle Benachrichtigungen anzeigen“ oder „Zu neuen Meldungen wechseln“.
- Badges werden ausgeblendet, nachdem Benutzer darauf geklickt haben.
Screenreader
Die Badge-Komponente umfasst die Attribute aria-live="polite" und aria-atomic="true". Benutzer von Screenreadern werden benachrichtigt, wenn Inhalte aktualisiert werden. Mit dem liveRegionContext-Knopf in Storybook können Entwickler Kontext zur Bedeutung von Badges bereitstellen.
Barrierefreiheit
Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:
- Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
- Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
- Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
- Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
Wenn Sie benutzerdefinierte Farbschemas auf den Badge-Hintergrund anwenden, achten Sie darauf, dass die Kontrastverhältnisse dem zulässigen Schwellenwert von 4,5:1 entsprechen.