Zum Hauptinhalt springen

Tag

Tag in Storybook

Verwendung​

Überblick​

Ein Tag dient der Beschriftung und Kategorisierung von Elementen mit beschreibenden Schlüsselwörtern. Elemente können einzelne Tags oder eine Tag-Sammlung haben.

Tags sind nützlich für die schnelle Erkennung, die einfache Navigation und das Filtern von Elementen.

Aufbau​

Tag-Formatierung

Tags bestehen aus:

  1. Beschriftung: Text, der das Tag identifiziert. Tags sollten immer Beschriftungen haben. Dabei kann es sich um Suchbegriffe oder Schlüsselwörter handeln.
  2. Schließen-Symbol: das Symbol, auf das Benutzer klicken können, um das Tag zu entfernen.
  3. Tag-Sammlung: eine Gruppe von mehr als einem Tag. Wenn ein Element mehr als ein Tag hat, wird es zu einer Tag-Sammlung.

Best Practices​

  • Wenn Inhalte mehreren Kategorien zugeordnet sind, verwenden Sie Tags, um zwischen ihnen zu unterscheiden.
  • Beschriftungen sollten kurz sein, um das Scannen zu erleichtern, vorzugsweise ein Wort.
  • Verwenden Sie Tags, um Daten zu filtern und Elemente innerhalb einer bestimmten Kategorie anzuzeigen.

Verhalten​

Zustände​

Tags haben als möglichen Zustand „Aktiviert“, „Deaktiviert“, „Schwebend“, „Fokus“ und „Aktiv“:

  • Aktiviert: Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist (Standard). Aktivierte Tags weisen eine Hintergrundfarbe mit HEX # F0F3F6 auf.
  • Deaktiviert: Teilt dem Benutzer mit, dass das Element nicht interaktiv ist. Deaktivierte Tags weisen eine Hintergrundfarbe mit HEX # F9FAFB auf.
  • Schwebend: Zeigt an, dass der Benutzer den Mauszeiger über dem Element platziert hat (nur Desktop). Beim Schweben ist die Hintergrundfarbe der Tags HEX # E1E6EC.
  • Fokus: Gibt eine Rückmeldung darüber, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie eine Tastatur oder Maus. Im Fokus ist die Hintergrundfarbe der Tags HEX # F0F3F6, und das Tag wird von einem Strich mit HEX # A5D7EC umgeben.
  • Aktiv: Gibt eine Rückmeldung darüber, dass der Benutzer auf das Element klickt oder tippt. Aktive Registerkarten haben eine Hintergrundfarbe mit HEX # D1D9E2.

Interaktionen​

Tag-Formatierung

Tastatur​

Die Schließen-Schaltfläche wird durch die Leertaste und die Eingabetaste aktiviert.

Screenreader​

Wenn aktiv, enthält die Schließen-Schaltfläche („X“) in jedem Tag das WAI-ARIA-Attribut: aria-label="close"

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.

Bei Verwendung der Tag-Komponente in Ihren Anwendungen:

  1. Achten Sie darauf, dass der Tag-Text klar und prägnant ist.
  2. Verwenden Sie zur Unterscheidung von Tag-Kategorien nicht nur Farbe.
  3. Wenn Sie benutzerdefinierte Farben verwenden, stellen Sie sicher, dass die Mindestkontrastanforderungen erfüllt sind.