ARIA: listbox Rolle

Die listbox Rolle dient dazu, ein Element zu identifizieren, das eine Liste erzeugt, aus der ein Benutzer ein oder mehrere statische Elemente auswählen kann, ähnlich dem HTML <select>-Element. Im Gegensatz zu <select> kann eine Listbox Bilder enthalten. Listboxen enthalten Kinder, deren Rolle option ist, oder Elemente, deren Rolle group ist, die wiederum Kinder enthalten, deren Rolle option ist.

Es wird dringend empfohlen, das HTML-Select-Element oder eine Gruppe von Radio-Buttons zu verwenden, wenn nur ein Element ausgewählt werden kann, oder eine Gruppe von Kontrollkästchen, wenn mehrere Elemente ausgewählt werden können, da es bei der Tastaturinteraktion viel zu tun gibt, um den Fokus für alle Nachkommen zu verwalten. Native HTML-Elemente bieten diese Funktionalität von Haus aus.

Elemente mit der Rolle listbox haben einen impliziten aria-orientation Wert von vertical.

Wenn zu einer Liste getabbt wird, wird das erste Element in der Liste ausgewählt, falls noch nichts anderes ausgewählt ist. Auf-/Ab-Pfeile navigieren durch die Liste, und das Drücken der Umschalttaste + Auf-/Ab-Pfeiltasten wird die Auswahl bewegen und erweitern. Das Eintippen eines oder mehrerer Buchstaben wird durch die Listenelemente navigieren (derselbe Buchstabe springt zu jedem Element, das damit beginnt, unterschiedliche Buchstaben springen zum ersten Element, das mit diesem gesamten String beginnt). Wenn das aktuelle Element ein zugeordnetes Kontextmenü hat, wird Umschalt+F10 dieses Menü öffnen. Wenn Listenelemente überprüfbar sind, kann die Leertaste verwendet werden, um Kontrollkästchen umzuschalten. Bei auswählbaren Listenelementen schaltet die Leertaste deren Auswahl um, Umschalt+Leertaste kann verwendet werden, um zusammenhängende Elemente auszuwählen, Strg+Pfeil bewegt sich ohne Auswahl, und Strg+Leertaste kann verwendet werden, um nicht zusammenhängende Elemente auszuwählen. Es wird empfohlen, ein Kontrollkästchen, einen Link oder eine andere Methode zu verwenden, um alle Elemente auszuwählen, und Strg+A könnte als Shortcut dafür verwendet werden.

Wenn die listbox-Rolle einem Element hinzugefügt wird oder ein solches Element sichtbar wird, kündigen Screenreader beim Fokuserhalt das Label und die Rolle der Listbox an. Wenn eine Option oder ein Element innerhalb der Liste fokussiert wird, wird es als nächstes angekündigt, gefolgt von einem Hinweis auf die Position des Elements innerhalb der Liste, sofern der Screenreader dies unterstützt. Während sich der Fokus innerhalb der Liste bewegt, kündigt der Screenreader die relevanten Elemente an.

Zugehörige Rollen

Rolle option

Eine oder mehrere verschachtelte Optionen sind erforderlich. Alle ausgewählten Optionen haben aria-selected auf true gesetzt. Alle Optionen, die nicht ausgewählt sind, haben aria-selected auf false gesetzt. Wenn eine Option nicht auswählbar ist, lassen Sie das aria-selected weg.

Rolle list

Ein Abschnitt, der listitem Elemente enthält.

Zustände und Eigenschaften

aria-activedescendant

Enthält den id-String des aktuell aktiven Elements innerhalb der Listbox. Wenn es sich um ein Optionselement handelt, dann wäre das die id der zuletzt interagierten Option, unabhängig davon, ob diese Option einen aria-selected Wert von true hat oder nicht. Nimmt den Wert von nur einer id, selbst in einer Listbox mit mehreren Auswahlmöglichkeiten. Wenn die id nicht auf einen DOM-Nachkommen der Listbox verweist, muss diese id unter den IDs im aria-owns Attribut enthalten sein.

aria-owns

Dies ist eine leerzeichengetrennte Liste von Element-IDs, die keine DOM-Kindelemente der Listbox sind. IDs, die hier aufgelistet sind, können auch nicht in aria-owns Attributen anderer Elemente aufgelistet sein.

aria-multiselectable

Fügen Sie ein und setzen Sie auf true, wenn der Benutzer mehr als eine Option auswählen kann. Wenn auf true gesetzt, sollte jede auswählbare Option ein aria-selected Attribut enthalten und auf true oder false gesetzt sein. Optionen, die nicht auswählbar sind, sollten nicht das aria-selected Attribut haben. Wenn false oder weggelassen, benötigt nur die aktuell ausgewählte Option, falls eine Option ausgewählt ist, das aria-selected Attribut, und es muss auf true gesetzt sein.

aria-required

Ein boolesches Attribut, das anzeigt, dass eine Option mit einem nicht leeren Stringwert ausgewählt werden muss.

