1. Label
2. Einzelwerte / Einzelbegriffe
3. Icon (optional)
4. Zweite Zeile (optional)
5. Bildmarke (optional)
6. Auf-/Zuklappen Pfeil

1. [Label] + [Ausgwählter Eintrag]
2. Listenelemente

Pflichtfelder sind mit “*” (Sternchen”) nach dem Label markiert. Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Wenn Nutzende das Feld auch leer lassen können müssen, so muss der Eintrag ”–” zur Auswahl stehen (je fachliche Entscheidung im Einzelfall). 

Die Auswahlfeldbezeichnung sollte so kurz und präzise wie möglich formuliert sein. Sollte ein Label dennoch länger sein müssen, so bricht es um und wird mehrzeilig.

Jeder Eintrag der Ausklappliste kann bestehen aus: 

• Text: Einzelwert bzw. Einzelbegriff
• Icon mit Text: Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.
• Avatar mit Text: Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.
• Primär- und Sekundärtext (Beispiel Raumauswahl: Angezeigt wird die Bezeichnung des Raumes in Zeile 1; Die Gebäudeart und Straße in Zeile 2)
• Primär- und ggf. Sekundärtext mit zusätzlicher Bildmarke (Beispiel: Personen mit Avatar oder Foto; daneben Nachname und Vorname in erster Zeile, Amts-/Dienstbezeichnung in zweiter Zeile). Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.

Es können auch deaktivierte (disabled) Elemente im Dropdown angezeigt werden. Diese können auch mit fokussiert werden. Vom Screenreader werden sie als deaktivierte Elemente ausgegeben.

Bei fehlerhaften oder fehlenden Eingaben (siehe Formular: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe Akustische Signale).

Details zur Anwendung der Standardfehlermeldungen sind im Meldungskonzept beschrieben (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler). Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Valididierungsfehler zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe (siehe Eingabe und Auswahlfelder: Ausklapplisten bei kleiner Bildschirmhöhe).

Sonderfall: 
Wenn in einer Auswahlliste nur ein Listeneintrag vorhanden ist und das Feld ein Pflichtfeld ist, dann wird das Feld mit dem Eintrag vorausgefüllt. Es wird aber weiterhin editierbar dargestellt (nicht read-only). Falls es sich nicht um ein Pflichtfeld handelt, so findet keine Vorbefüllung statt.

In seltenen Ausnahmefällen kann bei fachlicher Anforderung nach Aktivieren eines Eintrags und schließen der Ausklappliste auch ein Modal mit zusätzlichen Optionen geöffnet werden. Der Tastaturfokus wird in diesem Fall auf das erste interaktive Element im Modal gelegt.

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe (siehe Eingabe und Auswahlfelder: Ausklapplisten bei kleiner Bildschirmhöhe).

Das Eingabe-/Auswahlfeld sowie die Vorschlagliste müssen im geöffneten Zustand vollständig im sichtbaren Bereich liegen. Reicht der Platz nicht aus, um das Dropdown in über 220 Pixel Höhe darzustellen (plus das Auswahlfeld) so scrollt die Seite automatisch beim Öffnen ein Stück nach unten, so dass das Auswahlelement am oberen Bildschirmrand zu sehen ist und das Dropdown-Element den restlichen Seitenplatz füllt.

Taucht das Einfachauswahlfeld nicht als Teil eines Formulars auf, sondern beispielsweise zur Sortierung von Listenelementen oder bei Auswahl eines Tabs bei kleinen Fensterbreiten, so kann diese minimierte Version zum Einsatz kommen, die visuell einem tertiären Button sehr nahe kommt.

Wenn Nutzende das Feld auch leer lassen können müssen, so muss der Eintrag ”–” zur Auswahl stehen (je fachliche Entscheidung im Einzelfall).

