Każdy zna ten moment: chcesz kliknąć ikonę menu, filtr albo przycisk na telefonie, a strona robi psikusa i uruchamia coś obok. Nagle zamiast zamknąć okno, otwierasz inną podstronę. Zamiast wybrać właściwy filtr, zaznaczasz sąsiedni. Mała rzecz, a potrafi zirytować szybciej niż wyskakujące okienko w najmniej odpowiednim momencie.

Problem nie zawsze polega na tym, że przycisk wygląda na mały. Czasem napis albo ikona są niewielkie, ale cały aktywny obszar wokół nich został rozsądnie powiększony. Innym razem element wygląda całkiem dobrze, lecz jego pole klikalne jest ciasne i znajduje się tuż obok kolejnego. Właśnie dlatego przy ocenie strony trzeba patrzeć nie tylko na wygląd, ale też na to, gdzie naprawdę można kliknąć. Poniżej rozkładamy temat na części: minimum WCAG 2.2, wygodę obsługi i poprawki, które często da się zrobić bez przebudowy całej strony.

Na początek: problem nie tkwi w samym wyglądzie przycisku

Widoczny tekst, ikona albo grafika to niekoniecznie cały przycisk. Element może mieć mały napis, ale większy aktywny kontener. Wtedy użytkownik nie musi trafić idealnie w literę czy środek ikonki. Wystarczy, że kliknie w rozsądnie wyznaczone pole wokół niej.

Na telefonie ma to szczególne znaczenie. Obsługa dotykiem nie jest tak precyzyjna jak wskazanie kursorem. Telefon trzymamy jedną ręką, ekran bywa wąski, a sąsiadujące elementy mogą znajdować się bardzo blisko siebie. Dwa przyciski mogą wyglądać estetycznie w widoku desktopowym, a po zwężeniu ekranu zamienić się w mały tor przeszkód.

Dlatego warto sprawdzać menu, formularze, filtry, paginację, ikony i najważniejsze wezwania do działania na prawdziwym telefonie. Sam podgląd strony na dużym ekranie nie pokaże całej historii. Liczy się to, czy użytkownik bez celowania chirurgiczną precyzją uruchomi dokładnie tę funkcję, którą wybrał.

24 × 24 CSS piksele — co naprawdę mówi WCAG 2.2

WCAG 2.2, w kryterium 2.5.8 Target Size (Minimum) na poziomie AA, wskazuje minimum 24 × 24 CSS piksele dla celu obsługiwanego wskaźnikiem. To ważna wskazówka, ale nie należy zamieniać jej w uproszczoną zasadę: „każdy przycisk na stronie ma mieć dokładnie 24 × 24 px”. Tak to nie działa.

Po pierwsze, mowa o CSS pikselach, a nie o pojedynczych fizycznych pikselach ekranu. CSS pixel jest jednostką odniesienia używaną w stylach strony. Nie należy więc traktować go jak prostego pomiaru fizycznej wielkości elementu na każdym telefonie.

Po drugie, oceniać trzeba cel interakcji, czyli miejsce, które faktycznie reaguje na kliknięcie lub dotyk. Sam napis może być niski, a ikona niewielka, lecz kontener wokół nich może mieć większą szerokość i wysokość. To często lepsze rozwiązanie niż sztuczne powiększanie grafiki albo tekstu, które rozpycha cały układ.

Minimum zgodności a wygodna obsługa

Minimum zgodności i wygodna obsługa to dwie różne sprawy. Wartość 24 × 24 CSS piksele jest punktem odniesienia dla kryterium AA, ale nie jest uniwersalnym przepisem na idealny interfejs. Element może spełniać minimum, a mimo to być niewygodny, jeśli obok znajduje się kilka podobnych celów i brakuje między nimi miejsca.

