Standards · ARIA

Rolle Zusammengesetztes Widget

listbox

Kennzeichnet ein Element als Liste auswählbarer Optionen. Für einfache Einzelauswahl sollte <select> verwendet werden — mobilfreundlich, vollständige Tastaturunterstützung. role="listbox" ist sinnvoll bei benutzerdefiniertem Styling, Mehrfachauswahl oder Combobox-Kopplung.

Wann zu verwenden

<select> (Einzelauswahl) oder <select multiple> sollte wann immer möglich verwendet werden. Das native Element liefert das gesamte Interaktionsmodell einschließlich plattformgerechter Tastatursteuerung.

role="listbox" ist angemessen, wenn:

  • Die Listbox das Popup einer benutzerdefinierten Combobox ist.
  • Reichhaltiger Optionsinhalt (Icons, Sekundärtext) benötigt wird, den <select> nicht darstellen kann.
  • Mehrfachauswahl mit benutzerdefiniertem Häkchen-Styling erforderlich ist.
  • Eine Transferliste oder ein filterbares Auswahlfeld erstellt wird.

Kindelemente müssen role="option" tragen (mit role="group" als erlaubtem Zwischenwrapper für die Abschnittsgliederung). Für Mehrfachauswahl-Listboxen muss aria-multiselectable="true" gesetzt werden.

Tastatur- und Fokusvertrag

Gemäß dem APG-Listbox-Muster:

  • Tab verschiebt den Fokus zur Listbox; Tab verlässt sie wieder. Innerhalb der Listbox verbleibt der Fokus auf dem Container; die „aktive“ Option wird über aria-activedescendant verfolgt.
  • Pfeil-oben/Pfeil-unten bewegen die aktive Option.
  • Pos1 / Ende springt zur ersten bzw. letzten Option.
  • Einzelauswahl: Jeder Pfeiltastendruck wählt gleichzeitig die aktive Option aus.
  • Mehrfachauswahl: Leertaste schaltet die Auswahl der aktiven Option um; Umschalt+Pfeil erweitert einen zusammenhängenden Bereich; Strg/Cmd+A wählt alle aus.
  • Vorausschreiben: Durch Tippen eines Buchstabens wird zur nächsten Option gesprungen, die mit diesem Buchstaben beginnt.

Häufige Fehler

  • DOM-Fokus auf jede Option statt Verwendung von aria-activedescendant. Bricht das Vorausschreiben und die Combobox-Integration.
  • role="option"-Kindelemente ohne id-Attribute — aria-activedescendant kann nicht auf sie verweisen.
  • Mehrfachauswahl-Listbox ohne aria-multiselectable="true". Screenreader kündigen sie als Einzelauswahl an.
  • Die Listbox besitzt Optionen, die anderswo im DOM liegen, ohne aria-owns zur expliziten Darstellung der Beziehung zu verwenden.
  • Verwendung von role="listbox" für eine statische Liste schreibgeschützter Elemente. Das ist role="list", nicht listbox — Listbox impliziert Interaktivität.

Beispiel

<label id="topicsLabel">Pick your topics</label>
<ul
  role="listbox"
  aria-labelledby="topicsLabel"
  aria-multiselectable="true"
  tabindex="0"
  aria-activedescendant="topic-1"
>
  <li id="topic-1" role="option" aria-selected="true">Accessibility</li>
  <li id="topic-2" role="option" aria-selected="false">Assistive tech</li>
  <li id="topic-3" role="option" aria-selected="true">Standards</li>
</ul>