zbyt małe elementy interaktywne (problemy WCAG)

Zbyt małe elementy interaktywne naruszają wytyczne dostępności WCAG dotyczące rozmiaru celów dotykowych.

Na czym polega problem zbyt małych elementów interaktywnych

Zbyt małe elementy interaktywne to przyciski, odnośniki, pola wyboru, przełączniki, ikony zamykające, kontrolki odtwarzacza lub inne obszary interfejsu, które wymagają wskazania i aktywowania przez użytkownika, ale mają niewielki obszar aktywny. Problem dotyczy przede wszystkim obsługi palcem na ekranie dotykowym, lecz wpływa również na użytkowników korzystających z myszy, rysika, powiększenia ekranu albo nietypowych metod sterowania. Jeżeli aktywny jest tylko mały symbol, na przykład kilkupikselowy znak „x”, użytkownik może przypadkowo nacisnąć sąsiednią kontrolkę albo wielokrotnie próbować trafić w odpowiednie miejsce.

Wymiar widocznej grafiki nie zawsze odpowiada wymiarowi celu interakcji. Ikona może mieć 16 pikseli, ale zostać umieszczona w przycisku o większym obszarze aktywnym. Z punktu widzenia dostępności liczy się obszar, który rzeczywiście można kliknąć lub dotknąć, a także odległość od innych celów. Samo zwiększenie rozmiaru obrazka bez powiększenia elementu HTML nie rozwiązuje problemu, ponieważ użytkownik nadal musi trafić w mały obszar obsługujący zdarzenie.

Wymagania WCAG dotyczące rozmiaru celu

Wytyczna WCAG 2.2 zawiera kryterium sukcesu 2.5.8 „Target Size (Minimum)” na poziomie zgodności AA. Zgodnie z nim cele wskaźnika powinny mieć co najmniej 24 na 24 piksele CSS albo odpowiedni odstęp od innych celów, tak aby obszary aktywne nie nakładały się w sposób utrudniający wybór. Piksel CSS jest jednostką logiczną używaną przez przeglądarkę, a nie bezpośrednim odpowiednikiem fizycznego piksela matrycy. Wymóg ma zastosowanie do elementów obsługiwanych wskaźnikiem, takich jak dotyk, mysz lub rysik.

Kryterium 2.5.8 przewiduje wyjątki, między innymi wtedy, gdy element znajduje się w tekście lub jego rozmiar jest ustalany przez użytkownika, na przykład w kontrolce przeglądarki. Wyjątek może dotyczyć również sytuacji, w której określony układ lub prezentacja elementu jest niezbędna do przekazania informacji. Nie oznacza to jednak, że każdy mały przycisk można uznać za zgodny bez analizy. W starszej wersji WCAG, 2.1, kryterium 2.5.5 „Target Size (Enhanced)” na poziomie AAA wskazuje cel 44 na 44 piksele CSS. W praktyce projektowej większy obszar aktywny jest korzystny, zwłaszcza w aplikacjach używanych na telefonach, tabletach i urządzeniach z ekranem o wysokiej gęstości pikseli.

Jak rozpoznać błąd w interfejsie i kodzie strony

Ocena powinna obejmować widok strony przy typowych szerokościach ekranu, powiększeniu tekstu i ustawieniach systemowych zwiększających skalę interfejsu. Należy sprawdzić, czy przyciski, linki i kontrolki pozostają dostępne po zmianie układu responsywnego oraz czy ich obszary nie nachodzą na siebie. Szczególnej uwagi wymagają ikony w nagłówkach, przyciski menu, kontrolki formularzy, elementy karuzel, strzałki nawigacyjne i przyciski zamykania okien. Warto sprawdzić także stan po najechaniu kursorem, fokusie klawiatury, aktywacji oraz wyłączeniu elementu, ponieważ obramowanie wizualne może zmieniać ocenę widocznego obszaru, ale nie powiększa obszaru kliknięcia.

W kodzie HTML należy ustalić, czy kontrolka jest prawidłowym elementem interaktywnym, takim jak <button> lub <a>, oraz czy cały zamierzony obszar przekazuje aktywację do tego elementu. CSS może zapewnić większy wymiar przez właściwości width, min-width, height, min-height i odpowiednie padding. Trzeba zachować widoczny fokus i logiczne odstępy, aby powiększenie celu nie powodowało kolizji z sąsiednimi kontrolkami. Nie należy polegać wyłącznie na obsłudze zdarzeń przypisanych do małej ikony ani zastępować przycisku elementem <div> z przypadkowym handlerem JavaScript, ponieważ utrudnia to obsługę klawiaturą i technologiami asystującymi.

Test funkcjonalny powinien potwierdzić, że powiększony obszar uruchamia dokładnie tę samą akcję co etykieta lub ikona, a sąsiadujące cele pozostają rozdzielone. W formularzu trzeba sprawdzić możliwość zaznaczenia pola przez jego etykietę, a w menu — czy kliknięcie nazwy pozycji i ikony prowadzi do przewidywalnego rezultatu. Automatyczne skanery mogą wskazać wymiary elementów, ale zwykle nie rozstrzygają poprawnie wszystkich wyjątków, relacji przestrzennych ani problemów pojawiających się po zmianie skali. Dlatego wynik automatycznego testu powinien być uzupełniony kontrolą wizualną i próbą obsługi na urządzeniu dotykowym.

Naprawa problemu w serwisowanym laptopie lub komputerze

W przypadku strony używanej na laptopie lub komputerze PC poprawa zwykle polega na zmianie stylów interfejsu, powiększeniu obszaru przycisku, zwiększeniu odstępów między kontrolkami albo przebudowie układu dla małych ekranów. Jeżeli problem występuje tylko w jednej przeglądarce, należy porównać reguły CSS, skalowanie strony, obsługę powiększenia i zachowanie elementów po załadowaniu skryptów. Jeżeli wszystkie elementy są małe w całym systemie, przyczyną może być ustawiona skala interfejsu lub rozdzielczość, ale nie zwalnia to autora strony z zapewnienia użytecznego układu przy typowych ustawieniach.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a przy problemach z dostępnością może również pomóc rozdzielić usterkę sprzętową od błędu aplikacji lub strony internetowej. W diagnostyce warto odnotować model urządzenia, rodzaj ekranu, używaną przeglądarkę, poziom powiększenia oraz to, czy problem dotyczy myszy, dotyku, klawiatury, czy wszystkich metod obsługi. Takie informacje pozwalają odtworzyć warunki wystąpienia problemu i zweryfikować, czy zmiana interfejsu rzeczywiście poprawiła możliwość precyzyjnego korzystania z komputera.