1. Container
2. Text Label
3. Eingabe-Feld
4. Icon
5. Dropdown-Container
6. Element-Beschriftung
7. Bildmarke (optional)

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 Ausklappiste kann bestehen aus: 

• Text: Einzelwert bzw. Einzelbegriff (Beispiel Sprachauswahl: Deutsch/Englisch...)
• 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 – ”Raum 2.01; Hauptgebäude, Berliner Straße 4a”)
• Primär- und Sekundärtext mit zusätzlicher Bildmarke (Beispiel: Personenauswahl: Avatar bzw. Foto einer Person, 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 fokussiert werden. Vom Screenreader werden sie als deaktivierte Elemente ausgegeben.

Wichtig ist: Es muss für die Nutzenden fachlich einen Mehrwert bieten, dass die Einträge noch in deaktivierter Form als Teil der Ausklappliste angezeigt werden und es muss aus dem Maskenkontext klar hervorgehen, warum die Einträge deaktiviert sind. Kann dies nicht garantiert werden, so sollten die entsprechenden Werte in der Ausklappliste ganz ausgeblendet statt nur deaktiviert werden. 

Dropdowns öffnen sich immer nach unten. Die Höhe des sich öffnenden Dropdown-Elements orientiert sich an der Menge der Einträge innerhalb und am verfügbaren Platz auf der Seite. Bei wenig Einträgen ist auch das Dropdown-Element weniger hoch. Falls mehr Einträge vorhanden sind, als sie in der verfügbaren Fensterhöhe darstellbar sind, wird der Inhalt scrollbar. Es bleibt ein Padding von mindestens 16 px zum unteren Fensterrand bestehen.

Öffnen Nutzende die Ausklappliste eines durchsuchbaren Auswahlfelds und ist kein Zeichen im Eingabefeld vorhanden, wird die Ausklappliste mit allen Einträgen dargestellt (Sortierung s. Grundlagen Schriften Sortierung).
Der Systemfokus liegt auch bei geöffneten Dropdown im Eingabefeld. Der blinkende Cursor wird angezeigt (falls bereits Zeichen im Eingabefeld vorhanden sind, befindet er sich nach dem letzten Zeichen).

Die Ausklappliste wird nach den Zeichen im Eingabefeld entsprechend dem globalen Suchmuster gefiltert und Übereinstimmungen zwischen eingegebenen Zeichen und Listeneinträgen in der Ausklappliste mit blauer Hinterlegung markiert (bei selektierten Einträgen invertiert) (s. globales Suchmuster). Durchsucht werden kann bei Dropdowneinträgen mit Primär- und Sekundärtext immer nur der Primärtext (In den Beispielen: “Raum 2.04” und “Nachname, Vorname”).

Zwischen jeder Wertänderungen und der entsprechenden Aktualisierung der Trefferliste besteht eine Verzögerung von 400ms. So haben Nutzende die Möglichkeit, Ihre Eingabe zunächst zu beenden.
In der Trefferliste werden zuerst alle Einträge alphanumerisch sortiert (in der User Story zu definieren, falls fachlich anders gefordert) angezeigt, die mit der ersten eingegeben Zeichenkette beginnen. Danach folgen alle Einträge in alphanumerischer Reihenfolge (in der User Story zu definieren, falls fachlich anders gefordert), die die eingegebene(n) Zeichenkette(n) beinhalten. Wird kein Ergebnis gefunden, so wird den Nutzenden der Text “Keine Treffer für [Suchbegriff] gefunden.” angezeigt.

Falls die Serverabfrage für die Suche länger dauert (über 200ms), wird ein Ladezustand (loading spinner) im Dropdown angezeigt, bis Suchergebnisse vorhanden sind. Dieser ist nicht fokussierbar. Der Alternativtext des Symbols, der vom Screenreader automatisch ausgegeben wird, sobald er erscheint lautet “Einträge werden geladen”. Dieser wird auch als Tooltip angezeigt, wenn mit der Maus exakt über dem Lade-Icon gehovert wird. Falls das Laden länger dauert und das Auswahlfeld weiterhin fokussiert ist, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Ergebnisse werden geladen” ausgelesen.

Noch offen: Verhalten bei ausbleibender Server-Antwort (Hier ist vorher die technische Umsetzung zu klären)

Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Treffer gefunden”.

Verhalten der Ausklappliste bei über 100 gefundenen Treffern (siehe Eingabe und Auswahlfelder).

Durchsucht werden kann bei Dropdownseinträgen mit Primär- und Sekundärtext immer nur der Primärtext (In den Beispielen: “Raum 2.04” und “Nachname, Vorname”). Basierend auf fachlicher Anforderung sollte definiert werden, ob eine der folgenden Suchverhalten gilt:

• “Beinhaltet [...]” – Sucht nach Zeichenabfolgen, die irgendwo innerhalb der Bezeichnung vorkommen.
• “Startet mit [...]” – Sucht nur nach Zeichenabfolgen die am Anfang der Bezeichnung stehen. 

Falls nicht definiert gilt die Regel “Beinhaltet [Suchbegriff]”. 

Alle für Suchfelder in GeFa definierten Wildcards können auch in Comboboxen genutzt werden (siehe Suchfeld: Wildcards).

Besteht der Inhalt eines Dropdown-Eintrags aus langem Text, so bricht dieser um, sobald er nicht mehr in einer Zeile darstellbar ist. Eine Abkürzung von Inhalten (z. B. mit “...”) darf nicht stattfinden, damit kein Inhalt versteckt wird.

Nach Auswahl eines Eintrags, wird bei Einträgen mit Primär- und Sekundärtext standardmäßig nur der Primärtext im Feld dargestellt.

Bei fehlerhaften oder fehlenden Eingaben (Ablauf 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)

Auf fehlerhafte Eingabe werden Nutzende direkt nach Verlassen des Feldes hingewiesen, es erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe Akustische Signale). Beispiele für Fehler hier: 

