Разметка
Сверяем тип элемента, атрибуты disabled, вложенность формы, адрес ссылки и доступное название.
Интерактивный элемент
Не работают кнопки на сайте
Воспроизводим сбой, проверяем HTML, CSS, JavaScript и запрос к серверу. Возвращаем кнопке ожидаемое действие на компьютере и телефоне, включая управление с клавиатуры.
Диагностика
Почему нажатие
не даёт результата
У кнопки может быть исправный внешний вид и сломанный сценарий. Мы проверяем сам элемент, его обработчик и действие после нажатия. Замена цвета или z-index помогает только после подтверждения причины.
Перекрытие
Ищем невидимый слой, баннер, меню или псевдоэлемент, который получает клик вместо кнопки.
JavaScript
Проверяем загрузку скриптов, ошибки в консоли, повторное подключение обработчиков и конфликт библиотек.
Запрос
Смотрим, отправляется ли действие на сервер, какой код ответа приходит и как интерфейс обрабатывает отказ.
Состояния
Разделяем обычное состояние, загрузку, успех и ошибку. Защищаем действие от случайного двойного запуска.
Устройства
Проверяем касание, клавиатуру, фокус, адаптивную вёрстку и поведение в актуальных браузерах.
Результат
Пользователь понимает, что произошло
Кнопка доступна
Элемент виден, получает фокус и реагирует на поддерживаемые способы ввода.
Действие выполняется
Форма, переход или запрос запускается один раз и возвращает понятный статус.
Ошибка заметна
Интерфейс не зависает молча, если сервер или внешний сервис недоступен.
Контрольный сценарий
Проверяем кнопку от фокуса до результата
Рекомендации W3C по доступности с клавиатуры требуют, чтобы пользователь мог выполнить действие без мыши. После ремонта проверяем клик, фокус, Enter, Space и логичный переход к результату.
До нажатия
Текст объясняет действие, а активное и недоступное состояния различаются.
Во время запроса
Пользователь видит загрузку и не запускает операцию повторно.
После успеха
Открывается нужная страница, окно или подтверждение, а цель аналитики фиксируется один раз.
При ошибке
Сообщение помогает продолжить работу и не раскрывает технические детали сервера.
Границы работ
Что потребуется для точной проверки
Достаточно адреса страницы, устройства и последовательности действий. Если кнопка обращается к CRM, платёжному сервису или закрытому API, потребуется тестовый доступ к соответствующему контуру. Мы не нажимаем боевые кнопки оплаты, удаления или публикации без отдельного согласования. Исправление стороннего виджета может потребовать обращения к его разработчику, если ошибка находится внутри внешнего кода.
Интерактивный элемент
Кнопка должна завершать действие
Внешне исправная кнопка может быть перекрыта другим слоем, потерять обработчик после AJAX-обновления или отправлять запрос без обратной связи. Проверяем не цвет элемента, а весь сценарий после нажатия.
Доступность клика
Смотрим z-index, pointer-events, прозрачные слои и состояние disabled. На телефоне проверяем размер цели, прокрутку, фиксированные панели и реакцию на касание.
Обработчик
Ищем ошибку JavaScript, повторную подписку и элементы, добавленные после загрузки. Кнопка формы должна иметь корректный type и не вызывать лишнюю отправку.
Сетевой запрос
Сверяем URL, метод, данные, CSRF-токен и ответ API. Ошибки 4xx и 5xx показываем пользователю понятным сообщением, сохраняя введённые данные.
Повторное нажатие
На время запроса блокируем повторную операцию и показываем состояние загрузки. Двойной клик не должен создавать две заявки, оплаты или записи.
Приёмка
Мышь, клавиатура и сенсорный экран
После ремонта проходим действие с клавиатуры и телефона. Проверяем фокус, Enter и Space, видимое состояние ожидания, успех и отказ сервера. Для внешней ссылки контролируем адрес и безопасное открытие. Для аналитики событие отправляется один раз после фактического действия, а не при любом клике по области.
После восстановления
Защищаем действие от повторного сбоя
Добавляем автоматическую проверку ключевых кнопок в сценарий приёмки релиза: открыть форму, отправить тестовые данные, получить ответ и увидеть подтверждение. Простая проверка наличия элемента не обнаружит сломанный API.
События аналитики именуем по результату, например успешная заявка, а не клик по кнопке. Так отчёт не показывает конверсию, когда сервер отклонил форму. После изменения модального окна повторяем клавиатурную проверку и тест на мобильном экране.
Разные типы кнопок
У каждого действия свой критерий успеха
Переход по ссылке, открытие окна, отправка формы и запуск оплаты требуют разных проверок. Мы связываем кнопку с результатом, который должен увидеть посетитель и получить сервер.
Ссылка и модальное окно
Проверяем адрес, якорь, историю браузера, фокус после открытия и закрытие по Escape. Скрытое окно не должно оставаться поверх страницы и блокировать клики.
Форма
Невалидные поля получают понятную подсказку, а введённые данные сохраняются после ответа сервера. Успешная отправка меняет состояние один раз.
Опасное действие
Удаление и отмена требуют подтверждения и защиты на сервере. Один запрос должен соответствовать одному действию, даже если сеть повторила отправку.
Для диагностики укажите страницу, подпись кнопки, устройство и ожидаемый результат. Видео короткого воспроизведения полезнее общего скриншота. Мы не навешиваем обработчик на весь контейнер, если внутри есть другие ссылки: такая правка ухудшает клавиатурную навигацию и аналитику.
Вопросы
Перед исправлением
Почему кнопка не нажимается?
Чаще всего клик перехватывает другой элемент, скрипт завершается ошибкой или кнопка ждёт незагруженные данные.
Почему ошибка только на телефоне?
Проверяем мобильное перекрытие, touch-события, размер активной области и консоль браузера.
Нужно переделывать весь сайт?
Нет, если причина локальная. Сначала определяем зависимость, затем вносим ограниченное исправление.
Как проверяется результат?
Тестируем мышь, касание, клавиатуру, загрузку, ошибку, повторное нажатие и связанное действие.
Первый шаг
Покажите неработающую кнопку
Пришлите URL, устройство и действие, которое должно происходить после нажатия. Если ошибка появляется не всегда, опишите шаги до неё.