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

`aria-checked`

Указва текущото отметнато състояние на квадратче за отметка, радио бутон или елемент от менюто с подобна семантика. Приема стойности "true", "false" или "mixed". Нативното HTML квадратче за отметка управлява това автоматично — задавайте атрибута ръчно само при персонализирани уиджети.

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

Върху уиджети, които имат трисъстоянна или бинарна семантика на отметка: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" и role="switch". При употреба на нативния елемент <input type="checkbox"> или <input type="radio"> браузърът вече излага отметнатото състояние на помощните технологии — не го дублирайте с aria-checked.

Разграничение от съседни състояния:

aria-checked — за „тази опция е избрана от набор от възможности, често независимо от останалите”. Квадратчета за отметка и радио бутони.
aria-pressed — за превключващи бутони (заглушаване/включване на звук). Елементът концептуално е бутон; състоянието указва дали действието е активирано.
aria-selected — за елементи в контейнер с единичен избор като tablist, listbox или tree. Състоянието принадлежи на модела за избор на контейнера, не на самия елемент.

Поддържане на синхрон

Допустимите стойности са "true", "false", "mixed" и "undefined". Използвайте "mixed" само върху родителско квадратче за отметка, което обобщава група дъщерни квадратчета в непоследователни състояния (класическият „неопределен” шаблон „избери всички”). "undefined" е рядко срещан на практика; повечето автори използват "false" вместо него.

Атрибутът трябва да отразява това, което потребителят вижда. Всеки манипулатор за кликване и клавиатурен манипулатор, който актуализира визуалния маркер за отметка, трябва да записва и новата стойност на aria-checked в същия код. Никога не задавайте стил „отметнато” чрез CSS, без да смените атрибута.

При role="radio" в рамките на radiogroup точно един вариант трябва да носи aria-checked="true" по всяко време; останалите задължително трябва да са "false" (не отсъстващи).

Чести грешки

Пропускане на aria-checked изцяло върху елемент с role="checkbox" — екранният четец обявява „квадратче за отметка” без никакво състояние.
Превключване на клас, за да се покаже маркерът на отметката, без никога да се актуализира aria-checked.
Употреба на aria-checked="true" върху нативен <input type="checkbox"> — браузърът го игнорира и дублираното състояние може да излезе от синхрон.
Задаване на aria-checked="mixed" на единично квадратче за отметка вместо на родител, обобщаващ дъщерни елементи.
Оставяне на сестрински радио бутони без aria-checked="false" — помощната технология не може да разпознае неотметнатото състояние.
Бъркане на aria-checked с aria-selected върху опции на listbox или табове.

Пример

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Email preferences</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Send me weekly summaries
  </div>
</div>