Dieser Auswahlfeld-Typ sollte nicht verwendet werden, wenn es sich um ein zu befüllendes Pflichtfeld in einem Formular handelt. Dann kommt das Standard-Auswahlelement zum Einsatz. Aus diesem Grund gibt es an dieser minimierten Version keine Pflichtfeldauszeichnung (das Feld ist beim Laden der Seite immer schon befüllt (entweder mit “–” oder mit einem anderen Eintrag. Es gibt aus diesem Grund auch keinen Fehlerzustand.

Die Inhalte von Dropdowneinträgen sind identisch mit den Möglichkeiten beim Standard-Auswahlelement (siehe oben). Die Breite des Dropdowns passt sich dem längsten Eintrag an. Die maximale Textlänge pro Zeile sind 32 Zeichen. Bei längerem Inhalt bricht dieser um, wird mehrzeilig und der Eintrag wird entsprechend höher.

In der Horizontalen:
Falls Label und Eintrag im verfügbaren Platz (einzeilig) nicht vollständig dargestellt werden kann, wird dieser mit “...” abgekürzt. Im Dropdown-Inhalt ist der vollständige Text des ausgewählten Eintrags zu sehen. Wichtig: Die Auswahlfeldbezeichnung (Label) sollte so kurz wie möglich formuliert sein. 

In der Vertikalen:
Verhalten der Ausklappliste bei kleiner Bildschirmhöhe (siehe Eingabe und Auswahlfelder: Ausklapplisten bei kleiner Bildschirmhöhe).

Das Auswahlfeld mit Baumstruktur ermöglicht es den Nutzenden einen Wert aus einer Baumstruktur-Liste auszuwählen.

Pflichtfelder sind mit “*” (Sternchen”) nach dem Label markiert. Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Wenn Nutzende das Feld auch leer lassen können müssen, so muss der Eintrag ”–” zur Auswahl stehen (je fachliche Entscheidung im Einzelfall).

Die Auswahlfeldbezeichnung sollte so kurz und präzise wie möglich formuliert sein. Sollte ein Label dennoch länger sein müssen, so bricht es um und wird mehrzeilig.

Jeder Eintrag der Auswahlliste kann bestehen aus:

• (optional) Pfeil-Symbol, welches anzeigt, dass ein Eintrag aus-/einklappbar ist und ob er gerade geöffnet oder geschlossen ist. 
• Dem jeweiligen Beschreibungstext des Eintrags. Ist dieser länger, so bricht er bei Bedarf um und wird mehrzeilig.

Mit jeder ausklappbaren Stufe werden die darin enthaltenen Elemente (Pfeil und Text) entsprechend eingerückt. 

Es können auch deaktivierte (disabled) Elemente im Dropdown angezeigt werden. Diese können auch mit fokussiert werden. Ein Aus-/Einklappen der Elemente ist trotzdem möglich, um sich Inhalte anzeigen zu lassen. Die Einträge können jedoch nicht ausgewählt werden.

Je nach fachlicher Anforderung ist zu definieren, ob nach Auswahl eines Wertes nur der ausgewählte Wert oder der komplette Objektpfad im Dropdown anzuzeigen ist. Im zweiten Fall wächst das Eingabefeld in der Höhe mit, bis der Pfad komplett dargestellt werden kann. Beim Auslesen des fokussierten Feldes wird, falls der Pfad angezeigt wird, das aktive Element vom Screenreader zuerst ausgegeben, dann erst der Objektpfad.

Bei fehlerhaften oder fehlenden Eingaben (siehe Formular: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe Akustische Signale).

Details zur Anwendung der Standardfehlermeldungen sind im Meldungskonzept beschrieben (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler). Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Valididierungsfehler zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe (siehe Eingabe und Auswahlfelder: Ausklapplisten bei kleiner Bildschirmhöhe).

Auswahlfelder im “Disabled” Zustand werden vom Screenreader als deaktivierte Elemente ausgegeben.

Bei Feldern mit Fehlermeldung erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe Akustische Signale).

Screenreaderausgabe des Single Select Tree Pickers:
Beim Auslesen eines Dropdown-Eintrags gibt der Screenreader falls vorhanden den Zustand, die Hierarchieebene und den Eintragstext aus: 

• [Zustand Geschlossen/Geöffnet]
• [ggf. Zustand ausgewählt/nicht auswählbar]
• [Ebenenbezeichnung]
• [Eintragstext]

Bei fehlerhafter Eingabe erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe Akustische Signale)

• Mit der Tab-Taste wird das Select-Element fokussiert. 
• Leertaste, ALT+Pfeil unten und Pfeil unten öffnen das Dropdown mit den Auswahloptionen. 
• Falls vorher kein Eintrag ausgewählt war, ist beim Öffnen der erste Eintrag im Dropdown fokussiert. 
• Falls vorher bereits ein Eintrag gewählt war, ist dieser beim Öffnen des Dropdowns fokussiert.
• Pfeiltasten nach unten/oben wechseln zur nächsten/vorherigen Auswahloption unabhängig davon, ob diese aktiv oder deaktiviert dargestellt ist.
• Bei Drücken eines oder mehrerer Buchstaben, wird der nächste Eintrag fokussiert, dessen Primärtext mit der entsprechenden Zeichenkette beginnt (ausgehend vom aktuell fokussierten Eintrag). Nach 1 Sekunde wird die Zeichenkette zurück gesetzt.
• Enter oder Leertaste wählt den fokussierten Eintrag aus und schließt das Dropdown. Das Select-Element ist wieder fokussiert. Ausnahme: Ist ein deaktiviertes Elemente visuell hervorgehoben, so hat die Entertaste keine Auswirkung (Ausklappliste bleibt geöffnet und Hervorhebung bleibt unverändert).
• Deaktivierte (disabled) Elemente können nicht mit Enter oder Leertaste ausgewählt werden.
• Drücken der Home-Taste bei geöffneter Ausklappliste verschiebt die visuelle Hervorhebung auf das erste Element in der Liste.
• Drücken der End-Taste bei geöffneter Ausklappliste verschiebt die visuelle Hervorhebung auf das letzte Element der Liste.
  Mit der Esc-Taste kann das Dropwdown geschlossen werden, ohne das eine Auswahl getätigt wird. Das Select-Element ist wieder fokussiert.
