WCAG 2.5.2 Скасування дій курсором

Критерій успіху 2.5.2 полегшує виправлення випадкових дотиків і кліків. Люди з тремором, обмеженою спритністю рук чи слабким зором і всі, хто торкається маленького екрана телефона, часто натискають не те. Якщо дія чекає, доки палець чи кнопку миші відпустять, можна відвести вказівник і скасувати її. Це рівень A, і він входить до EN 301 549 (пункт 9.2.5.2; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Для функціональності, якою можна керувати одним вказівником, має виконуватися щонайменше одна умова:

• Без down-event: натискання (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 «Скасування дій курсором»?

Для дій одним вказівником має виконуватися щонайменше одна умова: при натисканні (down-event) нічого не виконується; дія завершується при відпусканні (up-event) і її можна перервати або скасувати; відпускання скасовує результат натискання; або завершення при натисканні є необхідним.

Чи достатньо використовувати подію click?

Зазвичай так. Стандартна подія click спрацьовує при відпусканні, і користувачі можуть скасувати дію, відвівши вказівник з елемента, перш ніж відпустити. Проблеми виникають через обробники mousedown, pointerdown чи touchstart.

Чи є винятки з 2.5.2?

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