Rozmiar obszaru dotykowego

Rozmiar obszaru dotykowego to efektywny wymiar każdego elementu, który użytkownik może dotknąć lub kliknąć. WCAG określa dwa progi: AAA — minimum 44×44 pikseli CSS (od WCAG 2.1) i AA — minimum 24×24 pikseli CSS (nowość w WCAG 2.2). Kryterium istnieje, ponieważ niepełnosprawności ruchowe — i zwykła niedokładność na małym ekranie — sprawiają, że małe obszary dotykowe są niemożliwe do użycia.

Dwa kryteria WCAG

• 2.5.5 Target Size (Enhanced) — poziom AAA — elementy obsługiwane wskaźnikiem muszą mieć co najmniej 44×44 piksele CSS. Reguła obowiązuje od dawna; trudna do spełnienia w całym serwisie.
• 2.5.8 Target Size (Minimum) — poziom AA, nowość w WCAG 2.2 — elementy obsługiwane wskaźnikiem muszą mieć co najmniej 24×24 piksele CSS. Praktyczna podstawa zgodności.

Element spełniający próg AAA 44×44 automatycznie spełnia też próg AA 24×24.

Co reguła faktycznie wymaga

Liczby odnoszą się do obszaru docelowego, a nie tylko do widocznej ikony. Wytyczne Apple Human Interface Guidelines i Google Material Design domyślnie przyjmują rozmiary docelowe 44 pt / 48 dp z tego samego powodu — istnieją realne dane ergonomiczne uzasadniające te wartości.

Typowy wzorzec: przycisk z samą ikoną narysowaną jako SVG 16×16, ale z wypełnieniem powiększającym klikalny obszar do 44×44. To spełnia regułę. Widoczna ikona jest mała; obszar docelowy to widoczna ikona plus otaczający ją wypełniony obszar.

Wyjątki

Kryterium 2.5.8 (kryterium AA) ma wyraźne wyjątki:

• Wyjątek oparty na odstępach. Jeśli element ma co najmniej 24×24 piksele lub jest otoczony wystarczającą ilością białej przestrzeni, tak że żaden inny element docelowy nie znajduje się w odległości 24 pikseli CSS, kryterium jest spełnione. Chroni to gęste układy śródliniowe (jak linki tekstowe w treści artykułu) o małych obszarach docelowych, ale wystarczająco oddalonych od siebie.
• Równoważna kontrolka gdzie indziej. Mały obszar docelowy jest dopuszczalny, jeśli ta sama funkcja jest dostępna za pomocą innej, większej kontrolki na tej samej stronie.
• Elementy śródliniowe. Linki w tekście ciągłym są zwolnione — treść artykułu nie powinna być przeformatowywana ze względu na regułę 24 pikseli na link.
• Kontrolowane przez przeglądarkę. Domyślne kontrolki przeglądarki są zwolnione.
• Istotne. Gdy rozmiar jest niezbędny do funkcji (np. siatka CAPTCHA).

Co to oznacza w praktyce

Trzy typowe błędy produkcyjne:

• Przyciski nawigacji tylko z ikoną o rozmiarze 28×28. Nie spełniają kryterium 2.5.8, chyba że są otoczone wystarczającą białą przestrzenią, której większość gęstych pasków nawigacji nie ma.
• Ciasno pogrupowane listy pól wyboru. Pola wyboru rysowane jako 16×16 bez wypełnienia, ustawione pionowo bez odstępów. Zarówno obszar docelowy, jak i odstęp nie spełniają reguły.
• Strzałki „poprzedni/następny” w karuzeli mobilnej. Często rysowane jako żeberka 32-pikselowe z 4 pikselami wypełnienia. Nie spełniają kryterium 2.5.8.

Najszybszy audyt ręczny

Należy otworzyć DevTools na dowolnym widoku z emulacją mobilną. Sprawdzić każdy element interaktywny. Odnotować jego bounding box. Wszystko poniżej 24 pikseli CSS w którymkolwiek wymiarze, z sąsiadującymi elementami docelowymi w odległości 24 pikseli CSS, nie spełnia kryterium 2.5.8.

Większość zespołów przyjmuje token rozmiaru obszaru docelowego we wszystkich komponentach — każdy element interaktywny otrzymuje co najmniej obszar 44×44 piksele niezależnie od widocznego rozmiaru. To najtańszy sposób na wyeliminowanie tego problemu.