option

Wann zu verwenden

<option> innerhalb von <select> sollte verwendet werden. Das native Element trägt jedes Verhalten automatisch.

role="option" ist für Einträge innerhalb einer benutzerdefinierten role="listbox" gedacht — typischerweise das Popup einer Combobox oder eines Multi-Select-Pickers, den das native Element nicht ausreichend gestalten lässt. Jedes Option-Element MUSS eine eindeutige id besitzen, damit die übergeordnete Combobox oder Listbox es über aria-activedescendant referenzieren kann.

Stellt eine Option eine Checkbox-artige Auswahl in einer Multi-Select-Listbox dar, sollte aria-selected="true" gesetzt werden. aria-checked kommt nur beim seltenen Muster „Option mit Häkchen“ zum Einsatz — die meisten Multi-Select-Listboxen verwenden aria-selected.

Häufige Fehler

• role="option" außerhalb eines übergeordneten role="listbox". Der Screenreader kündigt eine verwaiste Option ohne Gruppenkontext an.
• Fehlende id auf einer Option, die als Ziel von aria-activedescendant dienen soll — die Combobox kann nicht auf sie verweisen.
• Umschalten einer CSS-Klasse .selected, ohne aria-selected zu aktualisieren. Visueller Zustand und Barrierefreiheitsbaum stimmen dann nicht überein.
• aria-selected="false" auf jeder Option in einer Single-Select-Listbox, obwohl eine Option als Standard ausgewählt sein soll. Bei einer Option muss aria-selected="true" gesetzt werden.
• Optionen, die selbst Schaltflächen oder Links sind (<a role="option">). Die Option-Semantik überschreibt die Link-Semantik im Hilfstechnologie-Baum, das Klick-Verhalten bleibt jedoch erhalten — das ist verwirrend.

Beispiel

<label id="lang">Language</label>
<ul
  role="listbox"
  aria-labelledby="lang"
  tabindex="0"
  aria-activedescendant="lang-2"
>
  <li id="lang-1" role="option" aria-selected="false">English</li>
  <li id="lang-2" role="option" aria-selected="true">Spanish</li>
  <li id="lang-3" role="option" aria-selected="false">French</li>
</ul>