Подписи
У каждой радиокнопки должен быть видимый текст подписи, который ясно описывает вариант. Обычно подпись оборачивает и контрол, и текст, чтобы кликабельной была вся строка.
Поведение клавиатуры
ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
| Клавиша | Действие |
|---|---|
| ↓→ | Переносит фокус на следующую доступную радиокнопку с тем же name и отмечает её. Это нативное поведение радиокнопок: Chromium и Firefox с последней переходят на первую, а в RTL по → переносят на предыдущую; Safari не делает ни того, ни другого. |
| ↑← | Переносит фокус на предыдущую доступную радиокнопку с тем же name и отмечает её. Chromium и Firefox с первой переходят на последнюю, а в RTL по ← переносят на следующую; Safari не делает ни того, ни другого. |
| Space | Отмечает радиокнопку в фокусе, если она ещё не отмечена. |
- У радиокнопок одной группы должен быть общий
name.
Поведение фокуса
- Фокус должен попадать на сам input радиокнопки.
- Видимый стиль фокуса должен оставаться заметным даже в плотных раскладках и оверлеях.
Семантика для скринридеров
- Подпись варианта должна быть явной и относиться к конкретной радиокнопке.
- Смысл группы должен приходить из подписи окружающего поля или структуры fieldset.
- Общий
name— не видимая подпись, а лишь часть нативной группировки.
Семантика формы
- Радиокнопки — нативные контролы формы и напрямую участвуют в её отправке.
- Валидацию обязательного выбора нужно выражать на уровне группы, а не только на одном элементе.
Риски доступности
- Радиокнопки без понятной подписи группы.
- Крошечные изолированные области клика с отделённым видимым текстом.
- Радиокнопки используются там, где элементы можно выбирать независимо.