Wróć do wszystkich kryteriów

2.5.8 Rozmiar celu (minimum) (ang.) Target size (minimum)

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Dialogi i warstwy
  • Przyciski i kontrolki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Kryterium to ma na celu zagwarantowanie, że interaktywne elementy interfejsu są wystarczająco duże oraz odpowiednio odseparowane przestrzennie, aby każdy użytkownik mógł bez problemu je aktywować. Zapobiega to przypadkowemu uruchamianiu sąsiednich kontrolek, co stanowi jedno z najpoważniejszych uchybień w kontekście mobilnego doświadczenia użytkownika. Zapewnienie odpowiedniej przestrzeni drastycznie zmniejsza zmęczenie psychiczne i eliminuje frustrację podczas codziennej nawigacji.

    Wymóg ten określa, że minimalny obszar docelowy elementu klikalnego musi wynosić przynajmniej 24 x 24 piksele CSS. Alternatywnie, jeśli sam element jest mniejszy, wokół niego musi znajdować się wystarczająca, wolna przestrzeń, zapobiegająca nakładaniu się wirtualnych obszarów dotyku o średnicy 24 pikseli CSS.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#target-size-minimum

    Słownik pojęć

    Obszar docelowy (ang.) target
    –

    to całkowity obszar elementu interfejsu użytkownika, który reaguje na akcję urządzenia wskazującego (np. kliknięcie myszą lub dotknięcie palcem).

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy urządzeń mobilnych i dotykowych: Na ekranach smartfonów i tabletów głównym wskaźnikiem jest ludzki palec, który ze swej natury jest znacznie mniej precyzyjny niż kursor myszy komputerowej. Zbyt małe przyciski odcinają użytkowników od sprawnej nawigacji.
    • Osoby z niepełnosprawnościami ruchowymi: Użytkownicy zmagający się z drżeniem dłoni, spastycznością czy ograniczoną kontrolą mięśniową napotykają ogromne trudności przy precyzyjnym celowaniu w drobne punkty. Większe elementy eliminują ryzyko przypadkowych aktywacji sąsiednich funkcji.
    • Osoby korzystające z alternatywnych urządzeń wskazujących: Korzystanie z pałeczek ustnych, myszy sterowanych wzrokiem lub ruchem głowy wymaga bezkompromisowej wyrazistości i odpowiednich gabarytów celów dotykowych z uwagi na mniejszą dokładność tych metod wprowadzania.
    • Osoby z niepełnosprawnościami poznawczymi i intelektualnymi: Użytkownicy ci niezwykle dotkliwie odczuwają skutki przypadkowych kliknięć. Nagła, nieintencjonalna zmiana kontekstu (np. niechciane przeniesienie na inną podstronę lub uruchomienie ukrytej akcji) wywołuje u nich silną dezorientację, zagubienie oraz głęboką frustrację.
    • Osoby starsze (seniorzy): Proces starzenia się wiąże się z naturalnym, sukcesywnym osłabieniem koordynacji wzrokowo-ruchowej oraz spadkiem stabilności dłoni. Odpowiednio duże strefy klikalne pozwalają im na zachowanie pełnej niezależności w świecie cyfrowym.
    • Osoby z ograniczeniami czasowymi lub sytuacyjnymi: Wspierasz każdego, kto chwilowo utracił pełną sprawność manualną – na przykład z powodu złamanej lub unieruchomionej ręki, obsługiwania ekranu w grubych rękawiczkach zimowych czy próby kliknięcia w ikonę podczas trzymania płaczącego dziecka.
    • Użytkownicy w niesprzyjających warunkach zewnętrznych: Osoby obsługujące urządzenia w ruchu (np. podczas jazdy autobusem lub spaceru), w pełnym słońcu bądź przy rozproszonej uwadze.

    Zasady wdrażania i wymagania techniczne

    • Zapewnij solidny kwadrat 24×24 piksele CSS: Każdy element interaktywny musi umożliwiać teoretyczne wpisanie w swój obszar pełnego kwadratu o wymiarach minimum 24 na 24 piksele CSS, wyrównanego do osi pionowej i poziomej strony. Sam element może posiadać nieregularne kształty lub ścięcia, ale w jego wnętrzu musi zmieścić się wspomniana przestrzeń.
    • Wykorzystuj wewnętrzne wypełnienie CSS (padding): Jeśli ikona lub tekst ze względów projektowych muszą pozostać małe, zwiększ ich obszar klikalności za pomocą właściwości padding. Pamiętaj, że dołączany padding powiększa aktywną strefę elementu, w przeciwieństwie do marginesów (margin). Zastosuj regułę box-sizing: border-box.
    • Nie polegaj na powiększeniu strony: Wymóg ten musi być spełniony w domyślnym widoku. Nie wolno zakładać, że użytkownik sam przybliży ekran, aby trafić w miniaturowy odnośnik. Rozmiar w pikselach CSS pozostaje niezmienny bez względu na skalowanie strony przez użytkownika.
    • Kontroluj obszary nachodzące na siebie: Jeśli dwa elementy interaktywne nachodzą na siebie, strefa nakładania się nie wlicza się do wymiarów żadnego z nich (wyjątkiem jest sytuacja, gdy oba elementy wywołują dokładnie tę samą akcję lub kierują do tej samej podstrony).
    • Projektuj z myślą o responsywności: Pilnuj, aby gabaryty stref dotykowych nie ulegały niekontrolowanemu zmniejszeniu na ekranach o mniejszej rozdzielczości.

    Wyjątki i sytuacje szczególne

    • Odstęp ((ang.) spacing): Element mniejszy niż 24×24 piksele CSS spełni kryterium, jeżeli wokół niego zachowano odpowiednią przestrzeń. Wyobraź sobie wirtualny okrąg o średnicy 24 pikseli CSS wycentrowany na ramce otaczającej danego elementu. Okrąg ten nie może przecinać żadnego innego elementu klikalnego ani wirtualnego okręgu innego pomniejszonego elementu.
    • W linii ((ang.) inline): Odnośniki osadzone bezpośrednio wewnątrz zdań lub bloków tekstu nie podlegają tej regule. Zwiększanie ich rozmiaru mogłoby zniszczyć czytelność, płynność i naturalny układ tekstu.
    • Kontrola agenta użytkownika ((ang.) user agent control): Wyjątek obejmuje domyślne, nienadpisane przez autora style kontrolek przeglądarki, takie jak standardowe paski przewijania czy fabryczne kalendarze w polach <input type="date">.
    • Niezbędność ((ang.) essential): Specyficzny rozmiar jest kluczowy dla prezentacji informacji. Przykładem są gęsto rozmieszczone szpilki na mapach cyfrowych, punkty danych na skomplikowanych wykresach interaktywnych czy systemy odwzorowujące urzędowe formularze papierowe.
    • Równoważność ((ang.) equivalent): Funkcję małego elementu można w pełni zrealizować za pomocą innej, w pełni zgodnej kontrolki (o rozmiarze minimum 24×24 piksele CSS) ulokowanej na tej samej stronie internetowej.
    • Elementy dynamicznie zasłonięte: Wymóg nie ma zastosowania do celów, które zostały tymczasowo zasłonięte w wyniku interakcji użytkownika lub działania skryptu (np. otwarcie listy rozwijanej, pojawienie się okna modalnego czy baneru ciasteczek). Nowo pojawiające się elementy na wierzchu muszą jednak spełniać kryterium.

    Przykłady implementacji

    Najczęstsze błędy

    • Utożsamianie rozmiaru wizualnego z rozmiarem strefy klikalnej: Pozostawienie małej grafiki (np. 16×16 pikseli) bez sztucznego rozszerzenia jej obszaru za pomocą stylów CSS, co uniemożliwia bezbłędne trafienie palcem.
    • Zagęszczanie pomniejszonych elementów w pionie lub poziomie: Umieszczanie wąskich przycisków (np. o wysokości 16 pikseli) bezpośrednio jeden pod drugim bez marginesu separującego, co powoduje przecinanie się wirtualnych okręgów ochronnych i prowadzi do całkowicie losowej i chaotycznej aktywacji sąsiednich funkcji.
    • Wdrażanie wadliwych stylizacji niestandardowych kontrolek: Budowanie własnych pól wyboru (checkbox, radio button) od podstaw za pomocą kodu JavaScript/CSS i redukowanie ich aktywnej powierzchni poniżej krytycznej granicy 24 pikseli CSS.
    • Ignorowanie komponentów dynamicznych: Niedostosowanie stref dotykowych w elementach pojawiających się na stronie dynamicznie, takich jak rozwijane pozycje menu ((ang.) dropdown menu), sugestie autouzupełniania czy komunikaty o plikach cookies.
    • Nadużywanie i zasłanianie się wyjątkami: Bezzasadne traktowanie każdej małej kontrolki jako elementu „niezbędnego”, by usprawiedliwić błędy projektowe.

    Najlepsze praktyki

    • Dąż do standardu 44×44 piksele CSS: Choć WCAG 2.5.8 wymaga absolutnego minimum 24×24 piksele, wiodące standardy rynkowe (takie jak Google Material Design czy Apple Human Interface Guidelines) zalecają rozmiar celów o wymiarach 44×44 piksele lub większych dla zapewnienia maksymalnej wygody.
    • Gwarantuj bezpieczne odstępy między kontrolkami: Oprócz dbania o sam rozmiar elementu, wprowadzaj wyraźne separacje przestrzenne. Uniemożliwi to użytkownikom pomyłkowe kliknięcia przycisków o skrajnie odmiennych skutkach (np. „Zapisz” i „Usuń”).
    • Opieraj interfejs na semantycznym kodzie HTML: Zawsze stosuj natywne znaczniki, takie jak <button>, <a> oraz <input>. Zapewniają one stabilny fundament pod dalsze rozszerzanie wymiarów za pomocą stylów CSS.
    • Weryfikuj projekty na fizycznych urządzeniach mobilnych: Nigdy nie polegaj wyłącznie na emulatorach ekranowych wbudowanych w przeglądarki. Prawdziwy test kciuka na ekranie smartfona bezlitośnie obnaży wszelkie mankamenty projektowe.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Zbadaj strukturę drzewa DOM i sprawdź za pomocą kalkulatora stylów w zakładce „Computed”, czy interaktywne elementy zachowują wymagane 24×24 piksele CSS lub czy ich pseudo-elementy odpowiednio powiększają tę strefę. Wykorzystaj tryb symulacji urządzeń mobilnych do wizualnego zweryfikowania rozmieszczenia kontrolek.
    • ANDI.js: Uruchom dedykowany moduł badania elementów graficznych oraz interaktywnych, aby zweryfikować fizyczny i wirtualny rozmiar stref klikalnych oraz upewnić się, że mniejsze elementy zachowują wymagany dystans ochronny.
    • Testowanie manualne: Przeprowadź testy bezpośrednio na fizycznym sprzęcie wyposażonym w ekran dotykowy, sprawdzając łatwość trafienia w poszczególne kontrolki. Spróbuj aktywować elementy w dynamicznym tempie lub niesprzyjających symulowanych warunkach (np. jedną ręką), oceniając czy interfejs redukuje błędy i eliminuje frustrację.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 modułów interfejsu z różnymi interaktywnymi elementami. Twoim zadaniem jest sprawdzenie, czy spełniają one wymóg minimalnego rozmiaru celu wynoszącego 24×24 piksele CSS lub czy posiadają wystarczające odstępy ochronne.

    Jak to sprawdzić?

    1. Zbadaj elementy za pomocą narzędzi deweloperskich (Zbadaj element).
    2. Sprawdź całkowite wymiary (Computed) elementu klikalnego (np. <button>, <a>, <input>).
    3. Zwróć uwagę na padding (powiększa obszar klikalny) oraz margin (tworzy odstęp).
    4. Pamiętaj o wyjątkach: elementy w linii tekstu, kontrolki przeglądarki, elementy niezbędne (essential) oraz zachowanie odpowiedniego odstępu.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools

    Link: https://pdc.ambiscale.com/training/wcag-2-5-8/

    #1 BŁĄD

    Problem: Przyciski mają wymiary dokładnie 16×16 pikseli i są ułożone z odstępem zaledwie 2px od siebie.
    Dlaczego: Elementy są mniejsze niż wymagane 24×24 piksele CSS. Dodatkowo nie spełniają wyjątku dotyczącego odstępu (Spacing), ponieważ wirtualny okrąg o średnicy 24px wokół jednego przycisku przecina się z okręgiem sąsiedniego przycisku.
    Naprawa: Należy zwiększyć rozmiar przycisków, dodać wewnętrzny padding (jak w #2) lub zwiększyć marginesy między nimi (jak w #3).

    #2 DOBRZE

    Dlaczego: Chociaż wizualna ikona przycisku ma rozmiar 16×16 pikseli, sam znacznik <button> posiada jawnie zdefiniowane wymiary 24×24 piksele. Wewnętrzny padding (4px) służy jedynie do wyśrodkowania ikony wewnątrz przycisku, zachowując całkowity obszar klikalny 24x24px (przy domyślnym box-sizing: border-box). Użytkownik klikając tuż obok niebieskiego kwadratu, nadal aktywuje przycisk. Jest to najlepsza praktyka powiększania obszaru klikalnego bez psucia wizualnego projektu.

    #3 DOBRZE

    Dlaczego: Przyciski nadal mają rozmiar 16×16 pikseli, ale zastosowano między nimi odstęp (gap) wynoszący 8px. Całkowita przestrzeń dla każdego przycisku to 16px + 8px = 24px. Wirtualne okręgi o średnicy 24px nie przecinają się. Spełniono wyjątek dotyczący odstępu.

    #4 DOBRZE

    Dlaczego: Odnośniki znajdują się wewnątrz bloku tekstu (w linii). Zwiększanie ich rozmiaru do 24×24 pikseli zniszczyłoby czytelność i naturalny układ akapitów. Elementy te są wyłączone z wymogów kryterium 2.5.8.

    #5 BŁĄD

    Problem: Niestandardowe przyciski opcji (radio buttons) zostały ostylowane tak, by miały rozmiar 16×16 pikseli. Odstęp między wierszami wynosi zaledwie 4px.
    Dlaczego: Całkowity obszar w pionie to 20px (16px + 4px), co jest wartością mniejszą niż 24px. Brak wystarczającego odstępu powoduje oblane testu.
    Naprawa: Zwiększyć rozmiar kontrolek do minimum 24x24px lub zwiększyć odstęp między etykietami do minimum 8px.

    #6 DOBRZE

    Dlaczego: Szpilki na mapie mogą być gęsto rozmieszczone i zachodzić na siebie z uwagi na specyfikę prezentowanych danych geograficznych. Wymuszenie odstępów 24px zafałszowałoby informacje. Jest to wyjątek „Niezbędność”.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów