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

<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

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

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