Ważne akcje, takie jak wysłanie formularza, przejście dalej, otwarcie menu czy uruchomienie funkcji w sklepie, powinny być łatwe do trafienia. Nie da się jednak uczciwie podać jednej magicznej wartości, która będzie idealna dla każdej strony, każdego układu i każdego urządzenia. Najrozsądniej sprawdzić konkretny element w konkretnym interfejsie, zwłaszcza w wersji mobilnej.

Dlaczego użytkownik klika nie ten element

Najczęściej winne jest połączenie dwóch rzeczy: małego aktywnego obszaru i zbyt małego odstępu od sąsiadów. Sam mały element nie zawsze musi być problemem. Jeśli ma dookoła wystarczająco dużo wolnego miejsca, łatwiej go wskazać. Kłopot zaczyna się wtedy, gdy obok znajduje się kolejny link, ikona albo przycisk i oba pola niemal się stykają.

Na stronie mobilnej widać to szczególnie w menu, paginacji, filtrach, formularzach i przy zestawionych obok siebie ikonach. Użytkownik może próbować nacisnąć jedną opcję, ale dotyk zostanie odczytany jako wybór drugiej. W efekcie pojawia się frustracja, cofanie i ponowne szukanie właściwego miejsca. Nie trzeba od razu zakładać, że cała strona jest do wyrzucenia. Czasem problem dotyczy jednego komponentu, który został zbyt ciasno ułożony.

Warto sprawdzić kilka szerokości ekranu, bo elementy mogą zachowywać się inaczej po zawinięciu tekstu albo zmianie układu. Trzeba też patrzeć na rzeczywisty aktywny obszar, a nie tylko na to, jak duży wydaje się przycisk. Sama zmiana rozmiaru nie daje automatycznej gwarancji mniejszej liczby pomyłek ani lepszej sprzedaży. To poprawka użyteczności, którą trzeba zweryfikować na konkretnej stronie.

Czy każdy link musi mieć 24 × 24 px? Nie tak szybko

Nie każdy link musi mieć 24 × 24 CSS piksele. Kryterium 2.5.8 dotyczy określonych celów obsługiwanych wskaźnikiem i przewiduje wyjątki. Jednym z nich są linki umieszczone w zdaniu. Ich rozmiar może wynikać z wysokości wiersza tekstu, a sztuczne powiększanie każdego takiego odnośnika mogłoby popsuć czytelność akapitu.

Wśród wyjątków znajdują się też niezmodyfikowane kontrolki przeglądarki oraz sytuacje, w których określony rozmiar lub położenie są niezbędne ze względu na funkcję albo wymagania prawne. To jednak nie oznacza, że mały element zawsze będzie wygodny. Wyjątek może mieć znaczenie przy ocenie zgodności, ale użytkownik nadal może mieć problem z trafieniem.

Jest jeszcze wyjątek dotyczący odstępów. Mniejszy cel może przejść ocenę, jeśli wokół niego jest odpowiednia przestrzeń, tak aby nie zderzał się z sąsiednimi celami. W przykładzie W3C cele o rozmiarze 20 × 20 CSS pikseli z 4 CSS pikselami odstępu mogą spełnić warunek wyjątku. Takie same cele ustawione bez odstępów już tego testu nie przechodzą.

Rozmiar elementu a odstęp do sąsiadów

Rozmiar i odstęp są ze sobą powiązane, ale nie są tym samym. Możesz mieć dwa czytelne przyciski, które wizualnie wyglądają dobrze, a mimo to ich aktywne pola będą zbyt blisko. Dlatego sprawdzaj nie tylko każdy element osobno, lecz także jego otoczenie.

Warto pamiętać, że 44 × 44 CSS piksele to kryterium Target Size (Enhanced) na poziomie AAA. Nie należy przedstawiać tej wartości jako podstawowego minimum AA. Z kolei 24 × 24 CSS piksele to minimum z kryterium Target Size (Minimum), również z określonymi wyjątkami. Te poziomy nie są zamienne, choć w rozmowach o przyciskach często wrzuca się je do jednego worka.

Jak poprawić odstępy bez przebudowy całej strony

