Состояния компонентов¶
По состоянию компонента видно, что с ним происходит сейчас и что с ним можно сделать. Если в макете нарисовано только состояние по умолчанию, остальные за дизайнера придумает разработчик или браузер, и угадать результат заранее не получится.
Базовый набор¶
| Состояние | Что сообщает | Требования и примечания |
|---|---|---|
| Default | Элемент доступен для взаимодействия | Граница или фон интерактивного элемента контрастны соседнему цвету не менее 3:1 (1.4.11 Non-text Contrast, AA), если без них элемент не опознаётся |
| Hover | Указатель над элементом; действие будет применено к нему | Не существует на сенсорных экранах, поэтому не может быть единственным способом показать, что элемент интерактивен или что у него есть подсказка |
| Focus | Элемент получит ввод с клавиатуры | Индикатор фокуса видим (2.4.7 Focus Visible, AA) и не перекрыт липкими панелями (2.4.11 Focus Not Obscured (Minimum), AA); в CSS используют :focus-visible, чтобы не показывать кольцо при клике мышью |
| Active (pressed) | Элемент нажат в данный момент | Длится долю секунды, но подтверждает, что нажатие зарегистрировано; особенно важно на сенсорных экранах, где нет hover |
| Disabled | Элемент сейчас недоступен | Освобождён от требований к контрасту (исключение в 1.4.3), но должен оставаться различимым; причина недоступности объясняется рядом или в подсказке |
| Loading | Действие выполняется | Повторное нажатие блокируется; ширина кнопки не меняется при замене текста на индикатор, чтобы не сдвигать раскладку |
| Selected / checked | Элемент выбран или включён | Передаётся не только цветом и программно отражается через aria-selected, aria-checked или aria-pressed |
| Error (invalid) | Значение не прошло проверку | Сопровождается текстом ошибки и aria-invalid="true"; цвет рамки дублируется значком или текстом (1.4.1 Use of Color, A) |
| Read-only | Значение видно, но не изменяется | В отличие от disabled, остаётся в последовательности переключения фокуса и доступно для выделения и копирования |
Disabled или скрытый, disabled или aria-disabled¶
Недоступная кнопка без объяснения - частая причина того, что пользователь застревает: он видит действие, понимает, что оно ему нужно, но не знает, чего не хватает. Поэтому вместе с недоступным состоянием показывают причину («Заполните обязательные поля», «Нужны права редактора»), а в формах нередко лучше оставить кнопку отправки активной и при нажатии показать, что именно нужно исправить. Решение зависит от длины формы: в короткой форме причина очевидна, в длинной её проще показать сводкой ошибок.
Технически атрибут disabled убирает элемент из порядка табуляции, и пользователь клавиатуры или экранного диктора может вообще не узнать о его существовании и о подсказке рядом. Атрибут aria-disabled="true" сохраняет элемент фокусируемым и озвучиваемым, но требует вручную блокировать срабатывание. Для кнопок, причину недоступности которых нужно объяснить, лучше выбрать второй вариант.
Комбинации состояний¶
Состояния комбинируются: элемент может быть одновременно выбранным и в фокусе, ошибочным и при наведении. Каждую значимую комбинацию стоит проверить на макете, поскольку именно в них сигналы часто конфликтуют, например кольцо фокуса сливается с рамкой ошибки того же цвета. Удобный приём - таблица состояний в документации компонента, где по строкам перечислены состояния, а по столбцам - варианты компонента, и каждая клетка отрисована.