• Nicht befülltes Pflichtfeld
• Wert ins Feld geschrieben aber kein Wert aus der Liste aktiv ausgewählt

Es findet nie eine automatische Wertübernahme ohne Auswahl aus der Liste (via Mausklick oder Enter) statt, auch dann nicht, wenn Nutzende die primäre Information eines Eintrags manuell komplett ins Feld eingeben, dann das Feld verlassen und der Wert mit genau einem Eintrag aus der Trefferliste übereinstimmt. Falls das Feld verlassen wird, bereits etwas ins Feld geschrieben wurde aber kein Wert aus der Liste aktiv ausgewählt wurde, dann wird bei Verlassen die Fehlermeldung “Wählen Sie einen Wert aus der Liste aus” angezeigt (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler).

Bei anderen Fehlermeldungen sind die Formulierungsregeln für Meldungen zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe, siehe Eingabe und Auswahlfelder.

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.

Bei einer Trefferzahl über 100, erscheint ein weiteres Feld, welches nur fokussiert werden kann.

Der Alternativtext des Ladezustand-Symbols, der vom Screenreader ausgegeben wird, lautet “Ergebnisse werden geladen”. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.

Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Ergebnisse werden geladen” ausgelesen.

• Mit der Tab-Taste wird das Select-Element fokussiert. 
• Bei ggf. bereits vorhandenem Text wird dieser komplett ausgewählt, bis neuer Text eingegeben oder die Markierung durch Pfeil links oder rechts aufgehoben wird und der Cursor an den Anfang oder das Ende des Textes springt
• Dann kann Text eingegeben werden. 
• ALT+Pfeil unten und Pfeil unten öffnet das Dropdown mit den Auswahloptionen. Der Systemfokus und der visuelle Fokus liegen im Eingabefeld. Der blinkende Cursor wird angezeigt (falls bereits eine Auswahl vorhanden war, befindet er sich nach dem letzten Zeichen)
• • Wenn vorher bereits ein Eintrag ausgewählt war, ist dieser in der sich öffnenden Liste visuell als ausgewählt angezeigt und der Eintrag wird vom Screenreader ausgegeben.
  • Wenn vorher kein Eintrag ausgewählt war, so wird der Default-Eintrag “–“ visuell als ausgewählt angezeigt.
