Размер на интерактивната зона

Размерът на интерактивната зона е действителното измерение на всеки елемент, върху който потребителят може да докосне или кликне. WCAG установява два прага: AAA минимум от 44×44 CSS пиксела (от WCAG 2.1) и AA минимум от 24×24 CSS пиксела (ново в WCAG 2.2). Критерият съществува, тъй като двигателните увреждания — а дори и обичайната неточност при работа с малък екран — правят малките интерактивни зони неизползваеми.

Двата критерия на WCAG

• 2.5.5 Размер на целта (подобрен) — Ниво AAA — целите за указващо устройство трябва да бъдат поне 44×44 CSS пиксела. Отдавнашно правило; трудно приложимо за целия сайт.
• 2.5.8 Размер на целта (минимален) — Ниво AA, ново в WCAG 2.2 — целите за указващо устройство трябва да бъдат поне 24×24 CSS пиксела. Практическият минимум за съответствие.

Целта, отговаряща на прага от 44×44 (AAA), автоматично отговаря и на прага от 24×24 (AA).

Какво изисква правилото на практика

Числата се отнасят до зоната на целта, а не само до видимата икона. Насоките за потребителски интерфейс на Apple (Human Interface Guidelines) и Material Design на Google по подразбиране задават размер на целта от 44pt / 48dp по същата причина — зад тях стоят реални ергономични данни.

Честа практика: бутон само с икона, начертан като SVG 16×16, но с допълнителен отстъп, довеждащ кликаемата зона до 44×44. Това отговаря на изискването. Видимата икона е малка; целта представлява видимата икона плюс отстъпа около нея.

Изключения

Критерият 2.5.8 (AA) има изрично предвидени изключения:

• Изключение въз основа на разстояние. Ако дадена цел е поне 24×24 или е заобиколена от достатъчно бяло пространство, така че никоя друга цел не се намира в рамките на 24 CSS пиксела, тя отговаря на изискването. Това защитава плътните вградени оформления (например текстови препратки в основен текст), които имат малки зони, но са наредени достатъчно далеч една от друга, за да не се допуска случайно докосване на съседна цел.
• Еквивалентна функция другаде. Малка цел е допустима, ако същата функция е достъпна чрез друга, по-голяма контрола на същата страница.
• Вградени цели. Препратките в течащ текст са изключени — основният текст не следва да се преформатира спрямо правило от 24 пиксела за всяка препратка.
• Управлявани от браузъра. Браузърните стандартни контроли са изключени.
• Съществено изискване. Когато размерът е от съществено значение за функцията (например CAPTCHA мрежа).

Какво засяга на практика

Три чести проблема в производствена среда:

• Бутони само с икона с размер 28×28 пиксела за навигация. Не отговарят на 2.5.8, освен ако не са заобиколени от достатъчно бяло пространство — рядко срещано в плътните ленти за навигация.
• Плътно наредени списъци с отметки. Отметки 16×16 без отстъп, наредени вертикално без разредка. И зоната, и разстоянието не отговарят на изискването.
• Стрелки „предишен/следващ” в мобилни въртележки. Често изчертани като шеврони от 32 пиксела с 4 пиксела отстъп. Не отговарят на 2.5.8.

Най-бързият ръчен одит

Отваря се DevTools на произволна мобилна емулация. Инспектира се всеки интерактивен елемент. Записва се ограничаващото поле. Всеки елемент с по-малко от 24 CSS пиксела в някое от измеренията, при съседни цели в рамките на 24 CSS пиксела, не отговаря на 2.5.8.

Повечето екипи въвеждат токен за размер на целта за всички компоненти — всеки интерактивен елемент получава поне 44×44 зона независимо от видимия размер. Това е най-евтиният начин да се превърне правилото в нерелевантен въпрос.