WCAG 2.5.2 Отмена действия указателем

Критерий успеха 2.5.2 помогает исправить последствия случайных касаний и кликов. Люди с тремором, ограниченной подвижностью рук или слабым зрением, а также все, кто нажимает на маленький экран телефона, часто попадают не туда. Если действие ждёт, пока палец или кнопка мыши будут отпущены, можно увести указатель в сторону и отменить его. Это уровень A, он входит в EN 301 549 (пункт 9.2.5.2). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Для функциональности, которой можно управлять одним указателем, выполняется хотя бы одно условие:

• Нет события нажатия: событие нажатия (down-event) не используется для выполнения какой-либо части функции;
• Прерывание или отмена: функция завершается при отпускании (up-event), и есть способ прервать её до завершения или отменить после;
• Обратное действие при отпускании: отпускание отменяет любой результат предшествующего нажатия (например, нажать и удерживать для предпросмотра, отпустить для закрытия);
• Необходимость: завершение функции при нажатии необходимо.

W3C отмечает, что функции, имитирующие нажатие клавиши клавиатуры или цифровой клавиатуры, считаются необходимыми, а критерий касается действий указателем, которые обрабатывает веб-контент, а не браузер или вспомогательные технологии.

Типичные ошибки в интернет-магазине

• кнопка «В корзину» или «Купить сейчас», которая срабатывает на mousedown, pointerdown или touchstart;
• элемент «Удалить товар» в корзине, который удаляет при нажатии без возможности отмены;
• карточка товара, которая уводит на другую страницу, как только её коснулся палец, хотя пользователь хотел прокрутить;
• меню, которое открывается при нажатии и выбирает пункт ещё до отпускания, так что случайное движение выбирает не тот вариант.

Как проверить

Автоматически: правила axe-core для этого критерия нет. Axe не проверяет, какие события указателя слушает скрипт, поэтому нужна ручная проверка.

Вручную: мышью нажмите и удерживайте кнопку на каждом важном элементе — «В корзину», «Удалить», «Оплатить», пункты меню, — затем уведите указатель с элемента и отпустите. Ничего не должно произойти. То же самое сделайте на сенсорном экране: коснитесь, сдвиньте палец в сторону, отпустите. Если действие происходит при нажатии, проверьте, что его легко отменить.

Как исправить

• Используйте стандартное событие click (или нативные <button> и <a>), которое срабатывает при отпускании.
• Не используйте mousedown, pointerdown и touchstart для действий; применяйте их только для визуальной обратной связи и подобного.
• Для необратимых действий дайте возможность отмены («Товар удалён. Отменить») или запросите подтверждение.
• Проверьте сторонние виджеты и скрипты темы — собственные карусели и меню иногда срабатывают при нажатии.

Связанные критерии

• 2.5.1 Жесты указателем — сложным жестам нужна альтернатива одним указателем.
• 2.5.8 Размер цели (минимальный) — крупные цели уменьшают число случайных касаний.
• 2.5.7 Перетаскивание — для перетаскивания нужна альтернатива одним указателем.

Частые вопросы

Что требует WCAG 2.5.2 «Отмена действия указателем»?

Для действий одним указателем должно выполняться хотя бы одно условие: при нажатии ничего не выполняется; действие завершается при отпускании и его можно прервать или отменить; отпускание отменяет результат нажатия; или завершение при нажатии необходимо.

Достаточно ли использовать событие click?

Обычно да. Стандартное событие click срабатывает при отпускании, и пользователь может отменить действие, уведя указатель с элемента до отпускания. Проблемы возникают из-за обработчиков mousedown, pointerdown или touchstart.

Есть ли исключения из 2.5.2?

Да, когда срабатывание при нажатии необходимо. W3C отмечает, что функции, имитирующие нажатие клавиши клавиатуры или цифровой клавиатуры, например экранная клавиатура, считаются необходимыми.