Minimalny rozmiar obszaru docelowego

Czego wymaga kryterium

Każdy interaktywny element na stronie musi zajmować obszar aktywny o wymiarach co najmniej 24×24 piksele CSS — lub mieć wokół siebie wystarczający odstęp, aby okrąg o średnicy 24 pikseli wyśrodkowany na elemencie nie nakładał się na żaden inny element aktywny. Celem jest zapobieganie sytuacjom, w których użytkownicy z ograniczoną precyzją ruchów, drżeniem rąk lub korzystający z ekranu dotykowego w ruchu chybiają celu i aktywują niewłaściwą akcję.

WCAG 2.2 ustala minimum na 24×24 piksele; istniejące kryterium AAA 2.5.5 zachowuje bardziej rygorystyczny wymóg 44×44 pikseli.

Jak spełnić wymaganie

• Należy ustawić min-width / min-height 24px dla przycisków z samą ikoną, przycisków zamknięcia i każdego obszaru docelowego mniejszego niż typowy przycisk.
• Dla łączy śródliniowych wewnątrz akapitów obowiązuje wyjątek — kryterium wyraźnie zezwala na elementy „w zdaniu”.
• Dla rzędów ikon (przyciski paska narzędzi, akcje w wierszach tabeli) należy stosować dopełnienie, aby obszar aktywny sięgał 24×24 pikseli, nawet gdy sam glif ikony jest mniejszy.
• Dla elementów, które muszą pozostać wizualnie małe (mały „×” na etykiecie), należy dodać margines lub odstęp, aby sąsiednie obszary docelowe były oddalone od siebie o co najmniej 24 piksele mierzone od środka do środka.
• Audyt należy zacząć od paginacji, okruszków nawigacyjnych, akcji w wierszach tabeli i ikon paska narzędzi — to tam błędy są najczęstsze.

Typowe błędy

• Przyciski ikon 16×16 pikseli (zamknij, edytuj, usuń) bez dopełnienia, szczególnie w tabelach i paskach narzędzi.
• Ciasne paginacje, gdzie Poprzedni / 1 / 2 / 3 / Następny mieszczą się w polach 18px przylegających bezpośrednio do siebie.
• Niestandardowe pola wyboru i przyciski opcji ostylowane mniejsze niż natywne kontrolki z powodów „minimalistycznych”.
• Pływające przyciski akcji na urządzeniach mobilnych przekraczające 24×24 piksele, ale umieszczone zbyt blisko innych obszarów docelowych.
• Przyciski usuwania etykiet „×” o wymiarach 10–14 pikseli — niezwykle często spotykane w interfejsach filtrów z etykietami.

Wyjątki, o których warto wiedzieć

Kryterium przewiduje pięć wyjątków: równoważny (na tej samej stronie istnieje większy element docelowy pełniący tę samą funkcję), śródliniowy (element w zdaniu), kontrolka przeglądarki (domyślna przeglądarkowa, np. natywny <select>), niezbędny (mały rozmiar jest konieczny do przekazania informacji, np. pin na mapie) oraz zgodny (ogólniejsza reguła wymusza dany rozmiar — rzadkie).

Dlaczego to ważne

Błędy rozmiaru obszaru docelowego ujawniają się nieproporcjonalnie często podczas testów mobilnych oraz u użytkowników z chorobą Parkinsona, drżeniem samoistnym, stwardnieniem rozsianym lub u kogokolwiek korzystającego z ekranu dotykowego jedną ręką w pociągu. Przejście od „brak minimum” w WCAG 2.1 do progu 24×24 piksele w WCAG 2.2 zaskoczyło większość serwisów produkcyjnych — należy spodziewać się, że kryterium to będzie najczęściej cytowanym nowym SC w audytach 2026 roku.