Стандарти · WCAG 2.2

SC 2.5.8 Ниво AA WCAG 2.2 Ново в 2.2

Размер на целта (минимум)

Интерактивните цели — бутони, връзки, контроли на формуляри — трябва да са поне 24×24 CSS пиксела, освен ако на същата страница съществува еквивалентна цел с достатъчен размер или ако целта е в изречение. Ново в WCAG 2.2.

Какво изисква

Всяка интерактивна контрола на страницата трябва да заема зона за взаимодействие от поне 24×24 CSS пиксела — или да има достатъчно разстояние около нея, така че окръжност с диаметър 24 пиксела, центрирана върху целта, да не пресича друга цел. Намерението е да се предотврати пропускането на целта и задействането на грешно действие от потребители с ограничен фин моторен контрол, тремор или при използване на сензорен екран в движение.

WCAG 2.2 поставя минимума на 24×24 пиксела; съществуващото ниво AAA на критерий 2.5.5 запазва по-амбициозната цел от 44×44 пиксела.

Как да се изпълни

  • Задайте min-width / min-height от 24 пиксела на бутони само с икони, бутони за затваряне и всяка цел за докосване, по-малка от типичен бутон.
  • За вградени връзки в параграфи сте освободени — критерият изрично позволява цели „в изречение”.
  • За редове с икони (бутони в лентата с инструменти, действия в редове на таблица) използвайте отстъп, за да разширите зоната за взаимодействие до 24×24 пиксела, дори когато глифът на иконата е по-малък.
  • За контроли, които трябва да останат визуално малки (малко „x” на чип), добавете буфер от разстояние/отстъп, така че съседните цели да са на поне 24 пиксела от центъра до центъра.
  • Проверете на пагинация, навигационни трохи, действия в редове на таблица и икони в ленти с инструменти — там грешките се концентрират.

Чести грешки

  • Бутони с икони 16×16 пиксела (затваряне, редактиране, изтриване) без отстъп, особено в таблици и ленти с инструменти.
  • Тесни редове на пагинация, където Предишна / 1 / 2 / 3 / Следваща са в кутии от 18 пиксела, наредени плътно едно до друго.
  • Персонализирани квадратчета за отметка / бутони за избор, оформени по-малко от родния контрол поради „минималистични” причини.
  • Плаващи бутони за действие на мобилни устройства, надвишаващи 24×24 пиксела, но позиционирани прекалено близо до други цели за докосване.
  • Бутони „×” за премахване на тагове с размер 10–14 пиксела — изключително разпространени в потребителски интерфейси за филтриране с чипове.

Изключения, които заслужава да се познават

Критерият има пет изключения: еквивалентно (по-голяма цел на същата страница изпълнява същото действие), вградено (в изречение), контрол на потребителски агент (браузърна стойност по подразбиране, напр. роден <select>), съществено (малкият размер е необходим за предаване на информацията, напр. карфица на карта) и съответстващо (по-общо правило принуждава размера — рядко).

Защо е важно

Грешките в размера на целта се проявяват непропорционално при мобилно тестване и при потребители с болест на Паркинсон, есенциален тремор, множествена склероза или всеки, ползващ сензорен екран с една ръка в движение. Преходът от „без минимум” в WCAG 2.1 към минимум от 24×24 пиксела в WCAG 2.2 завари повечето производствени сайтове неподготвени — очаква се този критерий да бъде най-цитираният нов критерий в одитите за 2026 г.