Stan Stan widgetu

`aria-selected`

Wskazuje, że element wewnątrz kontenera z modelem jednokrotnego lub wielokrotnego wyboru jest aktualnie zaznaczony. Używany na rolach tab, option, gridcell, treeitem i podobnych. Różni się od aria-checked (pole wyboru/przycisk radiowy) i aria-pressed (przycisk przełączający).

Kiedy stosować

Na elementach należących do kontenera z modelem zaznaczenia:

role="tab" wewnątrz tablist (dokładnie jeden zaznaczony).
role="option" wewnątrz listbox (jeden lub wiele, w zależności od aria-multiselectable).
role="treeitem" wewnątrz tree.
role="gridcell", role="row", role="columnheader", role="rowheader" wewnątrz grid.

Stan opisuje relację między elementem a zaznaczeniem jego kontenera — nie jest to samodzielne włączenie/wyłączenie jak w przypadku pola wyboru. Należy wybrać odpowiedni stan dla danego wzorca:

aria-selected — elementy w kontekście zakładki, opcji, drzewa lub siatki.
aria-checked — pola wyboru i przyciski radiowe (niezależne wybory).
aria-pressed — przyciski przełączające (sam przycisk jest włączony lub wyłączony).

Częstym błędem jest umieszczanie aria-selected="true" na elemencie <button>, by oznaczać „użytkownik kliknął mnie jako ostatni”. Jeśli element nie jest częścią widżetu w stylu select, należy zamiast tego użyć aria-pressed lub aria-current.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true" i "false". Należy renderować "false" na niezaznaczonych elementach zamiast pomijać atrybut — technologia wspomagająca ogłasza wtedy poprawnie informacje o pozycji w stylu „1 z 5”. W widżecie z pojedynczym wyborem (tablist, listbox z pojedynczym wyborem) dokładnie jeden element powinien mieć wartość "true" w danym momencie.

Atrybut musi zmieniać się równocześnie ze wskaźnikiem wizualnym i zarządzaniem fokusem. W tablist przeniesienie zaznaczenia zwykle przenosi też tabindex="0" na zaznaczoną zakładkę i ustawia tabindex="-1" na pozostałe.

Typowe błędy

Używanie aria-selected na przycisku lub łączu poza jakimkolwiek kontenerem w stylu select.
Wiele elementów z aria-selected="true" w tablist z pojedynczym wyborem lub listbox.
Zapominanie o ustawieniu aria-selected="false" na poprzednio zaznaczonym elemencie przy przeniesieniu zaznaczenia.
Stylowanie wyglądu „zaznaczony” za pomocą CSS bez przełączania atrybutu.
Mylenie aria-selected z aria-checked na opcjach listbox (zawsze selected) lub z aria-current na łączu nawigacyjnym (current, nie selected).
Ustawianie aria-selected na role="menuitem" — elementy menu tego nie obsługują; należy używać aria-checked dla pól wyboru/przycisków radiowych w menu.

Przykład

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