aria-readonly

Der Benutzer kann nicht ändern, welche Optionen ausgewählt oder nicht ausgewählt sind, aber die Listbox ist ansonsten bedienbar.

aria-label

Ein menschenlesbarer Stringwert, der die Listbox identifiziert. Wenn es ein sichtbares Label gibt, sollte stattdessen aria-labelledby verwendet werden, um auf dieses Label zu verweisen.

aria-labelledby

Identifiziert das sichtbare Element oder die sichtbaren Elemente in einer leerzeichengetrennten Liste von Element-IDs, die die Listbox identifizieren. Wenn es kein sichtbares Label gibt, sollte stattdessen aria-label verwendet werden, um ein Label einzuschließen. (Hinweis: "labelled" mit zwei L ist die korrekte Schreibweise gemäß den Konventionen der Zugänglichkeits-API.)

aria-roledescription

Ein menschenlesbarer Stringwert, der die Rolle der Listbox deutlicher identifiziert. Screenreader lesen diesen Wert oft dem Benutzer vor, nachdem sie das Label (falls vorhanden) gelesen haben, anstelle von "Listbox" zu sagen.

• Wenn eine Einzelauswahl-Listbox den Fokus erhält:

  • Wenn keine der Optionen vor dem Empfang des Fokus ausgewählt war, erhält die erste Option den Fokus. Optional kann die erste Option automatisch ausgewählt werden.
  • Wenn eine Option vor dem Empfang des Fokus ausgewählt ist, wird der Fokus auf die ausgewählte Option gesetzt.

• Wenn eine Mehrfachauswahl-Listbox den Fokus erhält:

  • Wenn keine der Optionen vor dem Empfang des Fokus ausgewählt war, wird der Fokus auf die erste Option gesetzt und es erfolgt keine automatische Änderung im Auswahlzustand.
  • Wenn eine oder mehrere Optionen vor dem Empfang des Fokus ausgewählt sind, wird der Fokus auf die erste ausgewählte Option gesetzt.

• Nach-unten-Pfeil

  : Bewegt den Fokus zur nächsten Option. Optional kann in einer Einzelauswahl-Listbox die Auswahl auch mit dem Fokus bewegt werden.

• Nach-oben-Pfeil

  : Bewegt den Fokus zur vorherigen Option. Optional kann in einer Einzelauswahl-Listbox die Auswahl auch mit dem Fokus bewegt werden.

• Pos1

  (Optional): Bewegt den Fokus zur ersten Option. Optional kann in einer Einzelauswahl-Listbox die Auswahl auch mit dem Fokus bewegt werden. Die Unterstützung dieser Taste wird für Listen mit mehr als fünf Optionen stark empfohlen.

• Ende

  (Optional): Bewegt den Fokus zur letzten Option. Optional kann in einer Einzelauswahl-Listbox die Auswahl auch mit dem Fokus bewegt werden. Die Unterstützung dieser Taste wird für Listen mit mehr als fünf Optionen stark empfohlen.

• Typen vorwärts ist für alle Listboxen empfohlen, insbesondere für solche mit mehr als sieben Optionen:

  • Ein Zeichen eingeben: Der Fokus bewegt sich zum nächsten Element, dessen Name mit dem eingegebenen Zeichen beginnt.
  • Mehrere Zeichen schnell hintereinander eingeben: Der Fokus bewegt sich zum nächsten Element, dessen Name mit der eingegebenen Zeichenfolge beginnt.

• Mehrfachauswahl: Autoren können entweder eines von zwei Interaktionsmodellen implementieren, um die Mehrfachauswahl zu unterstützen: ein empfohlenes Modell, das nicht erfordert, dass der Benutzer eine Modifikatortaste wie Umschalt oder Strg gedrückt hält, während er die Liste durchläuft, oder ein alternatives Modell, das erfordert, dass Modifikatortasten gehalten werden, um den Auswahlzustand beizubehalten.

  • Empfohlenes Auswahlmodell — das Halten von Modifikatortasten ist nicht notwendig:
    • Leertaste: ändert den Auswahlszustand der fokussierten Option.
    • Umschalt + Nach-unten-Pfeil (Optional): Bewegt den Fokus und schaltet den ausgewählten Zustand der nächsten Option um.
    • Umschalt + Nach-oben-Pfeil (Optional): Bewegt den Fokus und schaltet den ausgewählten Zustand der vorherigen Option um.
    • Umschalt + Leertaste (Optional): Wählt zusammenhängende Elemente von dem zuletzt ausgewählten Element bis zum fokussierten Element aus.
    • Strg + Umschalt + Pos1 (Optional): Wählt die fokussierte Option und alle Optionen bis zur ersten Option aus. Optional bewegt sich der Fokus zur ersten Option.
    • Strg + Umschalt + Ende (Optional): Wählt die fokussierte Option und alle Optionen bis zur letzten Option aus. Optional bewegt sich der Fokus zur letzten Option.
    • Strg + A (Optional): Wählt alle Optionen in der Liste aus. Optional, wenn alle Optionen ausgewählt sind, kann es auch alle Optionen abwählen.

