checkbox

Роль, которая превращает элемент в чекбокс.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

ARIA-роль виджета для чекбокса.

Эта роль есть у <input type="checkbox"> по умолчанию.

Пример

Секция статьи "Пример"
        
          
          <div  role="checkbox"  tabindex="0"  aria-checked="false"  aria-labelledby="checkbox-name"></div><label id="checkbox-name">Выбери меня</label>
          <div
  role="checkbox"
  tabindex="0"
  aria-checked="false"
  aria-labelledby="checkbox-name">
</div>
<label id="checkbox-name">Выбери меня</label>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу role="checkbox". Лучше, чтобы это были семантически нейтральные теги вроде <div> и <span>.

Атрибут нужен, когда нет возможности использовать возможности HTML. Например, когда это нужно для кастомного элемента. В этом случае скринридер объявит элемент как «чекбокс», без этой роли элемент будет обычным контейнером.

У элементов с role="checkbox" обязательно должен быть атрибут aria-checked.

aria-checked указывает на текущее состояние чекбокса:

  • false — чекбокс не выбран.
  • true — чекбокс выбран.
  • mixed — несколько чекбоксов выбрано, а какие-то не выбраны.

Чтобы элемент с ролью checkbox получал фокус и к нему можно было переместиться с помощью клавиши Tab, используйте tabindex="0".

Ещё полезно использовать aria-labelledby. Этот атрибут связывает кастомный чекбокс и подпись к нему с помощью одинакового ID. Когда пользователь сделает фокус на <div>, он услышит его название.

Как понять

Секция статьи "Как понять"

Чекбокс или флажок — это элемент формы, который позволяет пользователю отметить один или несколько вариантов.