WCAG 2.5.8 Размер цели (минимальный)

Критерий успеха 2.5.8 появился в WCAG 2.2. Он помогает попадать по кнопкам и ссылкам людям с тремором или ограниченной подвижностью рук, тем, кто пользуется указкой на голове или палочкой во рту, и всем, кто держит телефон одной рукой. Маленькие цели, расположенные вплотную, приводят к неверным касаниям — не тот размер, не тот цвет, «Удалить» вместо «+1». Это уровень AA, он входит в EN 301 549 (пункт 9.2.5.8). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Размер цели для ввода указателем — не менее 24 на 24 CSS-пикселя, кроме случаев:

• Отступ: маленькие цели расположены так, что если на центр ограничивающей рамки каждой поместить круг диаметром 24 CSS-пикселя, круги не пересекают другую цель или круг другой маленькой цели;
• Равноценный элемент: ту же функцию можно выполнить через другой элемент на той же странице, который соответствует критерию;
• Строчный элемент: цель находится внутри предложения или её размер иначе ограничен высотой строки окружающего текста;
• Элемент браузера: размер определяется браузером и не изменён автором;
• Необходимость: определённое представление цели необходимо или требуется законом для передаваемой информации.

Цели, в которых значение выбирается позицией внутри них (например, дорожка слайдера), считаются одной целью. Цель — это кликабельная область, а не только видимая иконка. Уровень AAA (2.5.5) требует 44 × 44 CSS-пикселя.

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

• образцы цветов размером 16–20 px, расположенные вплотную друг к другу;
• кнопки количества «−» и «+» размером около 20 px рядом с числовым полем;
• маленький «×» для удаления товара из мини-корзины или закрытия всплывающего окна;
• плотно расположенные иконки соцсетей и платёжных систем в подвале;
• ссылки пагинации («1 2 3 …») с маленькими отступами;
• точки карусели в несколько пикселей без промежутков.

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

Автоматически: наша проверка измеряет размер и отступы кликабельных целей и отмечает те, что меньше 24 × 24 CSS-пикселя и при этом не проходят проверку отступов (правило размера цели). Исключения для равноценных элементов, ссылок в тексте или необходимого представления она не всегда может оценить, поэтому отмеченные цели просмотрите вручную.

Вручную: измерьте маленькие элементы — образцы цветов, кнопки количества, кнопки закрытия, иконки — в инструментах разработчика браузера. Если элемент меньше 24 × 24, проверьте отступ, мысленно поместив на его центр круг 24 px. Откройте страницу на реальном телефоне и понажимайте маленькие элементы большим пальцем.

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

• Задайте кнопкам-иконкам минимальный размер: min-width: 24px; min-height: 24px (для касания лучше 44 px).
• Увеличивайте внутренние отступы, а не саму иконку, — значение имеет кликабельная область.
• Добавьте промежутки между соседними маленькими целями, например образцами цветов и ссылками пагинации.
• Увеличьте точки карусели или замените их кнопками «назад/вперёд».

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

• 2.5.2 Отмена действия указателем — случайные касания должно быть можно отменить.
• 2.5.7 Перетаскивание — для перетаскивания нужна альтернатива одним указателем.
• Чек-лист WCAG 2.2 — что ещё нового в WCAG 2.2.

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

Какой минимальный размер цели в WCAG 2.2?

Не менее 24 на 24 CSS-пикселя для целей ввода указателем на уровне AA (2.5.8). Уровень AAA (2.5.5 «Размер цели (повышенный)») требует 44 на 44 CSS-пикселя.

Может ли кнопка быть меньше 24 px?

Да, если у неё достаточный отступ: круг диаметром 24 px с центром на ней не должен пересекать другую цель или круг другой маленькой цели. Другие исключения: равноценный более крупный элемент на странице, ссылки внутри текста, неизменённые элементы браузера и необходимое или требуемое законом представление.

Должны ли текстовые ссылки в абзаце быть 24 px?

Нет. Цели внутри предложения или такие, чей размер ограничен высотой строки окружающего текста, освобождены по исключению для строчных элементов.

Цель — это видимая иконка или кликабельная область?

Кликабельная область. Иконка 16 px внутри кнопки 24 × 24 px с внутренними отступами выполняет требование к размеру.