Funkcjonalność · Poziom AA

2.5.8 Rozmiar celu (minimum)

Elementy, które użytkownik klika albo dotyka, nie mogą być zbyt małe ani upchane tak blisko siebie, że łatwo trafić w zły element.

Krótko

Elementy, które użytkownik klika albo dotyka, nie mogą być zbyt małe ani upchane tak blisko siebie, że łatwo trafić w zły element.

Problem w praktyce

Użytkownik widzi małe ikonki w tabeli, ciasne numery paginacji albo przycisk zamykania w rogu okna. Próbuje stuknąć jedną akcję, ale trafia w sąsiednią. Problem jest szczególnie dotkliwy na ekranach dotykowych, przy powiększeniu, w ruchu albo przy ograniczonej precyzji ruchu.

2.5.8 dotyczy celu aktywnego, czyli obszaru, który reaguje na kliknięcie, dotknięcie albo rysik. Cel powinien mieć co najmniej 24 na 24 piksele CSS albo być tak odsunięty od innych celów, żeby przypadkowe trafienie w sąsiednią akcję było mniej prawdopodobne.

Nie oznacza to, że każda widoczna ikonka musi mieć fizyczny prostokąt 24 na 24 px. Liczy się rzeczywisty obszar aktywny, odstęp od innych celów oraz wyjątki opisane w WCAG, np. linki w zdaniu, kontrolki przeglądarki albo prezentacja istotna dla informacji.

Kogo to dotyczy

  • Osób korzystających z dotyku, zwłaszcza na telefonach i tabletach.
  • Osób z drżeniem rąk, spastycznością, bólem albo ograniczoną sprawnością dłoni.
  • Osób korzystających z myszy, rysika, trackpada albo alternatywnych urządzeń wskazujących.
  • Osób obsługujących urządzenie jedną ręką, w komunikacji miejskiej albo w ruchu.
  • Osób słabowidzących, które powiększają interfejs i potrzebują przewidywalnych obszarów aktywnych.
  • Wszystkich użytkowników, którzy mogą przypadkowo aktywować złą ikonę w ciasnym układzie.

Dobry przykład

Dobry interfejs nie musi być wielki i toporny. Wystarczy, że realny obszar aktywny ma co najmniej 24 na 24 px CSS albo mniejsze cele mają wystarczający odstęp od innych celów.

  • Ikona może wyglądać na 16 px, ale przycisk wokół niej ma aktywny obszar co najmniej 24 na 24 px.
  • Małe cele mają odstęp od innych małych celów zgodny z zasadą 24-pikselowego koła z WCAG.
  • Paginacja ma większy padding albo kontenery zapewniające odpowiedni odstęp.
  • Akcje w tabeli są pogrupowane w menu albo mają większe przyciski zamiast ciasnego rzędu ikon.
  • Przyciski zamykania, rozwijania, filtrowania i usuwania mają realny obszar aktywny, nie tylko małą ikonę.

Zły przykład

Zły wzorzec upycha kilka małych akcji obok siebie i zakłada, że użytkownik zawsze trafi idealnie.

  • Ikony 16 na 16 px są jedynym obszarem kliknięcia.
  • W tabeli obok siebie są małe akcje: edytuj, usuń, pobierz, podgląd.
  • Paginacja ma ciasne numery stron bez paddingu i odstępów.
  • Mały przycisk „x” zamyka okno, ale aktywny jest tylko sam znak.
  • Kontrolki mapy, kalendarza albo filtrów są małe i ustawione jedna przy drugiej.
  • Linki na liście są tak blisko siebie, że łatwo kliknąć niewłaściwy.

Przykłady kodu

Kod — HTML

<button class="icon-button" type="button">
  <span aria-hidden="true">×</span>
  <span class="sr-only">Zamknij panel</span>
</button>

Kod — CSS

.icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 4px;
}

Ikona może być mała, ale przycisk ma większy obszar aktywny. Użytkownik nie musi trafić dokładnie w sam znak.

Kod — HTML