• Die Tab-Taste wechselt zum nächsten interaktiven Element.

Tastaturbedienung der minimierten Version gleich wie die, der Standard Variante.

• Mit der Tab-Taste wird das zuletzt fokussierte Element fokussiert. 
• Leertaste, ALT+Pfeil unten und Pfeil unten öffnen das Dropdown mit den Auswahloptionen.
• Falls vorher kein Eintrag fokussiert war, wird beim Öffnen der erste Eintrag im Dropdown fokussiert. 
• Falls vorher bereits ein Eintrag fokussiert war, ist dieser beim Öffnen des Dropdowns fokussiert.
• Pfeiltasten nach unten/oben wechseln zur nächsten/vorherigen Auswahloption.
• Pfeiltaste nach rechts öffnet den Baum-Zweig unabhängig davon, ob diese aktiv oder deaktiviert dargestellt ist.
• Falls der Baum-Zweig schon geöffnet ist und erneut die Pfeiltaste nach rechts gedrückt wird, springt der Fokus zum nächsten Kindelement.
• Pfeiltaste nach links schließt den Baum-Zweig.
• Falls der Baum-Zweig schon geschlossen ist und erneut die Pfeiltaste nach links gedrückt wird, springt der Fokus zum Elternelement.
• Bei Drücken eines oder mehrerer Buchstaben, wird der nächste Eintrag fokussiert, dessen Text mit der entsprechenden Zeichenkette beginnt. Dabei wird die Baumstruktur wie eine flache Liste behandelt. Kindelemente von zugeklappten Baumelementen werden nicht durchsucht. Falls kein darunterliegendes Baumelement mit der Zeichenkette übereinstimmt, startet die Suche erneut beim ersten Listenelement. Die Fokussetzung wird nach einer Verzögerung von einer Sekunde ausgeführt und damit wird die Zeichenkette wieder zurückgesetzt.
• Beim Drücken der Sternchen/Asterisk-Taste (*) werden alle Geschwisterelemente des aktuell fokussierten Baumelements aufgeklappt (Elemente, welche sich auf der gleichen Ebene wie das aktuell fokussierte Baumelement befinden). Der Fokus ändert sich dabei nicht.
• Drücken der Home-Taste bei geöffneter Ausklappliste verschiebt den Fokus auf das erste fokussierbare Element der Liste
• Drücken der End-Taste bei geöffneter Ausklappliste verschiebt den Fokus auf die letzte Element der Liste (ohne, dass eine Kategorie geöffnet/geschlossen wird).
• Enter oder Leertaste wählt den fokussierten Eintrag aus und schließt das Dropdown. Das Select-Element ist wieder fokussiert.
• Deaktivierte (disabled) Elemente können nicht mit Enter oder Leertaste ausgewählt werden.
• Mit der Esc-Taste kann das Dropwdown geschlossen werden, ohne das eine Auswahl getätigt wird. Das Select-Element ist wieder fokussiert.
• Die Tab-Taste wechselt zum nächsten interaktiven Element.

• Klick mit linker Maustaste auf das Select-Element öffnet es (open). 
• Falls vorher bereits ein Eintrag gewählt war, ist dieser hervorgehoben (selected).
• Klick mit linker Maustaste auf einen der Dropdown-Einträge wählt diesen aus und schließt das Dropdown. Das Select-Element ist anschließend fokussiert.
• Klick mit linker Maustaste auf deaktivierte (disabled) Elemente setzt den Fokus auf diese, es wird jedoch keine Aktion ausgeführt und das Dropdown bleibt geöffnet.
• Mit einem Klick mit linker Maustaste auf das Dreieck-Symbol im Feld oder Klick an eine beliebige Stelle außerhalb der Ausklappliste kann diese geschlossen werden, ohne das eine Auswahl getätigt wird. Das Select-Element ist wieder fokussiert.

Mausbedienung der minimierten Version gleich wie die, der Standard Variante.

• Klick mit linker Maustaste auf das Select-Element öffnet es (open). 
• Falls vorher bereits ein Eintrag gewählt war, ist dieser hervorgehoben (selected).
• Klick mit linker Maustaste auf einen der Pfeile im Dropdown öffnet/schließt den Baum-Knoten (je nach dem, ob er vorher geschlossen/geöffnet war)
• Klick mit linker Maustaste auf einen der Dropdown-Eintragstexte wählt den Eintrag aus und schließt das Dropdown. Das Select-Element ist anschließend fokussiert.
• Klick mit linker Maustaste auf deaktivierte (disabled) Eintragstexte setzt den Fokus auf das Element, es wird jedoch keine Aktion ausgeführt und das Dropdown bleibt geöffnet (Wert kann nicht ausgewählt werden).
• Mit einem Klick mit linker Maustaste auf das Dreieck-Symbol im Feld oder Klick an eine beliebige Stelle außerhalb der Ausklappliste kann diese geschlossen werden, ohne das eine Auswahl getätigt wird. Das Select-Element ist wieder fokussiert.