--- title: 'ARIA: checkbox role' slug: Web/Accessibility/ARIA/Roles/checkbox_role translation_of: Web/Accessibility/ARIA/Roles/checkbox_role ---

\{{ariaref}}

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 при активации чекбокса.

Связанные WAI-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;
    }
}

{{EmbedLiveSample("Examples", 230, 250)}}

Проблемы доступности

Когда checkbox роль добавлена к элементу, юзер агент должен сделать следующее:

Продукты, использующие ассистивные технологии должны сделать следующее:

Замечание: Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведённая выше, также одно из таких мнений, и не является нормативом.

Лучшие практики

Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный HTML checkbox  вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.

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