Отключённое состояние

Отключённое состояние задаёт атрибут disabled у кнопки, поля ввода, списка, textarea, option или целой группы полей. Браузер меняет поведение элемента сразу в нескольких отношениях, и не все из них очевидны. Способы перевести элемент в это состояние и сценарии, когда это уместно, разобраны отдельно на странице «Отключить».

Что меняется в поведении

• Клики и нажатия не вызывают действий, обработчики click на самой кнопке не срабатывают.
• Элемент выпадает из порядка перехода по Tab и не получает фокус.
• Значение поля не передаётся при отправке формы и не попадает в FormData.
• Экранные дикторы объявляют элемент как недоступный.
• Встроенная проверка required и других ограничений к нему не применяется.

Отключённое или только для чтения

Атрибут readonly часто путают с disabled. Поле «только для чтения» нельзя редактировать, но его можно выделить и скопировать, на него можно перейти с клавиатуры, и его значение отправляется на сервер. Поэтому номер заказа или рассчитанную сумму, которые должны дойти до обработчика, делают readonly, а не disabled. Стоит помнить, что оба атрибута защищают только интерфейс: пользователь может изменить значение в DevTools, поэтому сервер всё равно проверяет данные сам.

Оформление

button:disabled,
input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* aria-disabled не даёт :disabled — стилизуем по атрибуту */
[aria-disabled="true"] { opacity: .55; }

Для стилизации есть псевдоклассы :disabled и :enabled. Браузерные стили по умолчанию у разных систем отличаются, поэтому вид отключённых кнопок обычно задают явно.

Требования к контрасту текста в WCAG не распространяются на неактивные элементы, но слишком бледная кнопка выглядит как ошибка вёрстки. Хорошая практика — сочетать приглушённый цвет с подписью, объясняющей причину. Если элемент должен оставаться доступным для фокуса, например чтобы показать подсказку «Сначала выберите размер», вместо disabled используют aria-disabled="true" и блокируют действие скриптом. Противоположное состояние — включённое, оно действует по умолчанию.