aria-selected

Wanneer te gebruiken

Op items die behoren tot een container met een selectiemodel:

• role="tab" binnen een tablist (precies één geselecteerd).
• role="option" binnen een listbox (één of meerdere, afhankelijk van aria-multiselectable).
• role="treeitem" binnen een tree.
• role="gridcell", role="row", role="columnheader", role="rowheader" binnen een grid.

De toestand beschrijft de relatie tussen het item en de selectie van de container — niet een zelfstandige aan/uit zoals een selectievakje. Kies de juiste toestand voor het patroon:

• aria-selected — items in een tab-, optie-, boom- of rastercontext.
• aria-checked — selectievakjes en keuzerondjes (onafhankelijke keuzes).
• aria-pressed — schakelknoppen (de knop zelf is aan of uit).

Een veelgemaakte fout is aria-selected="true" op een <button> plaatsen om te betekenen “de gebruiker heeft hier als laatste op geklikt”. Als het element geen deel uitmaakt van een selectiestijlwidget, gebruik dan aria-pressed of aria-current.

Synchronisatie bewaken

Geldige waarden zijn "true" en "false". Render "false" op de niet-geselecteerde items in plaats van het attribuut weg te laten — hulptechnologie kondigt dan positie-informatie zoals “1 van 5” correct aan. In een enkelvoudige selectiewidget (tablist, enkelvoudige listbox) dient op elk moment precies één item "true" te zijn.

Het attribuut moet gelijktijdig met de visuele indicator en focusbeheer worden gewijzigd. In een tablist verplaatst het verplaatsen van de selectie gewoonlijk ook tabindex="0" naar de geselecteerde tab en tabindex="-1" van de anderen.

Veelvoorkomende fouten

• aria-selected gebruiken op een knop of koppeling buiten een selectiestijlcontainer.
• Meerdere aria-selected="true"-items in een enkelvoudige tablist of listbox.
• Vergeten aria-selected="false" in te stellen op het eerder geselecteerde item wanneer de selectie verschuift.
• Een “geselecteerde” weergave via CSS stylen zonder het attribuut te wisselen.
• aria-selected verwarren met aria-checked op listbox-opties (altijd selected) of met aria-current op een navigatiekoppeling (current, niet selected).
• aria-selected instellen op role="menuitem" — menu-items ondersteunen het niet; gebruik aria-checked voor menuselect­vakjes/-keuzerondjes.

Voorbeeld

<div role="tablist" aria-label="Sections">
  <button role="tab" id="tab-1" aria-selected="true"  tabindex="0"  aria-controls="panel-1">Overview</button>
  <button role="tab" id="tab-2" aria-selected="false" tabindex="-1" aria-controls="panel-2">Details</button>
  <button role="tab" id="tab-3" aria-selected="false" tabindex="-1" aria-controls="panel-3">Reviews</button>
</div>