Roll Widget

`option`

Markerar ett element som ett valbart objekt inuti en listbox. Ett alternativ MÅSTE vara en ättling till en listbox (direkt eller via aria-owns). Använd det inbyggda <option> inuti <select>; nå för role="option" enbart när du bygger en anpassad listbox eller en combobox-popup.

När ska det användas

Använd <option> inuti <select>. Det inbyggda elementet bär allt beteende utan extra kod.

role="option" är för objekt inuti ett anpassat role="listbox" — vanligtvis popup-listan för en combobox eller en flervalsmeny som det inbyggda elementet inte kan formateras för. Varje option-element MÅSTE ha ett unikt id så att den överordnade comboboxen eller listboxen kan referera till det via aria-activedescendant.

Om ditt alternativ representerar ett kryssruteliknande val i en flervals-listbox, sätt aria-selected="true". Använd aria-checked enbart för det sällsynta mönstret med alternativ-och-bockmarkering (de flesta flervals-listboxar använder aria-selected).

Vanliga fel

role="option" utanför ett role="listbox"-förälderelement. Skärmläsaren meddelar ett föräldrarlöst alternativ utan gruppkontext.
Saknat id på ett alternativ som måste vara aria-activedescendant-mål — comboboxen kan inte peka på det.
Att växla en CSS-klass .selected utan att uppdatera aria-selected. Den visuella vyn och tillgänglighetsträdet stämmer inte överens.
aria-selected="false" på alla alternativ i en enkelvalslistbox där ett ska vara standard. Sätt aria-selected="true" på ett.
Alternativ som i sig är knappar eller länkar (<a role="option">). Alternativsemantiken skriver över länksemantiken i hjälpmedelsverktyget, men klickbeteendet kvarstår — förvirrande.

Exempel

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