W wielu przypadkach nie trzeba projektować strony od początku. Najpierw warto sprawdzić, czy problem da się naprawić w aktywnym kontenerze elementu. Chodzi o to, żeby powiększyć miejsce reagujące na kliknięcie i odsunąć je od sąsiadów, bez niepotrzebnego rozciągania samej ikony czy napisu.

Najczęściej do sprawdzenia są:

• padding elementu, który może zwiększyć aktywne pole wokół tekstu lub ikony;
• min-width i min-height kontenera, dzięki którym cel zachowuje minimalny rozmiar;
• odstępy między elementami ustawione przez gap albo marginesy;
• aktywne pola ikon, filtrów, przycisków i numerów paginacji;
• wersja mobilna menu, formularza i innych komponentów, które na wąskim ekranie robią się zbyt ciasne.

W3C opisuje technikę polegającą na nadaniu kontenerowi celu minimalnej szerokości i wysokości, nawet gdy sam tekst w środku pozostaje niewielki. Taki sposób można zastosować między innymi przy linkach numeracji. To przykład podejścia, a nie jedyna dopuszczalna implementacja.

Co zwykle da się poprawić w pierwszej kolejności

Najlepiej zacząć od elementów, które użytkownik naciska często albo które prowadzą do ważnej funkcji. Powiększenie aktywnego pola może być mniej inwazyjne niż zmiana całego wyglądu komponentu. Przycisk nadal może wyglądać podobnie, ale łatwiej będzie w niego trafić.

Potem trzeba rozsądnie rozsunąć sąsiednie cele. Sam padding nie pomoże, jeśli większe pola zaczną na siebie nachodzić. Po zmianach sprawdź, czy układ nie wypycha tekstu, czy ikony nie nachodzą na inne elementy i czy wersja mobilna nadal mieści się na ekranie. Szczególną uwagę zwróć na menu, filtry, paginację oraz przyciski obok siebie.

Szybka checklista przed publikacją

Przed publikacją albo po poprawkach przejdź stronę tak, jak robi to zwykły użytkownik telefonu. Nie ograniczaj się do strony głównej. Problem z klikalnością często wychodzi dopiero w formularzu, koszyku albo przy filtrach.

• Sprawdź najważniejsze przyciski na rzeczywistym telefonie.
• Przetestuj menu, formularz, koszyk, płatność, filtry i paginację, jeśli występują na stronie.
• Porównaj widoczny rozmiar elementu z faktycznym obszarem, który reaguje na dotyk.
• Oceń, czy sąsiednie elementy mają wystarczająco dużo miejsca.
• Sprawdź, czy kliknięcie w ikonę albo link uruchamia dokładnie wybraną funkcję.
• Powtórz test przy różnej szerokości ekranu i różnym sposobie obsługi.

Kiedy warto poprosić o przegląd strony

Jeśli problem dotyczy wielu komponentów mobilnych, pojedyncze poprawki mogą nie wystarczyć. Wtedy warto przejrzeć spójność całego interfejsu: aktywne pola, odstępy, zachowanie elementów po zwężeniu ekranu i miejsca, w których użytkownik wykonuje najważniejsze działania. Nie chodzi o mechaniczne ustawienie jednej liczby wszędzie, tylko o sprawdzenie, czy strona jest sensowna w użyciu.

Najważniejszy wniosek jest prosty: liczy się nie tylko wygląd przycisku, ale cały aktywny obszar i jego relacja z sąsiadami. 24 × 24 CSS piksele to minimum AA z wyjątkami, a 44 × 44 CSS piksele odnoszą się do poziomu AAA, nie do podstawowego wymogu. Część problemów da się poprawić przez padding, minimalne wymiary kontenera i większe odstępy. Potem trzeba sprawdzić efekt na prawdziwym telefonie, bo dopiero tam widać, czy użytkownik trafia tam, gdzie powinien. Masz stronę, sklep albo materiały graficzne, które proszą się o ogarnięcie? Napisz do INB Marketing i zobaczymy, co da się z tym sensownie zrobić.