Standarder · ARIA

Rolle Sammensat widget

listbox

Markerer et element som en liste af valgbare muligheder. Brug <select> til simpelt enkeltvalg — det giver mobilvenlig betjening og fuldt tastaturunderstøttelse. Brug role="listbox" ved tilpasset styling, flervalg eller kombination med combobox.

Hvornår brug det

Brug <select> (enkeltvalg) eller <select multiple> når det er muligt. Native elementer leverer hele interaktionsmodellen, herunder platformsspecifik tastaturhåndtering.

role="listbox" er passende når:

  • Listboxen er popup-elementet i en tilpasset combobox.
  • Man har brug for avanceret indhold i valgmulighederne (ikoner, sekundær tekst), som <select> ikke kan gengive.
  • Man har brug for flervalg med tilpasset afkrydsningsstil.
  • Man bygger en overførselsliste eller filtrerbar valgboks.

Børneelementer skal have role="option" (med role="group" tilladt som mellemliggende wrapper til sektionering). Sæt aria-multiselectable="true" for listboxe med flervalg.

Tastatur- og fokuskontrakt

Jf. APG listbox-mønsteret:

  • Tab flytter fokus til listboxen; Tab flytter ud. Inde i listboxen forbliver fokus på containeren, og den “aktive” valgmulighed spores via aria-activedescendant.
  • Pile op/ned flytter den aktive valgmulighed.
  • Home/End hopper til første/sidste.
  • Enkeltvalg: hvert piletryk vælger også den aktive mulighed.
  • Flervalg: mellemrum skifter markering på den aktive mulighed; Shift+Pil udvider et sammenhængende interval; Ctrl/Cmd+A vælger alle.
  • Forudindtastning: at skrive et bogstav hopper til næste mulighed, der begynder med det bogstav.

Typiske fejl

  • Flytning af DOM-fokus til hver enkelt mulighed i stedet for brug af aria-activedescendant. Ødelægger forudindtastning og combobox-integration.
  • role="option"-børn uden id-attributter — aria-activedescendant kan ikke referere til dem.
  • Flervalgs-listbox mangler aria-multiselectable="true". Skærmlæsere annoncerer den som enkeltvalg.
  • Listbox indeholder valgmuligheder, der befinder sig et andet sted i DOM’en, uden brug af aria-owns til at gøre relationen eksplicit.
  • Brug af role="listbox" til en statisk liste af skrivebeskyttede elementer. Det er role="list", ikke listbox — listbox indebærer interaktivitet.

Eksempel

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