Tila Widgetin tila

`aria-selected`

Ilmaisee, että kohde yksi- tai monivalintasäilössä on tällä hetkellä valittuna. Käytetään tab-, option-, gridcell-, treeitem- ja vastaavissa rooleissa. Eroaa aria-checked- (valintaruutu/radio) ja aria-pressed- (vaihtopainike) -tiloista.

Milloin käyttää

Kohteissa, jotka kuuluvat säilöön, jossa on valintatila:

role="tab" tablist-elementissä (tasan yksi valittuna).
role="option" listbox-elementissä (yksi tai useita, riippuen aria-multiselectable-attribuutista).
role="treeitem" tree-elementissä.
role="gridcell", role="row", role="columnheader", role="rowheader" grid-elementissä.

Tila kuvaa kohteen ja säilön valintatilan välistä suhdetta — ei itsenäistä päälle/pois-tilaa kuten valintaruutu. Valitse oikea tila kaavaan:

aria-selected — kohteet tab-, option-, tree- tai grid-kontekstissa.
aria-checked — valintaruudut ja radiopainikkeet (itsenäiset valinnat).
aria-pressed — vaihtopainikkeet (painike itse on päällä tai pois).

Yleinen virhe on laittaa aria-selected="true" <button>-elementtiin tarkoittamaan “käyttäjä napsautti minua viimeksi”. Jos elementti ei kuulu valintawidgetiin, käytä aria-pressed- tai aria-current-tilaa.

Pitäminen synkronissa

Kelvolliset arvot ovat "true" ja "false". Aseta valitsemattomiin kohteisiin "false" sen sijaan, että jättäisit attribuutin pois — avustava teknologia ilmoittaa tällöin oikein “1 of 5” -tyylisen sijaintitiedon. Yksivalintawidgetissä (tablist, yksivalintainen listbox) täsmälleen yhden kohteen tulee olla "true" kerrallaan.

Attribuutin on muututtava samanaikaisesti visuaalisen ilmaisimen ja kohdistuksenhallinnan kanssa. Tablistissä valinnan siirtäminen siirtää tavallisesti myös tabindex="0" valitulle välilehdelle ja tabindex="-1" muille.

Yleisimmät virheet

aria-selected:n käyttäminen painikkeessa tai linkissä ilman valintakontekstia.
Useita aria-selected="true" -kohteita yksivalintaisessa tablistissä tai listboxissa.
aria-selected="false":n unohtaminen aiemmin valitulta kohteelta, kun valinta siirtyy.
CSS:llä tyylitelty “valittu”-ulkoasu ilman attribuutin päivittämistä.
aria-selected:n sekoittaminen aria-checked-tilaan listbox-optioissa (aina selected) tai aria-current-tilaan navigaatiolinkissä (current, ei selected).
aria-selected:n asettaminen role="menuitem" -kohteelle — valikkokohdat eivät tue sitä; käytä aria-checked-tilaa valikkovalintaruuduille ja -radiopainikkeille.

Esimerkki

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