Rola Widget

`option`

Oznacza element jako wybieralną pozycję wewnątrz listbox. Opcja MUSI być potomkiem listbox (bezpośrednio lub przez aria-owns). Używaj natywnego <option> w <select>; po role="option" sięgaj tylko przy budowaniu własnego listbox lub okna podręcznego combobox.

Kiedy używać

Używaj <option> wewnątrz <select>. Element natywny zapewnia całe wymagane zachowanie bez dodatkowego kodu.

role="option" służy do oznaczania pozycji wewnątrz własnego role="listbox" — najczęściej w oknie podręcznym combobox lub selektorze wielokrotnego wyboru, którego nie można ostylować za pomocą elementów natywnych. Każdy element opcji MUSI posiadać unikalny id, żeby nadrzędny combobox lub listbox mógł wskazać go przez aria-activedescendant.

Jeśli opcja reprezentuje wybór w stylu pola wyboru w listbox wielokrotnego wyboru, ustaw aria-selected="true". Używaj aria-checked wyłącznie w rzadkim wzorcu opcji ze znacznikiem (większość listbox wielokrotnego wyboru korzysta z aria-selected).

Typowe błędy

role="option" poza rodzicem role="listbox". Czytnik ekranu ogłasza osierocona opcję bez kontekstu grupy.
Brak id na opcji, która ma być celem aria-activedescendant — combobox nie może jej wskazać.
Przełączanie klasy CSS .selected bez aktualizacji aria-selected. Drzewo wizualne i drzewo dostępności są rozbieżne.
aria-selected="false" na każdej opcji w listbox jednokrotnego wyboru, gdy jedna ma być domyślna. Ustaw aria-selected="true" na jednej z nich.
Opcje będące jednocześnie przyciskami lub łączami (<a role="option">). Semantyka option nadpisuje semantykę łącza w technologii wspomagającej, jednak zachowanie po kliknięciu pozostaje — co jest mylące.

Przykład

<label id="lang">Język</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>