FigmaOpenCode

Alert

Synonyme: Hinweis, Meldung, Warnung, Information, Mitteilung, Rückmeldung
Ähnliche Komponenten: Badge

Kurzbeschreibung

Ein Alert gibt einen Hinweis zu einer wichtigen Information mit knapper Erläuterung und optionalem Link.

Beispiele

Varianten

Code anzeigen

<div class="kern-alert kern-alert--info" role="alert">
<div class="kern-alert__header">
  <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
  <span class="kern-title">Information</span>  
</div>
</div>

<br>

<div class="kern-alert kern-alert--success" role="alert">
<div class="kern-alert__header">
	<span class="kern-icon kern-icon--success" aria-hidden="true"></span>
	<span class="kern-title">Erfolg</span>
</div>
</div>

<br>

<div class="kern-alert kern-alert--warning" role="alert">
<div class="kern-alert__header">
	<span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
	<span class="kern-title">Warnung</span>
</div>
</div>

<br>

<div class="kern-alert kern-alert--danger" role="alert">
<div class="kern-alert__header">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-title">Fehler</span>  
</div>
</div>

Varianten mit Beschreibung

Code anzeigen

<div class="kern-alert kern-alert--info" role="alert">
<div class="kern-alert__header">
  <span class="kern-icon kern-icon--info" aria-hidden="true"></span>
  <span class="kern-title">Information</span>  
</div>
<div class="kern-alert__body">
  <p class="kern-body">Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.</p>
  <a href="#" class="kern-link">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Linktext
  </a>
</div>
</div>

<br>

<div class="kern-alert kern-alert--success" role="alert">
<div class="kern-alert__header">
	<span class="kern-icon kern-icon--success" aria-hidden="true"></span>
	<span class="kern-title">Erfolg</span>
</div>
<div class="kern-alert__body">
	<p class="kern-body">
		Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.
	</p>
	<a href="#" class="kern-link">
		<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
		Linktext
	</a>
</div>
</div>

<br>

<div class="kern-alert kern-alert--warning" role="alert">
<div class="kern-alert__header">
	<span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
	<span class="kern-title">Warnung</span>
</div>
<div class="kern-alert__body">
	<p class="kern-body">
		Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.
	</p>
	<a href="#" class="kern-link">
		<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
		Linktext
	</a>
</div>
</div>

<br>

<div class="kern-alert kern-alert--danger" role="alert">
<div class="kern-alert__header">
  <span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
  <span class="kern-title">Fehler</span>  
</div>
 <div class="kern-alert__body">
  <p class="kern-body">Die Beschreibung liefert mehr Kontext und sollte auch Handlungsoptionen aufzeigen, falls nötig.</p>
  <a href="#" class="kern-link">
    <span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
    Linktext
  </a>
</div>

Beschreibung

Ein Alert gibt einen knapp formulierten Hinweis auf wichtige Informationen oder Veränderungen. Er besteht aus Kopf- und Inhaltsbereich. Der Kopf enthält ein Icon und einen beschreibenden Titel. Der Inhalt ist optional und enthält einen knappen Beschreibungstext. Ebenfalls optional kann unter dem Beschreibungstext auch ein Link zu weiteren Informationen oder zugehörigen Aktionen angezeigt werden.
Es gibt vier Zustände, die farblich fest kodiert sind: Info (blau), Success (grün), Warning (gelb) und Danger (rot). Mehr dazu findest Du unten bei den Verwendungsregeln.

Effektiver Einsatz

Um die Benutzerfreundlichkeit und Effektivität von Alerts zu gewährleisten, sollten folgende Punkte beachtet werden:

• Klarheit und Prägnanz: Die Botschaft des Alerts sollte klar und unmissverständlich sein.
• Relevanz: Alerts sollten nur dann angezeigt werden, wenn sie für die Nutzenden relevant sind.
• Dringlichkeit: Die Dringlichkeit des Alerts sollte durch visuelle und akustische Signale angemessen kommuniziert werden.
• Interaktivität: Alerts sollten Nutzenden die Möglichkeit bieten, direkt auf die Nachricht zu reagieren.

Verwendungsregeln

Information, blau

Eine Meldung über unkritische Informationen oder Zustände, die keinen unmittelbaren Handlungsbedarf auf Nutzendenseite erfordern. Beispiel: - „Vorbildlich – Ihre Daten sind aktuell.“

Erfolgreich, grün

Eine Meldung über eine erfolgreich oder in der vorgesehenen Art ausgeführte Aktion. Beispiele: - „Ihre Daten wurden vollständig eingegeben.“ - „Ihrem Antrag wurde zugestimmt.“

Warnung, gelb

Eine Meldung, die die Aufmerksamkeit des Nutzenden erreichen soll, aber unkritisch ist. Im Inhaltsbereich kannst du den Grund knapp benennen und auf weiterführende Informationen oder Aktionen verlinken. Gib auch stets an, ob eine bzw. welche Aktion des Nutzenden erforderlich oder nicht erforderlich ist. Beispiele: - wenn mit einer unüblich langen Bearbeitungszeit zu rechnen ist - wenn noch eine Prüfung der vorher eingegebenen Daten stattfindet: „Ihre Daten werden noch geprüft. Das Ergebnis erhalten Sie in den nächsten 24 Stunden per E-Mail.“

Fehler, rot

Eine Meldung, die einen kritischen Zustand signalisiert, die die Weiterarbeit verhindert. Das kann zum Einen ein Fehler des Systems sein, der zum Abbruch eines Prozesses führt. Ein zweites Beispiel kan sein, dass eine Aktion des Nutzenden unbedingt erforderlich ist. Benenne die erforderliche Aktion oder verlinke auf eine detaillierte Darstellung weiterer Handlungsoptionen. Beispiele: 1. „Der Server antwortet nicht, die Daten können nicht übertragen werden.“ 2. „Ihre Daten sind leider nicht vollständig. Der Antrag kann daher noch nicht bearbeitet werden. Bitte ergänzen Sie die fehlenden Angaben.“

Dos und Don’ts

Gehe sparsam mit Alerts um. Informationen können auch in einem Textabsatz beschrieben werden.

Beschreibe den Grund für den Alert in einer knappen und präzisen Erläuterung.

Ist eine Aktion der Nutzenden erforderlich, so benenne und/oder verlinke diese Aktion.

Lass Nutzende nicht mit einer Meldung allein, sondern weise Lösungen auf.

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

Alert-Rolle ist programmatisch erkennbar

Implementierungsabhängig

WCAG 2.1.1

Schließbare Alerts sind per Tastatur bedienbar

Implementierungsabhängig

WCAG 2.4.13

Interaktive Alert-Elemente haben sichtbare Fokuszustände

Implementierungsabhängig

WCAG 3.3.2

Alert-Inhalte sind eindeutig und verständlich

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

Alert-Icons haben aussagekräftige Alternativtexte

Bestanden

WCAG 1.4.1

Alert-Bedeutung wird nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.6

Alert-Text erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Alert hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab