checkbox

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>, он услышит его название.

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