WCAG 2.5.8 Розмір активних елементів (мінімальні вимоги)

Критерій успіху 2.5.8 новий у WCAG 2.2 (в оригіналі — Target Size (Minimum), тобто розмір цілі). Він полегшує влучання в кнопки й посилання людям із тремором чи обмеженою спритністю рук, тим, хто користується головним вказівником чи паличкою в роті, і всім, хто тримає телефон однією рукою. Малі цілі, розташовані впритул, призводять до хибних дотиків — не той розмір, не той колір, «Видалити» замість «+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-пікселі й водночас не проходять перевірку відступу (правило target size). Він не завжди може оцінити винятки для рівнозначних елементів керування, вбудованих посилань чи необхідного подання, тож перегляньте позначені цілі вручну.

Вручну: скористайтеся інструментами розробника в браузері, щоб виміряти малі елементи керування — зразки кольорів, перемикачі кількості, кнопки закриття, іконки. Якщо котрийсь менший за 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 із внутрішніми відступами виконує вимогу щодо розміру.