slowdev

Кнопка, которая врёт

Есть тип интерфейсов, который выглядит честно и ведёт себя подло: кнопка «Отправить», которая сначала активна, а после нажатия становится серой. Пользователь думает, что нажал, а на самом деле ничего не произошло.

С disabled есть известная неприятность: элемент выпадает из порядка табуляции и перестаёт получать фокус. Человек, который ходит по форме с клавиатуры, внезапно теряет место, где находился. Скринридер тоже перестаёт сообщать о кнопке — она просто исчезает из дерева доступности.

Второй вариант — оставить кнопку активной, но при нажатии показать, чего не хватает. Тогда фокус остаётся на месте, а ошибка появляется рядом с полем, а не где-то вверху формы.

  • disabled уместен, пока форма ещё не отправилась ни разу.
  • aria-disabled плюс проверка при нажатии — когда нужно сохранить фокус.
  • Текст ошибки должен стоять рядом с полем, а не в углу экрана.

Самое дешёвое улучшение, которое я сделал за последний месяц: перестал прятать кнопку. Она всегда на месте, меняется только поведение. Стало меньше писем в поддержку из серии «нажал, а оно не отправилось».