Auswahlliste

Synonyme: Listenfeld, Mehrzeilige Auswahlliste, Listbox

Siehe auch: Mehrfach-Auswahlliste, Ausklappliste, Radiobuttongruppe, Baumstruktur

Auswahllisten ermöglichen die Auswahl einer Option aus einer Liste (siehe DIN EN ISO 9241-161: 8.39).

In der Auswahlliste werden alle verfügbaren Optionen angezeigt (ggf. mit Scrollbalken). Der aktuelle Wert ist hervorgehoben. Die Optionen können gruppiert werden. Die Beschriftung der Gruppen kann nicht ausgewählt werden. Die fokussierte Option ist identisch mit der gewählten Option.

Beim Fokussieren der Auswahlliste:

• JAWS:
  • Ohne gewählten Listeneintrag: [Beschriftung] Listenfeld [Hinweis zur Bedienung mit den Pfeiltasten]
  • Mit gewähltem Listeneintrag: [Beschriftung] Listenfeld [Wert] [Position] von [Anzahl] [Hinweis zur Bedienung mit den Pfeiltasten]
• NVDA:
  • Ohne gewählten Listeneintrag: [Beschriftung] Liste
  • Mit gewähltem Listeneintrag: [Beschriftung] Liste [Wert] [Position] von [Anzahl]
• Windows Sprachausgabe:
  • Ohne gewählten Listeneintrag: [Beschriftung] Erfordert Auswahl [Anzahl]
  • Mit gewähltem Listeneintrag: [Beschriftung] [Wert] [Position] von [Anzahl] ausgewählt [Wert] [Position] von [Anzahl]

Bei der Pfeiltastennavigation durch die Auswahlliste:

• JAWS: [Wert] [Position] von [Anzahl]
• NVDA: [Wert] [Position] von [Anzahl]
• Windows Sprachausgabe: [Wert] [Position] von [Anzahl] ausgewählt

Beim Lesen mit dem virtuellen Cursor:

• JAWS:
  • Ohne gewählten Listeneintrag: [Beschriftung] Listenfeld
  • Mit gewähltem Listeneintrag: [Beschriftung] [Wert] Listeneintrag gewählt [Position] von [Anzahl]
• NVDA:
  • Ohne gewählten Listeneintrag: [Beschriftung] Liste anklickbar [erster Listeneintrag]
  • Mit gewähltem Listeneintrag: [Beschriftung] Liste anklickbar [Wert]
• Windows Sprachausgabe: [Beschriftung] [Position] von [Anzahl] [ | ausgewählt] [Listeneintrag]

Hinweise:

• JAWS und NVDA geben die Gruppierung einer HTML-Auswahlliste mit <optgroup> nicht aus. Die Windows Sprachausgabe gibt die Gruppierung mit <optgroup> nur beim Lesen mit dem virtuellen Cursor aus.
• JAWS und NVDA geben die Gruppierung einer ARIA-Auswahlliste mit role=group korrekt aus. Die Windows Sprachausgabe gibt die Gruppierung mit role=group nur beim Lesen mit dem virtuellen Cursor aus.
• Beim Lesen mit dem virtuellen Cursor gibt JAWS nur den gewählten Listeneintrag, NVDA den gewählten oder ersten Listeneintrag und die Windows Sprachausgabe alle Listeneinträge aus.

Die Auswahlliste sollte mit den HTML-Elementen <select> und <option> mit einem Wert größer 1 bei dem size-Attribut und ohne multiple-Attribut umgesetzt werden.
Die Listeneinträge können mit dem <optgroup>-Element gruppiert werden. Die Gruppierung sollte jedoch vermieden werden, weil viele Screenreader die Gruppenbeschriftung (die mit dem label-Attribut angegeben wird) nicht ausgeben.
Der initiale gewählte Listeneintrag kann mit dem selected-Attribut gesetzt werden. In jeder Auswahlliste sollte initial ein Listeneintrag ausgewählt sein, weil Tastaturnutzer bei der Navigation durch die Auswahlliste automatisch eine Auswahl treffen, die anschließend nicht mehr rückgängig gemacht werden kann. Initial sollte der Listeneintrag gewählt werden, dessen Auswahl entweder am wahrscheinlichsten ist oder der eine neutrale Option (z. B. „Keine Angabe“) enthält.
Die Beschriftung sollte mit dem Element <label for=ID> mit der Auswahlliste verknüpft werden.
Eine Auswahlliste, eine Gruppe von Listeneinträgen sowie die einzelnen Listeneinträge können als deaktiviert (disabled), aber nicht als schreibgeschützt (readonly) ausgezeichnet werden.
Eine Auswahlliste kann mit required als Pflichtfeld ausgezeichnet werden.

Weitere Informationen: 4.10.7 The select element - HTML Standard (whatwg.org)

Wird die Auswahlliste nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Auswahlliste wird mit role=listbox ausgezeichnet und enthält die Listeneinträge, die mit role=option ausgezeichnet werden.
• Die Listeneinträge können innerhalb eines Elements, welches mit role=group ausgezeichnet wird, gruppiert werden. Die Gruppe wird mit aria-label oder aria-labelledby beschriftet.
• Der gewählte Listeneintrag wird mit aria-selected=true ausgezeichnet, alle anderen mit aria-selected=false. Der gewählte Listeneintrag kann auch mit aria-checked übermittelt werden – das ist allerdings für Auswahllisten ohne Mehrfach-Auswahl nicht empfehlenswert.
• Alternativ wird der gewählte Listeneintrag nicht explizit ausgezeichnet, sondern ergibt sich während der Bedienung automatisch aus dem fokussierten Listeneintrag. Dies ist jedoch nicht zu empfehlen, weil dann die Assistenztechnologie im nicht-fokussierten Zustand den gewählten Listeneintrag nicht zuverlässig ermitteln kann.
• Die Beschriftung der Auswahlliste kann per aria-label oder aria-labelledby erfolgen.
• 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 gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Die Auswahlliste kann mit aria-disabled als deaktiviert ausgezeichnet werden.
• Die Auswahlliste kann mit aria-readonly als schreibgeschützt ausgezeichnet werden.
• Die Auswahlliste kann mit aria-required als Pflichtfeld ausgezeichnet werden.
• Eine vom Standard abweichende horizontale Ausrichtung der Auswahlliste kann mit aria-orientation=horizontal angegeben werden. Die Ausrichtung wird von Assistenztechnologie häufig nicht ausgegeben, so dass bei horizontal ausgerichteten Listeneinträgen die Bedienung mit allen Pfeiltasten möglich sein sollte.
• Die Darstellung der Auswahlliste sollte im Hochkontrast-Modus von Windows überprüft werden.
• Die sichtbare Auswahlliste und das programmatisch fokussierte Element sollten die gleiche Position und Größe besitzen.
• Bei der Navigation durch die Listeneinträge sollte der fokussierte Listeneintrag im sichtbaren Bereich angezeigt werden.

Weitere Informationen: listbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Listbox Pattern | APG | WAI | W3C

Informationen zu diesem Artikel

Datum:

5.10.2023

Lizenz:

CC-BY-SA 4.0

Version:

0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!