Synonyme: Listenfeld, Mehrzeilige Auswahlliste, Listbox
Siehe auch: Auswahlliste, Ausklappliste, Checkbox-Gruppe, Baumstruktur
Mehrfach-Auswahllisten ermöglichen die Auswahl mehrerer Optionen aus einer Liste (siehe DIN EN ISO 9241-161: 8.39).
In der Mehrfach-Auswahlliste werden alle wählbaren Optionen angezeigt (ggf. mit Scrollbalken). Die gewählten Optionen sind hervorgehoben. Die Optionen können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden. Die fokussierte Option ist nicht automatisch identisch mit der gewählten Option.
Darstellung
Permalink zu "Darstellung"Die Anforderungen an die Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.
Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
---|---|---|---|---|
670 | Beschriftung | Die Mehrfach-Auswahlliste muss eine sichtbare Beschriftung besitzen (siehe Beschriftung). Hinweis: Die Benutzenden sollen auf die Möglichkeit der Mehrfachauswahl hingewiesen werden. | Muss | EN 301 549 9.3.3.2, 11.3.3.2 |
671 | Beschreibung | Sofern die Mehrfachauswahl nicht durch einfache Aktivierung der Listeneinträge möglich ist, soll die Bedienung mit Tastatur und Zeigeinstrument erläutert werden (siehe Praxistipp vereinfachte Bedienung der Mehrfach-Auswahl). | Soll | WCAG 2.1: 3.3.5 (AAA), DIN EN ISO 9241-143: 9.6.11 |
Bedienung
Permalink zu "Bedienung"Die Anforderungen an die Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.
Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
---|---|---|---|---|
672 | Tastaturbedienung | Die Mehrfach-Auswahlliste muss mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). Hinweis: Dies gilt für die Auswahl benachbarter und nicht-benachbarter Listeneinträge. | Muss | EN 301 549: 9.2.1.2, 11.2.1.2 |
Tastaturbedienung Mehrfach-Auswahlliste
Permalink zu "Tastaturbedienung Mehrfach-Auswahlliste"Hinweis: Eine vereinfachte, aber derzeit wenig etablierte Bedienung der Mehrfachauswahl wird im Praxistipp vereinfachte Bedienung der Mehrfach-Auswahl beschrieben. Es wird empfohlen, die implementierte Bedienung für die Mehrfachauswahl unabhängig von der gewählten Methode in der Anwendung oder Hilfe zu beschreiben
Aktion | Taste | Klassifizierung |
---|---|---|
Fokussieren der Mehrfach-Auswahlliste | TAB | Erforderlich |
Wertauswahl (alle anderen Werte werden abgewählt) | [Navigationstaste] | Erforderlich |
Auswahl benachbarter Werte | UMSCHALT+[Navigationstaste] | Erforderlich |
Auswahl nicht-benachbarter Werte | STRG+[Navigationstaste], gefolgt von STRG+LEER | Erforderlich |
Abwahl eines gewählten Werts | STRG+LEER | Erforderlich |
Auswahl aller Werte | STRG+A | Empfohlen |
Zeigeinstrumentbedienung Mehrfach-Auswahlliste
Permalink zu "Zeigeinstrumentbedienung Mehrfach-Auswahlliste"Hinweis: Eine vereinfachte, aber derzeit wenig etablierte Bedienung der Mehrfachauswahl wird im Praxistipp vereinfachte Bedienung der Mehrfachauswahl beschrieben. Es wird empfohlen, die implementierte Bedienung für die Mehrfachauswahl unabhängig von der gewählten Methode in der Anwendung oder Hilfe zu beschreiben.
Aktion | Taste | Klassifizierung |
---|---|---|
Wertauswahl (alle anderen Werte werden abgewählt) | Linksklick auf einen Wert | Erforderlich |
Auswahl benachbarter Werte | UMSCHALT+Linksklick | Erforderlich |
Auswahl nicht-benachbarter Werte | STRG+Linksklick | Erforderlich |
Abwahl eines gewählten Werts | STRG+Linksklick | Erforderlich |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"Die Anforderungen an die Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Anforderungen beschrieben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt
Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
---|---|---|---|---|
673 | Rolle | Die Rolle Mehrfach-Auswahlliste muss an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.511.4.1.2, 11.5.2.5 |
674 | Bedienung | Die Mehrfach-Auswahlliste muss mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API). | Muss | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17.5.2.17 |
Praxistipp Alternativen zur Auswahlliste mit Mehrfach-Auswahl
Permalink zu "Praxistipp Alternativen zur Auswahlliste mit Mehrfach-Auswahl"Die Möglichkeit der Mehrfach-Auswahl ist in der Regel nicht zu erkennen, weil sich die Mehrfach-Auswahllisten visuell nicht von Auswahllisten unterscheiden. Darüber ist die Mehrfach-Auswahl (insbesondere die Auswahl nicht-benachbarter Werte) mit der Tastatur und dem Zeigeinstrument erschwert. Mit dem Screenreader sind darüber hinaus häufig die gewählten Elemente nicht wahrnehmbar. Deswegen wird empfohlen, Mehrfach-Auswahllisten durch andere Elemente zu ersetzen, in einer einfachen Form umzusetzen oder deren Funktion und Bedienung zu beschreiben. Alternativen für Mehrfach-Auswahllisten wären u. a.:
- Gruppe von Checkboxen oder
- zwei Auswahllisten oder Mehrfach-Auswahllisten nebeneinander, wobei die erste Liste die verfügbaren Werte und die zweite Liste die gewählten Werte anzeigt. Mit Schaltern können Werte aus der ersten Liste in die zweite verschoben oder aus diesen entfernt werden (siehe Screenshot).
Eine einfache Bedienung von Mehrfach-Auswahllisten kann wie folgt umgesetzt werden:
- mit dem Zeigeinstrument: Klick auf einen Wert ändert den Status (gewählt oder nicht gewählt)
- mit der Tastatur: Aktivierung eines Werts mit der LEER-Taste ändert den Status (gewählt oder nicht gewählt).
Praxistipp vereinfachte Bedienung der Mehrfach-Auswahl
Permalink zu "Praxistipp vereinfachte Bedienung der Mehrfach-Auswahl"Eine einfache Bedienung von Mehrfach-Auswahllisten kann wie folgt umgesetzt werden:
- mit dem Zeigeinstrument: Klick auf einen Wert ändert den Status (gewählt oder nicht gewählt)
- mit der Tastatur: Aktivierung eines Werts mit der LEER-Taste ändert den Status (gewählt oder nicht gewählt).
Praxistipp Mehrfach-Auswahlliste in Web-Anwendungen
Permalink zu "Praxistipp Mehrfach-Auswahlliste in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"- JAWS:
- Ohne gewählten Listeneintrag: [Beschriftung] Erweitertes Listenfeld [Hinweis zur Bedienung mit den Pfeiltasten]
- Mit gewählten Listeneinträgen: [Beschriftung] Erweitertes Listenfeld [fokussierter Listeneintrag] [Position und Anzahl] [Hinweis zur Bedienung mit den Pfeiltasten]
- NVDA:
- Ohne gewählten Listeneintrag: [Beschriftung] Liste
- Mit gewählten Listeneinträgen: [Beschriftung] Liste [fokussierter Listeneintrag] [Position und Anzahl]
- Windows Sprachausgabe:
- Ohne gewählten Listeneintrag: [Beschriftung] Gewählt unterstützt Mehrfachauswahl [Anzahl]
- Mit gewählten Listeneinträgen: [Beschriftung] [fokussierter Listeneintrag] [Position und Anzahl] ausgewählt.
Achtung: Mit dem Screenreader sind die gewählten Listeneinträge im Formularmodus nicht wahrnehmbar. Auch die Möglichkeit der Mehrfach-Auswahl ist teilweise nicht wahrnehmbar.
Deswegen wird empfohlen, ein alternatives Element zu verwenden (siehe
Praxistipp Alternativen zur Auswahlliste mit Mehrfach-Auswahl).
Achtung: Aus folgenden Gründen ist die Tastaturbedienung erschwert:
- Für die Mehrfach-Auswahl sind Modifikationstasten notwendig, die ggf. nicht bekannt sind. Bei alten Browsern ist die Mehrfach-Auswahl mit der Tastatur nicht möglich bzw. müssen abweichende Modifikationstasten verwendet.
- Bei der Mehrfach-Auswahl sind zwar die gewählten Listeneinträge sichtbar, aber nicht der aktuell fokussierte Listeneintrag.
Deswegen wird empfohlen, ein alternatives Element zu verwenden (siehe Praxistipp Alternativen zur Auswahlliste mit Mehrfach-Auswahl).
Die Umsetzungshinweise für die HTML-Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Hinweise gegeben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.
- Die Mehrfach-Auswahlliste sollte mit dem
multiple
-Attribut umgesetzt werden. - Der initial gewählten Listeneinträge werden mit dem
selected
-Attribut ausgezeichnet.
Die Umsetzungshinweise für die ARIA-Auswahlliste werden im Abschitt „Auswahlliste“ beschrieben. Hier werden nur zusätzliche Hinweise gegeben, die daraus resultieren, dass es sich um eine Auswahlliste mit Mehrfach-Auswahl handelt.
- Die Möglichkeit der Mehrfach-Auswahl wird mit
aria-multiselectable=true
übermittelt. - Die gewählten Listeneinträge werden mit
aria-selected=true
oderaria-checked=true
ausgezeichnet, alle anderen mitaria-selected=false
bzw.aria-checked=false
. - Bei der Navigation durch die Listeneinträge der Auswahlliste müssen diese entweder tatsächlich den Fokus erhalten oder es wird per
aria-activedescendant
auf den fokussierten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen. In beiden Fällen ist darauf zu achten, dass die Navigation durch die Mehrfach-Auswahlliste nicht automatisch den Status der Listeneinträge (gewählt oder nicht gewählt) ändert