ARIA: checkbox role

checkbox role используется для переключаемых интерактивных элементов управления. Элементы, содержащие role="checkbox" также должны включать aria-checked атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.

html

<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 (en-US) <input type="checkbox"> (en-US), который изначально предоставляет необходимый функционал:

html

<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Запомнить мои предпочтения</label>

Описание

Нативный HTML checkbox (en-US) элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с неопределённым (en-US) состоянием, устанавливаемым с помощью 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

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

css

[role="checkbox"] {
  padding: 5px;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}

JavaScript

js

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 (en-US) вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.

Смотрите также