WCAG 2.5.7 Рухи перетягування

Критерій успіху 2.5.7 новий у WCAG 2.2 (в оригіналі — Dragging Movements). Він допомагає людям, які не можуть натиснути й утримувати, рухаючи вказівник: людям із тремором чи обмеженою спритністю рук і тим, хто користується трекболом, головним вказівником, системою керування поглядом чи голосовим керуванням. Це рівень AA, і він входить до EN 301 549 (пункт 9.2.5.7; в Україні — ДСТУ EN 301 549:2022).

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

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

• Рух перетягування починається з натискання на елемент, триває рухом вказівника з утриманням і закінчується відпусканням.
• Альтернатива одним вказівником — це клік, дотик чи довге натискання, наприклад дотик у потрібному місці чи дотики до кнопок «вгору» і «вниз».
• Критерій стосується дій вказівником, які інтерпретує вебвміст, а не перетягування, що керує браузером чи допоміжними технологіями.

Приклади W3C: повзунок, де дотик до доріжки пересуває повзунок, сортований список, де елемент можна перемістити кнопками, і мапа з кнопками-стрілками для прокручування.

Типові помилки в інтернет-магазині

• фільтр діапазону цін із двома повзунками, які можна лише перетягувати;
• повзунок порівняння «до/після» на зображенні, що працює лише перетягуванням роздільника;
• списки обраного, подарункові списки чи набори товарів, порядок у яких можна змінити лише перетягуванням;
• завантажувач зображень (для друку на замовлення чи відгуків), що приймає файли лише перетягуванням у зону;
• мапа пошуку магазинів, яка прокручується лише перетягуванням.

Як перевірити

Автоматично: для цього критерію немає правила axe-core. Чи має дія перетягування альтернативу без перетягування, залежить від поведінки скриптів, тож потрібна ручна перевірка.

Вручну: складіть список усіх елементів, які можна перетягувати: повзунки, каруселі, мапи, сортовані списки, зони для перетягування, інструменти обрізання. Для кожної функції спробуйте досягти того самого результату лише окремими кліками чи дотиками, ніколи не утримуючи кнопку під час руху. Якщо не вдається, це порушення.

Як виправити

• Зробіть доріжки повзунків клікабельними й додайте числові поля чи кнопки +/− поруч із фільтрами діапазону.
• Додайте до сортованих списків кнопки «Перемістити вгору» / «Перемістити вниз» або меню вибору позиції.
• Завжди доповнюйте зону для перетягування кнопкою «Вибрати файл» (нативним <input type="file">).
• Додайте до мап кнопки-стрілки й елементи масштабування.
• Для повзунків «до/після» додайте кнопки чи перемикач для зміни подання.

Пов'язані критерії

• 2.5.1 Керування жестами — багатоточкові й траєкторні жести потребують альтернатив.
• 2.5.8 Розмір активних елементів (мінімальні вимоги) — кнопки-альтернативи мають бути достатньо великими.
• 2.1.1 Клавіатура — ті самі функції мають працювати з клавіатури.

Часті запитання

Чи порушує повзунок діапазону цін WCAG 2.5.7?

Лише якщо повзунки можна рухати тільки перетягуванням. Якщо користувач може клацнути чи торкнутися доріжки, щоб пересунути повзунок, або є кнопки плюс і мінус чи числові поля, це дає альтернативу одним вказівником, якої вимагає 2.5.7.

Чи достатньо підтримки клавіатури для 2.5.7?

Ні. Керування з клавіатури регулює 2.1.1; 2.5.7 вимагає способу, що працює одним вказівником, як-от кліками чи дотиками, без перетягування.

Чим 2.5.7 відрізняється від 2.5.1?

2.5.1 «Керування жестами» охоплює багатоточкові й траєкторні жести, де важить шлях. 2.5.7 охоплює перетягування, де важать лише початкова й кінцева точки, як-от переміщення повзунка чи елемента списку.