Състояние Състояние на контрола

`aria-selected`

Указва, че елемент вътре в контейнер с единичен или множествен избор е текущо избран. Използва се при роли tab, option, gridcell, treeitem и подобни. Отличен от aria-checked (checkbox/radio) и aria-pressed (бутон с превключване).

Кога да се използва

Върху елементи, принадлежащи към контейнер с модел за избор:

role="tab" вътре в tablist (точно един избран).
role="option" вътре в listbox (един или повече, в зависимост от aria-multiselectable).
role="treeitem" вътре в tree.
role="gridcell", role="row", role="columnheader", role="rowheader" вътре в grid.

Състоянието описва отношението между елемента и избора на контейнера му — не самостоятелно включване/изключване като при checkbox. Изберете правилното състояние за модела:

aria-selected — елементи в контекст на таб, опция, дърво или решетка.
aria-checked — checkboxes и radio бутони (независими избори).
aria-pressed — бутони с превключване (самият бутон е включен или изключен).

Честа грешка е поставянето на aria-selected="true" върху <button>, за да се означи „потребителят е кликнал върху мен последно”. Ако елементът не е част от уиджет от тип избор, използвайте aria-pressed или aria-current вместо това.

Как да се поддържа синхронизиран

Валидните стойности са "true" и "false". Изобразете "false" върху неизбраните елементи, вместо да пропускате атрибута — по този начин помощните технологии обявяват правилно информация за позицията от тип „1 от 5”. В уиджет с единичен избор (tablist, listbox с единичен избор), точно един елемент трябва да е "true" в даден момент.

Атрибутът трябва да се промени в синхрон с визуалния индикатор и с управлението на фокуса. В tablist, преместването на избора обикновено премества и tabindex="0" към избрания таб и tabindex="-1" от останалите.

Чести грешки

Използване на aria-selected върху бутон или връзка извън контейнер от тип избор.
Множество елементи с aria-selected="true" в единичен tablist или listbox.
Забравяне да се зададе aria-selected="false" на предишно избрания елемент при преместване на избора.
Стилизиране на „избран” вид чрез CSS без обръщане на атрибута.
Объркване на aria-selected с aria-checked при опции на listbox (винаги selected) или с aria-current при навигационна връзка (current, не selected).
Задаване на aria-selected върху role="menuitem" — елементите на менюто не го поддържат; използвайте aria-checked за checkboxes / radios на менюто.

Пример

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