UI-Justiz

Auswahlschalter

Der Auswahlschalter ermöglicht es, durch Hin- und Herwechseln, maximal eine aus mehreren Optionen auszuwählen.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#1789; #2345

Aufbau

  1. Inhaltstab
  2. Ausgewählter Inhaltstab
  3. Text Label

    Verhalten

    Es kann nur maximal eine Option ausgewählt sein.

    Bei einem Auswahlschalter mit Text und Grafik muss der Inhalt ausschließlich aus dem Text erkenntlich sein.

    Wird der Auswahlschalter zum Wechseln zwischen verschiedenen Ansichten auf einer Seite verwendet, so ist auf eine konsistente Reihenfolge der Ansichten zu achten. Diese lautet (sofern die jeweilige Ansicht verfügbar ist): Liste, Tabelle, Listenbaum, Baumbaum, Kalender. Standardmäßig ist beim initialen Modulaufruf die erste Ansicht (ganz links) aktiviert, außer diese wurde von einer individuellen Benutzereinstellung überschrieben. Noch offen: Diese ist entweder pro Modul in den Benutzereinstellungen einstellbar oder es wird immer die Ansicht aufgerufen, die beim letzten Modulaufruf des Nutzers auch aktiv war.
    Die Such- und Filtervorgaben werden bei einem Ansichtswechsel übernommen (siehe Suchen & Filtern).

    Sonderfall

    Enthält das Auswahlelement nur Text, so kann es bei Bedarf auch zweizeilig werden. 

    Responsives Verhalten

    Reicht der verfügbare horizontale Platz nicht aus, um das komplette Element darzustellen, so wird der Auswahlschalter zu einem Einfach-Auswahlfeld. Es wird dann nur noch die ausgewählte Option angezeigt und alle anderen Optionen sind über eine Ausklappliste sichtbar und auswählbar. Durch das Dropdown-Icon wird die Ausklapp-Funktionalität zusätzlich visuell angedeutet. Das Element erhält einen Tooltip mit der Beschriftung ““[Elementbeschriftung]: [Fokussierter Eintrag]”.” Im Tooltip wird nichts bold gesetzt, da bei der Responsiven Version des Elemente (als Auswahlfeld umgesetzt) der Tooltiptext mit dem Sprachbefehl übereinstimmt.

    Falls der Eintragstext so lang ist, dass er im verfügbaren horizontalen Platz dennoch nicht vollständig dargestellt werden kann, so wird er mit “...” abgekürzt. Im Dropdown-Inhalt ist der vollständige Text des ausgewählten Eintrags zu sehen. Wichtig: Die Auswahlfeldsbezeichnung (Label) sollte so kurz wie möglich formuliert sein.

    Enthält das Auswahlfeld nur Icons und das Element wechselt zur responsiven Variante, so wird die textuelle Beschreibung immer mit dem Symbol zusammen in der Ausklappliste angezeigt.

    Zustände

    Barrierefreiheit

    Je nach Verwendung des Elements auf der Maske ist dem Element eine Beschriftung zu geben. Diese wird nicht auf der Maske angezeigt, sondern nur vom Screenreader am Anfang des Elements ausgegeben. Beispiel:

    • Die Elementbeschriftung ist “Ansicht”. Die Ausgabe der Einzelschalter lautet “Ansicht Liste”, “Ansicht Kacheln”, “Ansicht Baum”

    Bei einem Auswahlschalter mit Text und Grafik muss der Inhalt ausschließlich aus dem Text erkenntlich sein. Die Grafik muss als Layoutgrafik definiert werden.

    Für reine Icon-Auswahlschalter muss eine aussagekräftige textuelle Beschreibung hinterlegt werden, die automatisch auch als Tooltip des Auswahlschalters angezeigt wird. Im Tooltip wird die Elementbezeichnung vorangestellt, so dass der Tooltiptext bei fokussiertem Element lautet: “[Elementbeschriftung]: [Fokussierter Eintrag]”.

    Dabei wird der zweite Teil, die Bezeichnung des fokussierten Eintrages, welche auch der programmatischen Beschriftung des Elements entspricht, in extra-bold gesetzt (siehe Tooltip).

    Bedienung

    Tastaturbedienung

    • Mit Tab wird der aktive Reiter fokussiert.
    • Nun können mit den Pfeiltasten rechts und links andere Reiter fokussiert werden.
    • Leertaste oder Enter aktiviert den fokussierten Reiter.
    • Nach Aktivierung eines Reiters bleibt der Fokus auf diesem.
    • Mit Tab sollte das erste interaktive Element des geöffneten Reiters fokussiert werden.

    Für die responsive Version mit Ausklappliste siehe Auswahlfeld, Einfach (Single Select Picker).

    Mausbedienung

    Klick mit linker Maustaste aktiviert den jeweiligen Reiter.

    Für die responsive Version mit Ausklappliste siehe Auswahlfeld, Einfach (Single Select Picker).

    Weitere Themen: