Tillstånd Widgettillstånd

`aria-selected`

Anger att ett objekt inuti en en- eller flervalsbehållare är markerat. Används på tab, option, gridcell, treeitem och liknande roller. Skiljer sig från aria-checked (kryssruta/radio) och aria-pressed (växelknapp).

När du ska använda det

På objekt som tillhör en behållare med en markeringsmodell:

role="tab" inuti en tablist (exakt ett markerat).
role="option" inuti en listbox (ett eller flera, beroende på aria-multiselectable).
role="treeitem" inuti ett tree.
role="gridcell", role="row", role="columnheader", role="rowheader" inuti ett grid.

Tillståndet beskriver relationen mellan objektet och behållarens markering — inte ett fristående på/av som en kryssruta. Välj rätt tillstånd för mönstret:

aria-selected — objekt i en flik-, option-, träd- eller grid-kontext.
aria-checked — kryssrutor och radioknappar (oberoende val).
aria-pressed — växelknappar (knappen själv är på eller av).

Ett vanligt misstag är att sätta aria-selected="true" på en <button> för att betyda “användaren klickade senast på mig”. Om elementet inte är en del av en välj-widget, använd aria-pressed eller aria-current i stället.

Hur du håller det synkroniserat

Giltiga värden är "true" och "false". Rendera "false" på omarkerade objekt i stället för att utelämna attributet — hjälpmedlet annonserar då korrekt positionsinformation i stil med “1 av 5”. I en en-valdswidget (tablist, en-valds listbox) ska exakt ett objekt åt gången vara "true".

Attributet måste ändras i takt med den visuella indikatorn och fokushanteringen. I en tablist flyttar val vanligtvis också tabindex="0" till den valda fliken och tabindex="-1" bort från de övriga.

Vanliga fel

Att använda aria-selected på en knapp eller länk utanför en välj-widget.
Flera aria-selected="true"-objekt i en en-valds tablist eller listbox.
Att glömma att sätta aria-selected="false" på det tidigare markerade objektet när markeringen flyttas.
Att styla ett “markerat” utseende via CSS utan att växla attributet.
Att förväxla aria-selected med aria-checked på listbox-alternativ (alltid selected) eller med aria-current på en navigeringslänk (current, inte selected).
Att sätta aria-selected på role="menuitem" — menyobjekt stöder det inte; använd aria-checked för menykryssrutor/radioalternativ.

Exempel

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