Роля Контрола

`checkbox`

Маркира елемент като квадратче за отметка с две или три състояния. Препоръчва се използването на <input type="checkbox"> на първо място; към role="checkbox" се прибягва само когато не е възможно използването на нативния елемент — например за контрола с три състояния със смесена стойност.

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

Използвайте <input type="checkbox">. Нативният елемент осигурява фокус, активиране с клавиша Space, псевдокласа :checked, изпращане на формуляра и свойството indeterminate в JavaScript за три състояния. role="checkbox" е подходящ в два случая:

Необходимо е квадратче за отметка с три състояния, обявено като aria-checked="mixed" (например „Избери всички”, което отразява състоянието на дъщерните елементи).
Дизайн системата доставя потребителски компонент за квадратче за отметка, който не може да бъде заменен.

Ако role="checkbox" се прилага към ненативен елемент, задължително трябва да се зададе aria-checked (атрибутът е задължителен), да се управлява tabindex="0" и да се обработва събитието keydown за Space.

Договор за клавиатура и фокус

Съгласно шаблона APG за квадратче за отметка:

Tab премества фокуса върху квадратчето за отметка.
Space превключва aria-checked между "true" и "false" (и "mixed" при три състояния).
Enter НЕ активира квадратчето за отметка — само Space. (Нативните елементи input също игнорират Enter в повечето браузъри.)

Фокусът остава върху квадратчето за отметка след активирането.

Чести грешки

role="checkbox" без зададен атрибут aria-checked. Състоянието е задължително от момента, в който елементът е в DOM.
Използване на aria-checked="true" само като кука за клас — визуалното состояние се превключва, но атрибутът не се актуализира при щракване.
Потребителски квадратчета за отметка, които реагират на щракване, но не и на Space.
Обвиване на нативен <input> в <div role="checkbox"> — дублираната семантика обърква екранните четци.
Контроли с три състояния, при които Space преминава циклично през false → true → mixed → false. APG указва false → true → false; mixed се задава програматично от страницата, а не от потребителя.

Пример

<!-- Препоръчан вариант -->
<label>
  <input type="checkbox" name="terms" required>
  I agree to the terms
</label>

<!-- Потребителско „Избери всички" с три състояния -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="mixed"
  aria-labelledby="selectAllLabel"
>
</div>
<span id="selectAllLabel">Select all rows</span>