Auswahl einer Option in einer Einzelauswahl-Listbox

Wenn der Benutzer eine Option auswählt, muss Folgendes geschehen:

1. Wählen Sie die zuvor ausgewählte Option ab, indem Sie aria-selected auf false setzen oder das Attribut vollständig entfernen, um das Erscheinungsbild der neu abgewählten Option so zu ändern, dass sie nicht ausgewählt aussieht.
2. Wählen Sie die neu ausgewählte Option aus, indem Sie aria-selected="true" für die Option setzen und das Erscheinungsbild der neu ausgewählten Option ändern, um sie ausgewählt erscheinen zu lassen.
3. Aktualisieren Sie den Wert von aria-activedescendant auf der Listbox mit der ID der neu ausgewählten Option.
4. Behandeln Sie visuell den Blur-, Fokus- und Auswahlszustand der Option.

Umschalten des Zustands einer Option in einer Mehrfachauswahl-Listbox

Wenn der Benutzer auf eine Option klickt, Leertaste drückt, während er sich auf einer Option befindet, oder anderweitig den Zustand einer Option umschaltet, muss Folgendes geschehen:

1. Schalten Sie den aria-selected Zustand der aktuell fokussierten Option um, ändern Sie den Zustand von aria-selected auf true, wenn er false war, oder auf false, wenn er true war.
2. Ändern Sie das Erscheinungsbild der Option, um ihren ausgewählten Zustand widerzuspiegeln.
3. Aktualisieren Sie den Wert von aria-activedescendant auf der Listbox auf die ID der Option, mit der der Benutzer gerade interagiert hat, auch wenn er die Option umgeschaltet hat, so dass sie nicht ausgewählt ist.

Der unten stehende Schnipsel, der aria-activedescendant verwendet, zeigt, wie die Listbox-Rolle direkt in den HTML-Quellcode eingefügt wird.

<p id="listbox1label" role="label">Select a color:</p>
<div
  role="listbox"
  tabindex="0"
  id="listbox1"
  aria-labelledby="listbox1label"
  aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" class="selected" aria-selected="true">
    Green
  </div>
  <div role="option" id="listbox1-2">Orange</div>
  <div role="option" id="listbox1-3">Red</div>
  <div role="option" id="listbox1-4">Blue</div>
  <div role="option" id="listbox1-5">Violet</div>
  <div role="option" id="listbox1-6">Periwinkle</div>
</div>

const listbox = document.getElementById("listbox1");
listbox.addEventListener("click", listItemClick);
listbox.addEventListener("keydown", listItemKeyEvent);
listbox.addEventListener("keypress", listItemKeyEvent);

Diese Aufgabe könnte einfacher mit den nativen HTML <select> und <label>-Elementen gelöst werden.

<label for="listbox1">Select a color:</label>
<select id="listbox1">
  <option selected>Green</option>
  <option>Orange</option>
  <option>Red</option>
  <option>Blue</option>
  <option>Violet</option>
  <option>Periwinkle</option>
</select>

• Beispiel einer scrollbaren Listbox: Einzelauswahl-Listbox, die scrollt, um weitere Optionen anzeigen zu können, ähnlich dem HTML <select> mit einem size-Attribut größer als eins.
• Listbox-Beispiel mit gruppierten Optionen: Einzelauswahl-Listbox mit gruppierten Optionen, ähnlich dem HTML <select> mit dem Attribut size auf größer als "1" gesetzt und Optionen, die mit optgroup-Elementen gruppiert sind.
• Beispiel-Listboxen mit umsortierbaren Optionen: Beispiele für sowohl Einzelauswahl- als auch Mehrfachauswahl-Listboxen mit begleitenden Werkzeugleisten, bei denen Optionen hinzugefügt, verschoben und entfernt werden können.

• Um tastaturzugänglich zu sein, sollten Autoren den Fokus aller Nachkommen dieser Rolle verwalten.
• Es wird empfohlen, dass Autoren eine unterschiedliche Gestaltung für die Auswahl verwenden, wenn die Liste nicht fokussiert ist, z.B. wird eine nicht aktive Auswahl oft mit einer helleren Hintergrundfarbe angezeigt.
• Wenn die Listbox nicht Teil eines anderen Widgets ist, sollte das aria-labelledby-Attribut gesetzt sein.
• Wenn ein oder mehrere Einträge keine DOM-Kinder der Listbox sind, müssen zusätzliche aria-*-Eigenschaften gesetzt werden (siehe ARIA Best Practices).
• Wenn es einen validen Grund gibt, die Listbox zu erweitern, könnte die combobox-Rolle angemessener sein.

• HTML <select>-Element
• HTML <label>-Element
• HTML <option>-Element
• ARIA: combobox Rolle
• ARIA: option Rolle
• ARIA: list Rolle
• ARIA: listitem Rolle
• ARIA Best Practices – Listbox