WCAG 2.5.8 Rozmiar celu (minimum)

Kryterium sukcesu 2.5.8 jest nowe w WCAG 2.2. Ułatwia trafianie w przyciski i linki osobom z drżeniem rąk lub ograniczoną sprawnością dłoni, osobom korzystającym ze wskaźnika na głowie lub pałeczki trzymanej w ustach oraz każdemu, kto obsługuje telefon jedną ręką. Małe, ciasno ułożone cele prowadzą do błędnych dotknięć — zły rozmiar, zły kolor, „Usuń” zamiast „+1”. To poziom AA, część normy EN 301 549 (punkt 9.2.5.8).

Czego wymaga kryterium

Rozmiar celu dla wskaźnika wynosi co najmniej 24 na 24 piksele CSS, z wyjątkiem sytuacji, gdy:

• Odstęp: zbyt małe cele są rozmieszczone tak, że jeśli na obszarze każdego z nich wyśrodkuje się koło o średnicy 24 pikseli CSS, koła nie przecinają innego celu ani koła innego zbyt małego celu;
• Odpowiednik: funkcję można wykonać za pomocą innego elementu sterującego na tej samej stronie, który spełnia kryterium;
• W tekście: cel znajduje się w zdaniu albo jego rozmiar jest w inny sposób ograniczony wysokością linii tekstu niebędącego celem;
• Element sterujący przeglądarki: rozmiar określa przeglądarka i nie został zmieniony przez autora;
• Niezbędność: określona prezentacja celu jest niezbędna lub wymagana prawem dla przekazywanej informacji.

Cele, w których wartość wybiera się położeniem wewnątrz nich (np. ścieżka suwaka), liczą się jako jeden cel. Celem jest obszar klikalny, a nie tylko widoczna ikona. Poziom AAA (2.5.5) wymaga 44 × 44 pikseli CSS.

Typowe błędy w sklepie internetowym

• próbki kolorów o wielkości 16–20 px umieszczone tuż obok siebie;
• przyciski ilości „−” i „+” o wielkości ok. 20 px obok pola z liczbą;
• mały „×” do usunięcia produktu z mini-koszyka lub zamknięcia okienka;
• ciasno ułożone ikony mediów społecznościowych i płatności w stopce;
• linki paginacji („1 2 3 …”) z niewielkim wypełnieniem;
• kropki karuzeli wielkości kilku pikseli bez odstępów.

Jak to sprawdzić

Automatycznie: nasz skaner mierzy rozmiar i odstępy klikalnych celów i oznacza te poniżej 24 × 24 pikseli CSS, które nie przechodzą też testu odstępu (reguła rozmiaru celu). Nie zawsze potrafi ocenić wyjątki dotyczące równoważnych elementów, linków w tekście lub niezbędnej prezentacji, dlatego oznaczone cele trzeba przejrzeć ręcznie.

Ręcznie: narzędziami deweloperskimi przeglądarki zmierzyć małe elementy — próbki kolorów, przyciski zmiany ilości, przyciski zamykania, ikony. Jeśli któryś jest mniejszy niż 24 × 24, sprawdzić odstęp, wyobrażając sobie koło o średnicy 24 px na jego środku. Warto otworzyć stronę na prawdziwym telefonie i dotknąć małych elementów kciukiem.

Jak to naprawić

• Nadać przyciskom z ikoną minimalny rozmiar: min-width: 24px; min-height: 24px (44 px jest lepsze przy obsłudze dotykiem).
• Zwiększać wypełnienie zamiast samej ikony — liczy się obszar klikalny.
• Dodać odstęp między sąsiednimi małymi celami, np. próbkami kolorów i linkami paginacji.
• Powiększyć kropki karuzeli albo zastąpić je przyciskami „poprzednie/następne”.

Powiązane kryteria

• 2.5.2 Rezygnacja ze wskazania — przypadkowe dotknięcia muszą dać się anulować.
• 2.5.7 Ruchy przeciągania — przeciąganie wymaga alternatywy obsługiwanej jednym wskaźnikiem.
• Lista kontrolna WCAG 2.2 — co jeszcze nowego w WCAG 2.2.

Najczęstsze pytania

Jaki jest minimalny rozmiar celu w WCAG 2.2?

Co najmniej 24 na 24 piksele CSS dla celów obsługiwanych wskaźnikiem na poziomie AA (2.5.8). Poziom AAA (2.5.5 Rozmiar celu dotykowego) wymaga 44 na 44 piksele CSS.

Czy przycisk może być mniejszy niż 24 px?

Tak, jeśli ma wystarczający odstęp: koło o średnicy 24 px wyśrodkowane na nim nie może przecinać innego celu ani koła innego małego celu. Pozostałe wyjątki obejmują równoważny większy element na tej samej stronie, linki w tekście, niezmienione elementy sterujące przeglądarki oraz prezentację niezbędną lub wymaganą prawem.

Czy linki tekstowe w akapicie muszą mieć 24 px?

Nie. Cele w zdaniu albo takie, których rozmiar ogranicza wysokość linii otaczającego tekstu, są zwolnione na podstawie wyjątku dla elementów w tekście.

Czy celem jest widoczna ikona, czy obszar klikalny?

Obszar klikalny. Ikona 16 px w przycisku 24 × 24 px z wypełnieniem spełnia wymóg rozmiaru.