radio

Самостоятельная роль виджета из WAI-ARIA для радиокнопки.

В HTML эта роль есть у <input type="radio"> по умолчанию.

Задайте role="radio" любому тегу, лучше <div> или <span>.

Если решили делать кастомный элемент, не забудьте добавить его в порядок фокуса с помощью tabindex, когда задаёте роль radio статическому элементу, с которым нельзя взаимодействовать.

Также обязательно укажите для кастомной радиокнопки состояние aria-checked со значением true, когда элемент выбран. Если элемент не выбран, значение должно быть false. Только у одной радиокнопки из группы может быть aria-checked="true". Чтобы всё работало правильно понадобится JavaScript.

Для элемента с ролью radio можно также задавать aria-posinset, aria-setsize и все глобальные ARIA-атрибуты.

Радиокнопки могут располагаться на странице одни или в группе. Если это группа кастомных радиокнопок, разместите их рядом или внутри элемента с ролью radiogroup.