<ul class="row-actions">
  <li><button type="button">Edytuj</button></li>
  <li><button type="button">Pobierz</button></li>
  <li><button type="button">Usuń</button></li>
</ul>

Kod — CSS

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

Odstęp między akcjami zmniejsza ryzyko przypadkowego kliknięcia sąsiedniego przycisku.

Kod — CSS

.tiny-actions button {
  height: 16px;
  margin: 0;
  padding: 0;
  width: 16px;
}

To zły przykład. Przyciski są mniejsze niż 24 na 24 px i nie mają odstępu. W takim układzie łatwo trafić w złą akcję.

Kod — HTML

<nav aria-label="Strony wyników">
  <ol class="pagination">
    <li><a href="/wyniki?page=1">1</a></li>
    <li><a href="/wyniki?page=2" aria-current="page">2</a></li>
    <li><a href="/wyniki?page=3">3</a></li>
  </ol>
</nav>

Kod — CSS

.pagination {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.pagination a {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
}

Paginacja ma minimalny obszar aktywny i odstęp. Jeśli wizualnie numery mają być drobne, można powiększyć aktywny obszar przez padding albo kontener.

Przykład graficzny

Źle

E U P

Małe cele są bardzo blisko siebie. Łatwo trafić w złą akcję.

Ryzykownie

E U P

Cele są trochę większe, ale aktywny obszar i odstęp nadal są niejasne.

Dobrze

E U P

Obszary aktywne mają co najmniej 24 na 24 px albo czytelny odstęp.

To jest statyczny schemat. Pokazuje różnicę między ciasnymi małymi celami a większym lub wyraźnie odsuniętym obszarem aktywnym.

Jak sprawdzić

  1. Znajdź wszystkie cele aktywne obsługiwane wskaźnikiem: linki, przyciski, ikony, suwaki, elementy mapy, paginację i kontrolki w tabelach.
  2. Sprawdź realny obszar aktywny, nie tylko widoczny rysunek ikony.
  3. Zmierz, czy cel ma co najmniej 24 na 24 px CSS.
  4. Jeśli cel jest mniejszy, sprawdź odstęp od innych celów według zasady 24-pikselowego koła opisanej w WCAG.
  5. Sprawdź, czy istnieje równoważny większy cel dla tej samej funkcji na tej samej stronie.
  6. Oceń wyjątki ostrożnie: link w zdaniu, kontrolka przeglądarki, prezentacja istotna albo prawnie wymagana.
  7. Przetestuj widok na mobile, przy powiększeniu i w miejscach z ciasnymi listami akcji.
  8. Jeśli użytkownik może łatwo trafić w sąsiedni cel, powiększ obszar aktywny albo dodaj odstęp.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część małych przycisków, linków i kontrolek,
  • część ciasno ustawionych celów w DOM,
  • style CSS wskazujące małe wymiary, np. `width: 16px`,
  • brak etykiet albo nazw dostępnych przy kontrolkach ikonowych.

Automat nie oceni pewnie

  • rzeczywistego obszaru aktywnego po wszystkich stylach i stanach,
  • czy mniejszy cel ma wystarczający odstęp według zasady z WCAG,
  • czy działa wyjątek dla linku w zdaniu albo kontrolki przeglądarki,
  • czy równoważny większy cel wykonuje dokładnie tę samą funkcję,
  • czy układ po responsywnym przełamaniu nadal ma bezpieczne odstępy.

Typowe błędy

  • Ikony 16 na 16 px jako jedyny obszar kliknięcia.
  • Kilka małych ikon akcji w tabeli bez odstępu.
  • Ciasna paginacja z małymi numerami stron.
  • Mały przycisk `x` bez większego obszaru aktywnego.
  • Małe kontrolki mapy, kalendarza albo filtrów ustawione jedna przy drugiej.
  • Linki na liście albo w stopce tak blisko siebie, że łatwo kliknąć niewłaściwy.
  • Powierzanie bezpieczeństwa tylko powiększeniu przeglądarki, zamiast poprawić obszar aktywny w CSS.
  • Projektowanie tylko pod mysz, bez sprawdzenia dotyku i rysika.

Powiązane kryteria