WCAG 2.5.7 Перетаскивание

Критерий успеха 2.5.7 появился в WCAG 2.2. Он помогает людям, которые не могут удерживать нажатие, одновременно двигая указатель: людям с тремором или ограниченной подвижностью рук, а также тем, кто пользуется трекболом, указкой на голове, системой управления взглядом или голосовым управлением. Это уровень 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 охватывает перетаскивание, где важны только начальная и конечная точки, например перемещение ползунка или элемента списка.