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