Zum Hauptinhalt springen

Zustände von UI-Elementen

Zusammenfassung der Zustände​

Das Erscheinungsbild und das Verhalten von UI-Elementen werden von mehreren Faktoren beeinflusst: Berechtigungen, Datenkonsistenz, verfügbare Interaktionen … Als Ergebnis dieser Faktoren gibt es einige Standardzustände, die die Elemente verwenden, um dem Benutzer eindeutig mitzuteilen, was gerade passiert und was sie dem Benutzer ermöglichen.

Für Jutro-Komponenten ist dies die Liste der vordefinierten Zustände, die in den Fällen zur Verfügung stehen, in denen der Anwendungsfall zutrifft:

  • Schreibgeschützt
  • Deaktiviert
  • Nur Anzeige
  • Zugänglich-deaktiviert

Obwohl einige dieser Verhaltensweisen hauptsächlich für eingabebezogene Komponenten gelten, können andere Komponententypen ähnliche Zustände haben (z. B. „deaktiviert“), die die gleiche Bedeutung haben.

Schreibgeschützt​

Der Schreibgeschützt-Zustand teilt dem Benutzer mit, dass der Eingabewert aufgrund äußerer Faktoren (z. B. fehlender Schreibzugriff) nicht geändert werden kann.

Ein Benutzer kann Maßnahmen zur Aktivierung ergreifen, indem er sich z. B. an einen Administrator wendet.

Beispiel:

Deaktiviert​

Teilt dem Benutzer mit, dass der Wert des UI-Elements aufgrund lokaler Faktoren nicht geändert werden kann (z. B. muss das Kontrollkästchen über einem Eingabefeld erst aktiviert werden, um den Zugriff auf dieses Eingabefeld zu ermöglichen).

Der Benutzer kann es durch Interaktion mit der Seite aktivieren.

Deaktivierte Elemente sind nicht interaktiv und können daher nicht fokussiert werden (Ausnahme: „Elemente mit deaktivierter Barrierefreiheit“). Verwenden Sie die Pfeiltasten der Tastatur, um mit einem Screenreader auf die deaktivierten UI-Elemente zuzugreifen.

Nur Anzeige​

Teilt dem Benutzer mit, dass das UI-Element im Anzeigemodus (z. B. Übersichtsseiten usw.) oder im Bearbeitungsmodus (z. B. Formulare) verwendet wird, aber niemals bearbeitet werden kann.

Zugänglich-deaktiviert​

Der Zustand „Zugänglich-deaktiviert“ ist ein Ansatz, der die Zugänglichkeit deaktivierter Komponenten sicherstellt, indem einige der Verhaltensweisen deaktivierter Elemente geändert werden:

Für jede Komponente, die diesen Zustand implementiert, gilt Folgendes:

  • Entfernung des disabled-HTML-Attributs
  • Hinzufügen des aria-disabled-HTML-Attributs
  • Alle Callbacks, wie z. B. onClick und onBlur, werden stumm geschaltet und können nicht aufgerufen werden

Je nach Komponente müssen möglicherweise weitere benutzerdefinierte Änderungen vorgenommen werden.

Note: Nur die Button-Komponente implementiert diesen Zustand. Weitere Informationen finden Sie in der zugehörigen Dokumentation.

Vorrangige Zustände​

Wenn zwei oder mehr der Eigenschaften disabled, displayOnly, und readOnly gleichzeitig auf true gesetzt werden, gilt die folgende Vorrangregel:

displayOnly > readOnly > disabled