ARIA: checkbox role
checkbox role используется для переключаемых интерактивных элементов управления. Элементы, содержащие role="checkbox"
также должны включать aria-checked
атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.
<span
role="checkbox"
aria-checked="false"
tabindex="0"
aria-labelledby="chk1-label">
</span>
<label id="chk1-label">Remember my preferences</label>
Первое правило ARIA - если у нативного HTML-элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать HTML checkbox <input type="checkbox">
, который изначально предоставляет необходимый функционал:
<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Запомнить мои предпочтения</label>
Описание
Нативный HTML checkbox элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с неопределённым состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с role="checkbox"
может находиться в трёх состояниях, обозначенных через aria-checked
атрибут: true
, false
, or mixed
.
Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут tabindex
. Ожидаемый способ активации чекбокса при помощи клавиатуры - Пробел .
Разработчику необходимо динамически изменять значение атрибута aria-checked
при активации чекбокса.
Связанные ARIA-роли, ARIA-состояния и ARIA-свойства
- aria-checked
-
Значение
aria-checked
определяет состояние чекбокса. Этот атрибут может принимать одно из трёх значений:true
Чекбокс отмеченfalse
Чекбокс не отмеченmixed
Чекбокс частично отмечен, или в неопределённом состоянии - tabindex="0"
-
Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.
Взаимодействие с клавиатурой
Клавиша | Функция |
---|---|
Пробел | Активирует чекбокс |
Необходимый JavaScript
Необходимый обработчики событий
- onclick
-
Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута
aria-checked
и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя. - onKeyPress
-
Обрабатывает случай, когда пользователь нажимает
Пробел
для смены состояния чекбокса путём изменения значения атрибута
aria-checked
и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.
Примеры
Пример ниже создаёт простой чекбокс, используя CSS и JavaScript для обработки отмеченного и неотмеченного состояний элемента.
HTML
<span
role="checkbox"
id="chkPref"
aria-checked="false"
onclick="changeCheckbox()"
onKeyPress="changeCheckbox()"
tabindex="0"
aria-labelledby="chk1-label"></span>
<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
>Запомнить мои предпочтения</label
>
CSS
[role="checkbox"] {
padding: 5px;
}
[aria-checked="true"]::before {
content: "[x]";
}
[aria-checked="false"]::before {
content: "[ ]";
}
JavaScript
function changeCheckbox(event) {
let item = document.getElementById("chkPref");
switch (item.getAttribute("aria-checked")) {
case "true":
item.setAttribute("aria-checked", "false");
break;
case "false":
item.setAttribute("aria-checked", "true");
break;
}
}
Проблемы доступности
Когда checkbox
роль добавлена к элементу, юзер агент должен сделать следующее:
- Показать элемент как элемент с функциями чекбокса для API доступности.
- Когда значение aria-checked меняется, отправить доступное событие изменения состояния.
Продукты, использующие ассистивные технологии должны сделать следующее:
- Программы чтения с экрана должны объявить элемент как чекбокс и при необходимости предоставить инструкции о том, как его активировать.
Примечание: Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведённая выше, также одно из таких мнений, и не является нормативом.
Лучшие практики
Первое правило ARIA - если у нативного HTML-элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный HTML checkbox вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.