• Beginnen Nutzende bei geschlossenem Feld zu tippen, so öffnet sich das Dropdown ebenfalls und Ergebnisse werden angezeigt.
• Bei der Eingabe eines Wertes wird die Liste aktualisiert und der Systemfokus bleibt weiterhin auf dem Eingabefeld. In der Liste wird dann noch kein Eintrag als selektiert angezeigt. Erst durch das Drücken der Taste Pfeil runter wird der erste Eintrag als selektierter Eintrag angezeigt.
• Mit der Backspace-Taste kann eingegebener Text wieder entfernt werden.
• Mit Pfeiltaste nach unten springt der visuelle Fokus auf den ersten Eintrag der Ausklappliste. Der Systemfokus bleibt auf dem Eingabefeld.
• Mit Pfeiltasten nach unten/oben springt der visuelle Fokus auf die nächste/vorherige Auswahloption, unabhängig davon, ob diese aktiv oder deaktiviert dargestellt ist.
• Pfeiltaste nach unten bei über 100 Treffern und visuell hervorgehobenen hundertsten Eintrag setzt die visuelle Hervorhebung auf den “und x weitere [...]”-Eintrag
• Enter wählt den Eintrag aus, der visuell hervorgehoben ist und schließt das Dropdown. Das Auswahlfeld bleibt selektiert. Ausnahme: Ist ein deaktiviertes Elemente visuell hervorgehoben, so hat die Entertaste keine Auswirkung (Ausklappliste bleibt geöffnet und Hervorhebung bleibt unverändert).
• Enter bei visuell hervorgehobenen “und x weitere [...]”-Eintrag löst keine Aktion aus. Die Auklappliste bleibt geöffnet und die visuelle Hervorhebung bleibt auf dem Element.
• Mit der Esc-Taste kann das Dropwdown geschlossen werden. Falls bereits ein Suchbegriff eingegeben wurde, bleibt dieser weiterhin im Feld zu sehen.
• Erst durch erneute Eingabe oder Löschen eines Zeichens wird die Dropdown-Liste wieder eingeblendet.
• Die Tab-Taste wechselt zum nächsten interaktiven Element. Dann findet die Feldvalidierung statt.

• Klick mit linker Maustaste auf das Select-Element öffnet es (open). 
• Bei leerem Eingabefeld wird der Cursor an den Anfang gesetzt, bei bereits vorhandenem Text wird er an die entsprechende Stelle gesetzt. 
• • Single-Klick: Cursor wird an Position gesetzt
  • Double-Klick: Aktuelles Wort wird selektiert
  • Triple-Klick: Gesamter Text-Inhalt wird selektiert
• Dann kann ein Text eingegeben werden. 
• Beginnen Nutende bei geschlossenem Feld zu tippen, so öffnet sich das Dropdown ebenfalls.
• Bei Eingabe von Text, werden Die Suchergebnisse im Dropdown aktualisiert.
• Klick mit linker Maustaste auf einen der Dropdown-Einträge wählt diesen aus und schließt das Dropdown. Ausnahme: Klick mit linker Maustaste auf einen deaktivierten Listeneintrag setzt die visuelle Hervorhebung auf diesen, es wird jedoch keine Aktion ausgeführt und die Ausklappliste bleibt geöffnet.
• Klick mit linker Maustaste auf den “und x weitere [...]”-Eintrag bei über 100 Treffern hebt diesen visuell hervor aber löst ansonsten keine Aktion aus. Die Auklappliste 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. Falls bereits ein Suchbegriff eingegeben wurde, bleibt dieser im Feld stehen.
• Sobald ein anderes interaktives Element mit der linken Maustaste angeklickt wird, findet die Feldvalidierung statt.