Version:
States
Übersicht
Die Pflege von konsistenten digitalen Benutzeroberflächen über die gesamte AKDB erfordert weitreichende Richtlinien bzgl. der Verwendung von Zuständen. Die folgenden Konzepte dienen als Grundlage für einheitliche Komponenten.
Verbindliche Begriffe
Die hier definierten englischen Begriffe sind für die gesamte Dokumentation verbindlich - auch innerhalb deutscher Fließtexte. Deutsche Übersetzungen oder Synonyme werden nicht verwendet, damit Foundation-, Komponenten- und Pattern-Seiten denselben Zustand immer gleich benennen.
| Verbindlicher Begriff | Nicht verwenden |
|---|---|
| Enabled | Aktiv, Auswählbar, Bedienbar |
| Hover | - |
| Focus | Fokus, Fokussiert, Focused |
| Active | Aktiv, Gedrückt |
| Selected | Gewählt, Ausgewählt, Aktueller Eintrag |
| Read Only | Gesperrt, Schreibgeschützt, Read-only, Read-Only |
| Disabled | Inaktiv, Deaktiviert |
| Hidden | Ausgeblendet, Verborgen |
| Indeterminate | Unbestimmt |
| Default | Standard |
| Information | Hinweis |
| Success | Erfolg |
| Warning | Warnung |
| Error | Fehler, Fehlerhaft, Invalid |
| Empty | Leer |
Die Schreibweise ist exakt einzuhalten: Read Only in zwei Wörtern ohne Bindestrich, alle Begriffe mit großem Anfangsbuchstaben.
Interaction States
Enabled
Wird verwendet, wenn kein anderer Zustand benötigt wird. Die Komponente kann vom Nutzer bedient werden und löst die mit ihr verknüpfte Aktion aus.
broken_image | Button |
broken_image | Checkbox |
broken_image | Text field |
Hover
Zustand visueller Hervorhebung wenn der Nutzer den Mauszeiger über die Komponenten bewegt.
broken_image | Button |
broken_image | Checkbox |
broken_image | Text field |
Focus
Zustand, wenn die Komponente den Tastaturfokus besitzt, etwa nach Bedienung über die Tabulatortaste. Focus wird über einen deutlich sichtbaren Fokusrahmen gekennzeichnet und bleibt auch dann erkennbar, wenn die Komponente gleichzeitig Hover oder Selected ist.
broken_image
Beispiel Checkbox mit Fokus
broken_image
Beispiel Text field mit Fokus
Active
Visuelle Hervorhebung, während die Komponente Active ist - also während des Klicks bzw. des Antippens.
broken_image | Checkbox |
broken_image | Button |
broken_image | Text field |
Selected
Zustand, wenn die Komponente oder eine ihrer Optionen ausgewählt ist. Selected bleibt bestehen, bis die Auswahl geändert wird, und kann gemeinsam mit Hover, Focus und Active auftreten.
Read Only
Eine Komponente kann für den Nutzer auf Read Only gesetzt sein. In diesem Fall dient diese lediglich als Anzeige von (System-)Daten. In diesem Zustand kann die Komponente nie in den Zustand Enabled wechseln.
broken_image | Checkbox |
broken_image | Text field |
Disabled
Ist eine Komponente Disabled, kann die mit ihr verbundene Aktion nicht ausgelöst werden. Im Laufe des Prozesses kann diese Enabled werden.
broken_image | Checkbox |
broken_image | Button |
broken_image | Text field |
Wann Disabled States verwendet werden sollten
Disabled States sollten nur eingesetzt werden, wenn eine Aktion vorübergehend und für Nutzer:innen nachvollziehbar nicht verfügbar ist. Als Standardlösung für fehlende Eingaben oder Validierung sind sie ungeeignet: Sie blockieren zwar, erklären aber in der Regel nicht, warum eine Aktion gerade nicht ausgeführt werden kann.
Vor der Verwendung sollte deshalb geprüft werden, ob die Aktion in der aktuellen Session überhaupt ausführbar ist:
- Nicht ausführbar → Aktion nicht auf Disabled setzen, sondern auf Hidden.
- Grundsätzlich möglich, aber Grund für den Disabled State nicht eindeutig → Aktion auf Enabled lassen und bei der Nutzung eine verständliche Rückmeldung geben.
Barrierefreiheit
Bei einem notwendigen Disabled State sollte aria-disabled="true" gesetzt werden, damit das Element für assistive Technologien erkennbar bleibt. aria-disabled verändert weder Styling noch Funktionalität und verhindert Interaktionen nicht automatisch – diese müssen zusätzlich manuell umgesetzt werden, insbesondere durch das Blockieren des Klick-Handlers. Relevant ist WCAG 2.2, Erfolgskriterium 4.1.2 Name, Role, Value.
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ... Disabled-Zustände nur bei klar nachvollziehbaren, temporären Abhängigkeiten setzen – z. B. eine Tabellenaktion, die erst nach einer Auswahl verfügbar wird (etwa „Löschen“, das Disabled bleibt, bis löschbare Zeilen ausgewählt sind). | ... den Disabled State verwenden, obwohl unklar ist, warum ein Element Disabled wird – etwa Formularaktionen wie „Speichern“ oder „Weiter“, die bis zum Ausfüllen bestimmter Informationen Disabled bleiben. Besser: Element auf Enabled halten und bei falscher Nutzung eine verständliche Meldung ausgeben (Feldvalidierung + Fehlermeldung). ... den Disabled State verwenden, obwohl ein Element in der aktuellen Session nicht auf Enabled wechseln kann oder keinen Mehrwert hat – z. B. Pagination-Controls bei nur einer Datenseite oder Aktionen ohne die nötigen Rechte. Besser: Aktion auf Hidden setzen. ... den Disabled State verwenden, wenn ein Element von einer zugehörigen Aktion abhängt – z. B. von einer Checkbox, die ein Eingabefeld auf Enabled setzt. Besser: Progressive Disclosure nutzen und das Eingabefeld erst anzeigen, wenn die Checkbox ausgewählt wurde. |
Hidden
Fehlen dem Nutzer Rechte, um bestimmte Aktionen durchzuführen, werden die damit verbundenen Komponenten nicht angezeigt.
Indeterminate
In bestimmten Fällen kann es vorkommen, dass eine Komponente weder Selected noch nicht Selected ist - etwa eine übergeordnete Checkbox, deren untergeordnete Optionen nur teilweise ausgewählt sind. Indeterminate ist so gesehen der Zustand dazwischen.
broken_image
Feedback States
Default
Eine Default Komponente kann für neutrale Inhalte verwendet werden.
broken_image
Default Callout
Information
Wird verwendet, wenn dem Nutzer Informationen angezeigt werden.
broken_image
Information Callout
Success
Diese Komponente wird verwendet, wenn dem Nutzer positive Rückmeldungen angezeigt werden sollen.
broken_image
Success Callout
Warning
Verwendung für Warnanzeigen.
broken_image
Warning Callout
Error
Diese Komponente wird verwendet, wenn dem Nutzer negative Rückmeldungen angezeigt werden.
broken_image
Error Callout
Empty
Wenn die Komponente einen Empty State haben kann, sollte dieser verwendet werden.
broken_image