Standarder · ARIA

Roll Sammansatt widget

listbox

Markerar ett element som en lista med valbara alternativ. Använd <select> för enkelt enval — det ger mobilvänlig väljare och fullt tangentbordsstöd. Använd role="listbox" när du behöver anpassad styling, flerval med anpassad rendering eller ihopparning med en combobox.

När du ska använda

Använd <select> (enval) eller <select multiple> när det är möjligt. Det inbyggda elementet levererar hela interaktionsmodellen, inklusive plattformskorrekt tangentbordshantering.

role="listbox" är lämpligt när:

  • Listboxen är popup-elementet i en anpassad combobox.
  • Du behöver rikt alternativinnehåll (ikoner, sekundär text) som <select> inte kan rendera.
  • Du behöver flerval med anpassad bockmarkeringsstyling.
  • Du bygger en överföringslista eller filtrerbar väljare.

Barn måste vara role="option" (med role="group" tillåtet som mellanliggande omslag för sektionering). Sätt aria-multiselectable="true" för listboxar med flerval.

Tangentbords- och fokuskontrakt

Enligt APG:s listboxmönster:

  • Tab flyttar fokus till listboxen; Tab flyttar ut. Inne i listboxen stannar fokus på behållaren och det “aktiva” alternativet spåras via aria-activedescendant.
  • Upp/ned-pilar flyttar det aktiva alternativet.
  • Home / End hoppar till första / sista.
  • Enval: varje piltryckning väljer också det aktiva alternativet.
  • Flerval: Mellanslag växlar val på det aktiva alternativet; Shift+Pil utökar ett sammanhängande intervall; Ctrl/Cmd+A väljer alla.
  • Förtypning: att skriva en bokstav hoppar till nästa alternativ som börjar med den bokstaven.

Vanliga fel

  • Att flytta DOM-fokus till varje alternativ i stället för att använda aria-activedescendant. Bryter förtypning och combobox-integration.
  • role="option"-barn utan id-attribut — aria-activedescendant kan inte referera till dem.
  • Flervals-listbox som saknar aria-multiselectable="true". Skärmläsare meddelar det som enval.
  • Listbox äger alternativ som finns på annan plats i DOM utan att använda aria-owns för att göra relationen explicit.
  • Att använda role="listbox" för en statisk lista med skrivskyddade poster. Det är role="list", inte listbox — listbox förutsätter interaktivitet.

Exempel

<label id="topicsLabel">Pick your topics</label>
<ul
  role="listbox"
  aria-labelledby="topicsLabel"
  aria-multiselectable="true"
  tabindex="0"
  aria-activedescendant="topic-1"
>
  <li id="topic-1" role="option" aria-selected="true">Accessibility</li>
  <li id="topic-2" role="option" aria-selected="false">Assistive tech</li>
  <li id="topic-3" role="option" aria-selected="true">Standards</li>
</ul>