Rooli Widget

`option`

Merkitsee elementin valittavaksi kohteeksi listboxin sisällä. Option TÄYTYY olla listboxin jälkeläinen (suoraan tai aria-owns-attribuutin kautta). Käytä natiivia <option>-elementtiä <select>-elementin sisällä; käytä role="option" vain rakentaessasi mukautettua listboxia tai combobox-ponnahdusikkunaa.

Milloin käyttää

Käytä <option>-elementtiä <select>-elementin sisällä. Natiivi tuo kaikki toiminnot ilmaiseksi.

role="option" on tarkoitettu kohteille mukautetun role="listbox"-elementin sisällä — tyypillisesti comboboxin tai monivalintapoimijan ponnahdusikkunassa, jota natiivi ei pysty tyylittelemään. Jokaisella option-elementillä TÄYTYY olla yksilöllinen id, jotta ylätason combobox tai listbox voi viitata siihen aria-activedescendant-attribuutilla.

Jos vaihtoehto edustaa valintaruutu-tyylisiä valintoja monivalinta-listboxissa, aseta aria-selected="true". Käytä aria-checked-attribuuttia vain harvinaiseen valintamerkki-optioon (useimmat monivalinta-listboxit käyttävät aria-selected-attribuuttia).

Yleiset virheet

role="option" ilman role="listbox"-ylätasoa. Ruudunlukuohjelma ilmoittaa orpo-optionin ilman ryhmäkontekstia.
Puuttuva id optiolta, jonka täytyy olla aria-activedescendant-kohde — combobox ei pysty osoittamaan siihen.
CSS:n .selected-luokan vaihto ilman aria-selected-attribuutin päivittämistä. Visuaalinen esitys ja saavutettavuuspuu ovat ristiriidassa.
aria-selected="false" jokaisessa optiossa yksivalintaisessa listboxissa, jossa yhden pitäisi olla oletusvalinta. Aseta aria-selected="true" yhdelle.
Optiot, jotka ovat itse painikkeita tai linkkejä (<a role="option">). Option-semantiikka ohittaa linkkisemantiikan avustavassa teknologiassa, mutta napsautustoiminta pysyy — sekava yhdistelmä.

Esimerkki

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