Standarder · ARIA

Tilstand Widgettilstand

aria-selected

Angiver at et element inde i en enkelt- eller flervalgs-beholder er aktuelt valgt. Bruges på tab, option, gridcell, treeitem og lignende roller. Adskiller sig fra aria-checked (afkrydsningsfelt/radio) og aria-pressed (skifteknap).

Hvornår bruges det

På elementer der tilhører en beholder med en valgsmodel:

  • role="tab" inde i en tablist (præcis ét valgt).
  • role="option" inde i en listbox (et eller flere, afhængigt af aria-multiselectable).
  • role="treeitem" inde i et tree.
  • role="gridcell", role="row", role="columnheader", role="rowheader" inde i et grid.

Tilstanden beskriver forholdet mellem elementet og dets beholderes valg — ikke et selvstændigt til/fra som et afkrydsningsfelt. Vælg den rigtige tilstand til mønsteret:

  • aria-selected — elementer i en fane-, option-, træ- eller grid-kontekst.
  • aria-checked — afkrydsningsfelter og radioknapper (uafhængige valg).
  • aria-pressed — skifteknapper (knappen selv er til eller fra).

En almindelig fejl er at sætte aria-selected="true" på en <button> for at betyde “brugeren klikkede sidst her”. Hvis elementet ikke er en del af en valg-widget, bruges aria-pressed eller aria-current i stedet.

Sådan holdes det synkroniseret

Gyldige værdier er "true" og "false". Sæt "false" på de ikke-valgte elementer frem for at udelade attributten — hjælpeteknologien annoncerer da positionsinfo i stil med “1 af 5” korrekt. I en enkeltvalgs-widget (tablist, enkeltvalgs-listbox) bør præcis ét element til enhver tid være "true".

Attributten skal ændres i takt med den visuelle indikator og fokusstyringen. I en tablist flytter valg normalt også tabindex="0" til den valgte fane og tabindex="-1" væk fra de øvrige.

Typiske fejl

  • At bruge aria-selected på en knap eller et link uden for en valgs-beholder.
  • Flere aria-selected="true"-elementer i en enkeltvalgs-tablist eller listbox.
  • At glemme at sætte aria-selected="false" på det tidligere valgte element, når valget flyttes.
  • At style en “valgt” fremtoning via CSS uden at skifte attributten.
  • At forveksle aria-selected med aria-checked på listbox-options (altid selected) eller med aria-current på et navigationslink (current, ikke selected).
  • At sætte aria-selected på role="menuitem" — menupunkter understøtter det ikke; brug aria-checked til menucheckboxe / radioer.

Eksempel

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