- Poziom
- AA
- Od wersji
- WCAG 2.2
- Pozycje
- 82 / 193
2.5.8 Rozmiar celu (minimum)
Wszystko, w co się klika lub stuka, musi mieć co najmniej 24 na 24 piksele CSS albo dość wolnego miejsca dookoła, żeby nikt nie trafiał przez pomyłkę w sąsiednią kontrolkę.
/ Czego wymaga
Cel to obszar, który reaguje na kliknięcie lub dotknięcie. Kryterium wyznacza dla niego dolną granicę: 24 na 24 piksele CSS, liczone dla obszaru, który faktycznie reaguje, a nie dla ikony narysowanej w środku. Chroni to osoby, które nie mogą precyzyjnie wskazywać: ludzi z drżeniem rąk lub ograniczonym ruchem dłoni, osoby korzystające ze wskaźnika na głowę i każdego, kto używa małego ekranu dotykowego. Gdy cele są maleńkie i ściśnięte, tacy użytkownicy otwierają nie ten link albo usuwają nie ten wiersz.
Mniejszy cel nadal spełnia kryterium w pięciu przypadkach, które ono samo wymienia. Odstęp: koło o średnicy 24 pikseli CSS, wyśrodkowane na celu, nie dotyka innego celu ani takiego samego koła wokół innego zbyt małego celu. Odpowiednik: inna kontrolka na tej samej stronie robi to samo i ma wymagany rozmiar. Cel w tekście: znajduje się w zdaniu albo ogranicza go wysokość wiersza otaczającego tekstu. Kontrolkę rysuje przeglądarka, a autor jej nie zmienił. Określony wygląd jest istotny albo wymagany prawem.
To kryterium jest nowe w WCAG 2.2, więc audyt na zgodność z WCAG 2.1 go nie obejmuje.
/ Jak strony go nie spełniają
- Pasek narzędzi składa się z przycisków z ikonami o szerokości 16 pikseli, ustawionych jeden przy drugim bez żadnego odstępu.
- Numery stron w paginacji to wąskie linki rozmieszczone co kilka pikseli.
- Przycisk zamykania okna dialogowego to mały krzyżyk dociśnięty w rogu do innej kontrolki.
- Rząd ikon mediów społecznościowych w stopce ma 20 pikseli wysokości i odstępy po 4 piksele.
- Krzyżyk usuwający filtr ma kilka pikseli szerokości i leży tuż obok linku samego filtra.
/ Jak sprawdzić samodzielnie
- Ustaw powiększenie przeglądarki na 100 procent i zacznij od drobnych elementów: przycisków z ikonami, paginacji, krzyżyków zamykania, ikon w stopce i własnych pól wyboru.
- Zbadaj każdy z nich w narzędziach deweloperskich. Rozmiar pokazany dla elementu, razem z paddingiem, to właśnie cel, a szerokość i wysokość muszą mieć co najmniej 24 piksele CSS.
- Dla wszystkiego, co mniejsze, zmierz odległość do sąsiadów. Koło o średnicy 24 pikseli wyśrodkowane na celu nie może sięgać innego celu ani takiego samego koła wokół innego małego celu.
- Sprawdź, czy pozostały mały cel podpada pod któryś z wymienionych wyjątków, na przykład jest linkiem w zdaniu albo natywnym polem wyboru, którego nikt nie ostylował.
- Otwórz stronę na telefonie i zanotuj, w których miejscach kciuk trafia w niewłaściwą kontrolkę.
/ Jak to naprawić
- Ustaw min-width: 24px i min-height: 24px na samym elemencie button lub a, a nie tylko na znajdującym się w nim svg.
- Powiększ klikalny obszar paddingiem i zostaw ikonę w takim rozmiarze, w jakim jest narysowana.
- Tam, gdzie projekt nie może urosnąć, rozsuń cele właściwością margin albo gap w kontenerze flex lub grid, aż koła o średnicy 24 pikseli przestaną się stykać.
- Linkowi, który zawiera samą ikonę, nadaj display: inline-flex, żeby szerokość, wysokość i padding zaczęły na niego działać.
- Zastąp maleńkie własne pole wyboru lub przycisk opcji natywnym elementem input albo nadaj własnemu rozmiar 24 na 24 piksele CSS.
/ Co sprawdza nasz skaner
Test target-too-small mierzy wyrenderowany rozmiar linków, przycisków, elementów input i select oraz elementów z rolą button, link, checkbox lub switch. Pomija linki w tekście akapitu, elementu listy lub komórki tabeli, a cel mniejszy niż 24 na 24 piksele zgłasza tylko wtedy, gdy koło o średnicy 24 pikseli wokół niego sięga innego celu. Widzi jeden układ na szerokim ekranie i nie oceni wyjątków dotyczących odpowiednika ani istotnego wyglądu.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Jaki jest minimalny rozmiar celu w WCAG 2.2?
Kryterium sukcesu 2.5.8 ustala go na 24 na 24 piksele CSS na poziomie AA. Cel może być mniejszy, gdy ma dość wolnego miejsca dookoła, gdy jest linkiem w zdaniu, gdy inna kontrolka na stronie robi to samo, gdy rysuje go przeglądarka bez zmian autora albo gdy jego wygląd jest istotny lub wymagany prawem.
Czym różnią się kryteria 2.5.8 i 2.5.5 dotyczące rozmiaru celu?
To dwa kryteria na dwóch poziomach. 2.5.8 Rozmiar celu (minimum) należy do poziomu AA i wymaga 24 na 24 pikseli CSS, z wyjątkiem dotyczącym odstępu. 2.5.5 należy do poziomu AAA i wymaga 44 na 44 pikseli CSS. Do zgodności na poziomie AA potrzebne jest tylko pierwsze z nich.
Czy linki w akapicie muszą mieć 24 piksele wysokości?
Nie. Kryterium zwalnia cel, który znajduje się w zdaniu albo którego rozmiar ogranicza wysokość wiersza otaczającego tekstu. Link w środku akapitu może zachować wysokość swojego wiersza. Zwolnienie nie obejmuje rzędu przycisków ani menu, gdzie każda pozycja jest osobnym celem, który stoi samodzielnie i nie jest częścią zdania.