option

Кога да се използва

Използвайте <option> в <select>. Нативният елемент носи цялото поведение безплатно.

role="option" е за елементи в потребителски role="listbox" — обикновено изскачащото меню на combobox или инструмент за избор на множество стойности, който нативният елемент не може да стилизира. Всеки елемент с опция ТРЯБВА да има уникален id, за да може родителският combobox или listbox да го посочи чрез aria-activedescendant.

Ако опцията представлява избор по подобие на отметка в listbox с многократен избор, задайте aria-selected="true". Използвайте aria-checked само за рядкия шаблон „опция с отметка” (повечето listbox с многократен избор използват aria-selected).

Чести грешки

• role="option" извън родителски елемент с role="listbox". Екранният четец обявява осиротяла опция без групов контекст.
• Липсващ id на опция, която трябва да бъде целта на aria-activedescendant — combobox не може да я посочи.
• Превключване на CSS клас .selected без актуализиране на aria-selected. Визуалното дърво и дървото на достъпността не съвпадат.
• aria-selected="false" за всяка опция в listbox с единичен избор, при положение че една трябва да е избрана по подразбиране. Задайте aria-selected="true" за една от тях.
• Опции, които сами по себе си са бутони или връзки (<a role="option">). Семантиката на опцията замества семантиката на връзката в помощната технология, но поведението при натискане остава — объркващо за потребителите.

Пример

<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>