Rol Widget

`option`

Markeert een element als een selecteerbaar item in een listbox. Een option MOET een afstammeling zijn van een listbox (direct of via aria-owns). Gebruik native <option> in <select>; gebruik role="option" alleen voor een aangepaste listbox of combobox-popup.

Wanneer te gebruiken

Gebruik <option> in <select>. Native bevat elk gedrag standaard.

role="option" is voor items in een aangepaste role="listbox" — doorgaans de popup van een combobox of een multi-select-picker die native niet kan worden gestyled. Elk option-element MOET een unieke id hebben zodat de bovenliggende combobox of listbox ernaar kan verwijzen via aria-activedescendant.

Als een optie een keuze in checkbox-stijl vertegenwoordigt in een multi-select listbox, stel dan aria-selected="true" in. Gebruik aria-checked alleen voor het zeldzame patroon van een optie met vinkje (de meeste multi-select listboxen gebruiken aria-selected).

Veelvoorkomende fouten

role="option" buiten een role="listbox"-parent. De schermlezer kondigt een wees-optie aan zonder groepscontext.
Ontbrekende id op een optie die het doel van aria-activedescendant moet zijn — de combobox kan er niet naar verwijzen.
Een CSS-klasse .selected wisselen zonder aria-selected bij te werken. De visuele weergave en de toegankelijkheidsstructuur komen niet overeen.
aria-selected="false" op elke optie in een enkelvoudige listbox waarbij één de standaard zou moeten zijn. Stel aria-selected="true" in op één optie.
Opties die zelf knoppen of links zijn (<a role="option">). De option-semantiek overschrijft de linksemantiek in de hulptechnologie, maar het klikgedrag blijft — verwarrend.

Voorbeeld

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