Rolle Widget

`option`

Markerer et element som et valgbart punkt i en listbox. Et option SKAL være et efterkomme-element af en listbox (direkte eller via aria-owns). Brug native <option> inden i <select>; grib efter role="option" kun ved opbygning af en brugerdefineret listbox eller combobox-popup.

Hvornår bruges det

Brug <option> inden i <select>. Native bærer al adfærd gratis.

role="option" er til punkter inden i en brugerdefineret role="listbox" — typisk popup’en til en combobox eller en multi-select-vælger, som native ikke kan styles. Hvert option-element SKAL have et unikt id, så den overordnede combobox eller listbox kan referere til det via aria-activedescendant.

Hvis dit option repræsenterer et afkrydsningsvalg i en multi-select listbox, sæt aria-selected="true". Brug aria-checked kun til det sjældne option-med-flueben-mønster (de fleste multi-select listboxes bruger aria-selected).

Hyppige fejl

role="option" uden for en role="listbox"-forælder. Skærmlæseren annoncerer et forældreless option uden gruppekontekst.
Manglende id på et option, der skal være aria-activedescendant-mål — comboboxen kan ikke pege på det.
Skift af en CSS .selected-klasse uden at opdatere aria-selected. Det visuelle og tilgængelighedstræet er uenige.
aria-selected="false" på alle options i en single-select listbox, hvor én er tiltænkt som standard. Sæt aria-selected="true" på én.
Options, der selv er knapper eller links (<a role="option">). Option-semantikken tilsidesætter link-semantikken i AT, men klikadfærden forbliver — forvirrende.

Eksempel

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