2.5.5 Rozmiar celu - poziom AAA

Elementy klikalne (cele wskazania), takie jak linki, przyciski, ikony czy elementy w menu, mają mieć wystarczająco duży rozmiar, żeby użytkownik mógł je łatwo trafić, bez precyzyjnego celowania.

O co chodzi w kryterium 2.5.5 Rozmiar celu?

W praktyce chodzi o sytuacje, gdy ktoś korzysta z telefonu jedną ręką, ma drżenie rąk, ograniczenia ruchowe albo po prostu ma duże palce i mały ekran. Jeśli cele są małe i upchane, użytkownik klika nie to, co chciał, bo elementy są zbyt blisko siebie.

WCAG w 2.5.5 wskazuje minimalny rozmiar celu wskazania co najmniej 44 × 44 piksele CSS.

Najczęstsze powody niespełnienia kryterium sukcesu 2.5.5

• Cele są po prostu za małe: ikony w nagłówku, małe linki tekstowe w listach, „x” do zamykania, strzałki w karuzeli, kropki paginacji.
• Elementy są małe i dodatkowo są zbyt blisko siebie. Nawet jeśli pojedynczy cel da się trafić, to w praktyce użytkownik często aktywuje sąsiedni.
• Rozmiar wizualny wygląda na duży, ale faktyczny obszar klikalny jest mały (np. klika się tylko w samą ikonę, a nie w cały przycisk/kafelek).

Jak sprawdzić 2.5.5 Rozmiar celu?

Na telefonie otwórz stronę i przetestuj trudne miejsca: nagłówek z ikonami, menu hamburger, paginację, filtry, checkboxy/radio, przyciski zamknij, elementy karuzeli.

Jeśli często klikasz obok albo uruchamiasz nie ten element, to zwykle jest sygnał, że cele są za małe lub zbyt gęsto rozmieszczone. Dla weryfikacji „na twardo” sprawdzasz czy obszar aktywny kluczowych elementów ma co najmniej 44 × 44 px CSS.

Rekomendacje jak spełnić kryterium 2.5.5

1. Najprostsza decyzja: dla klikalnych elementów ustawiaj obszar aktywny co najmniej 44 × 44 px CSS. To zwykle rozwiązuje większość problemów.
2. Jeśli masz małą ikonę (np. kosz, lupa, zamknij), nie powiększaj jej na siłę wizualnie - powiększ strefę kliku wokół niej. Użytkownik zyskuje, a UI może pozostać lekkie i przyjemne wizualnie.
3. W miejscach, gdzie elementów jest dużo (np. lista filtrów, tagi, menu w stopce), dopilnuj nie tylko rozmiaru, ale też odstępu pomiędzy celami, żeby zminimalizować ryzyko przypadkowego aktywowania sąsiedniego przycisku.

Pełny tekst kryterium 2.5.5 Rozmiar celu

Rozmiar celu punktu dotykowego wynosi co najmniej 44 na 44 piksele CSS , chyba że:

• Odpowiednik - Cel jest dostępny za pośrednictwem równoważnego łącza lub kontrolki na tej samej stronie, która ma co najmniej 44 na 44 piksele CSS;
• Śródliniowe - Cel znajduje się w zdaniu lub w bloku tekstu;
• Kontrola programu użytkownika - Rozmiar obiektu docelowego jest określony przez program użytkownika (przeglądarkę) i nie jest modyfikowany przez autora;
• Istotny - Szczególna prezentacja celu ma istotne znaczenie dla przekazywanych informacji.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#rozmiar-celu-dotykowego

Chcesz wiedzieć więcej?

• 2.1.1 Klawiatura - poziom A
• 2.1.2 Brak pułapki na klawiaturę - poziom A
• 2.1.3 Klawiatura (bez wyjątków) - poziom AAA
• 2.1.4 Jednoznakowe skróty klawiaturowe - poziom A
• 2.2.1 Dostosowanie czasu - poziom A
• 2.2.2 Pauza, zatrzymanie, ukrycie - poziom A
• 2.2.3 Brak czasu - poziom AAA
• 2.2.4 Przerywanie - poziom AAA
• 2.2.6 Ostrzeżenie o limicie czasu - poziom AAA
• 2.3.1 Trzy błyski lub wartości poniżej progu - poziom A
• 2.3.2 Trzy błyski - poziom AAA
• 2.3.3 Animacja po interakcji (Poziom AAA)
• 2.4.1 Możliwość pominięcia bloków - poziom A
• 2.4.2 Tytuł strony - poziom A
• 2.4.3 Kolejność fokusu - poziom A
• 2.4.4 Cel łącza (w kontekście) - poziom A
• 2.4.5 Wiele dróg - poziom AA
• 2.4.6 Nagłówki i etykiety - poziom AA
• 2.4.7 Widoczny fokus - poziom AA
• 2.4.8 Lokalizacja - poziom AAA
• 2.4.9 Cel łącza (z samego łącza) - poziom AAA
• 2.4.10 Nagłówki sekcji - poziom AAA
• 2.5.1 Gesty wskazujące - poziom A
• 2.5.2 Rezygnacja ze wskazania - poziom A
• 2.5.3 Etykieta w nazwie - poziom A
• 2.5.4 Aktywowanie ruchem - poziom A
• 2.5.5 Rozmiar celu - poziom AAA
• 2.5.6 Równoległy mechanizm wprowadzania danych - poziom AAA