WCAG 2.5.5: Wielkość celu (rozszerzona)

Wstęp

Kryterium sukcesu WCAG 2.5.5, znane jako Wielkość celu (rozszerzona), jest częścią wytycznych dostępności treści internetowych (WCAG) na poziomie AAA. Jego głównym celem jest zapewnienie, że wszystkie interaktywne elementy na stronie internetowej, takie jak przyciski, linki i kontrolki formularzy, są wystarczająco duże, aby użytkownicy mogli łatwo je aktywować. Zgodnie z tym kryterium, obszar docelowy każdego takiego elementu powinien mieć wymiary co najmniej 44×44 piksele CSS.

Kryterium to ma na celu poprawę użyteczności dla szerokiej gamy użytkowników, szczególnie tych, którzy mogą mieć trudności z precyzyjnym celowaniem, np. osoby z niepełnosprawnościami ruchowymi, osoby używające urządzeń dotykowych oraz osoby z niską precyzją myszki.

Dlaczego to kryterium jest ważne?

Zapewnienie odpowiedniej wielkości elementów interaktywnych ma kluczowe znaczenie dla dostępności i komfortu użytkowania. Oto dlaczego:

• Użytkownicy z niepełnosprawnościami ruchowymi: Osoby cierpiące na drżenie rąk, osłabienie mięśni, artretyzm lub inne schorzenia, które wpływają na kontrolę motoryczną, mogą mieć trudności z precyzyjnym klikaniem lub dotykaniem małych celów. Większe cele znacznie ułatwiają im nawigację i interakcję.
• Użytkownicy urządzeń dotykowych: Na smartfonach, tabletach i innych urządzeniach z ekranem dotykowym palce są głównym narzędziem interakcji. Palce są znacznie mniej precyzyjne niż wskaźnik myszy, co sprawia, że małe przyciski są frustrujące i trudne do trafienia. Minimalna wielkość 44×44 piksele CSS jest ogólnie uznawana za dobry rozmiar dla palców.
• Użytkownicy z trudnościami poznawczymi: Większe cele są łatwiejsze do zlokalizowania i zrozumienia, co zmniejsza obciążenie poznawcze i frustrację, szczególnie dla osób z dysleksją lub innymi trudnościami w uczeniu się.
• Użytkownicy z niską precyzją myszki: Nawet osoby bez formalnych niepełnosprawności mogą mieć problemy z małymi celami, zwłaszcza w niestabilnych środowiskach (np. podczas podróży) lub korzystając z niestandardowych urządzeń wskazujących.
• Użytkownicy z niskim wzrokiem: Chociaż nie jest to główny cel, większe cele mogą być łatwiejsze do zidentyfikowania i namierzenia dla osób z pewnymi rodzajami osłabienia wzroku.
• Ogólna użyteczność: Większe cele poprawiają ogólne doświadczenie użytkownika dla każdego, prowadząc do szybszej i bardziej bezproblemowej interakcji.

Wymagania Kryterium Sukcesu 2.5.5 Wielkość Celu (Rozszerzona)

Kryterium 2.5.5 określa, że obszar docelowy dla interaktywnych elementów musi wynosić co najmniej 44×44 piksele CSS, chyba że spełniony jest jeden z poniższych wyjątków:

• Wbudowane: Cel jest częścią akapitu lub bloku tekstu. W takim przypadku, jeśli element jest linkiem tekstowym w ramach zdania, jego wielkość jest determinowana przez wielkość tekstu i nie musi spełniać wymogu 44×44 pikseli, pod warunkiem, że jest odpowiednio czytelny i możliwy do aktywowania. Przykład: link do słownika w zdaniu.
• Kontrolowane przez agenta użytkownika: Wielkość celu jest określana przez przeglądarkę (agenta użytkownika), a autor strony nie zmodyfikował jej rozmiaru. Przykład: domyślne kontrolki formularzy, których rozmiar nie został zmieniony przez CSS autora.
• Niezbędne: Określona prezentacja celu jest niezbędna do przekazania informacji. Przykład: mapa, gdzie interaktywne punkty są bardzo gęsto rozmieszczone i powiększenie ich do 44×44 pikseli zniekształciłoby jej sens. W takich przypadkach zaleca się jednak zapewnienie alternatywnego sposobu interakcji.
• Równoważne: Cel jest dostępny poprzez link lub kontrolkę na tej samej stronie, która spełnia wymóg minimalnej wielkości 44×44 pikseli CSS. Przykład: mała ikona filtru, która po kliknięciu otwiera modalne okno z większymi przyciskami filtrującymi.

Ważne jest, aby pamiętać, że mowa jest o pikselach CSS (jednostkach logicznych), a nie o pikselach fizycznych ekranu. Gwarantuje to, że cele skalują się poprawnie niezależnie od gęstości pikseli urządzenia.

Praktyczne wytyczne dla zapewnienia zgodności

Projektowanie

• Zacznij od dużych celów: W fazie projektowania, domyślnie twórz interaktywne elementy o rozmiarze co najmniej 44×44 piksele CSS. Łatwiej jest później zmniejszyć element, jeśli to konieczne (z uwzględnieniem wyjątków), niż powiększać istniejący mały element.
• Uwzględnij marginesy/dopełnienia: Pamiętaj, że wielkość celu obejmuje nie tylko widoczny obszar elementu, ale także jego obszar klikalny/dotykalny. Często osiąga się to poprzez odpowiednie użycie padding (dopełnienia) w CSS.
• Projekt responsywny: Upewnij się, że rozmiary celów są utrzymane na wszystkich rozdzielczościach i urządzeniach. Testuj na różnych rozmiarach ekranu.
• Spójność: Staraj się utrzymywać spójne rozmiary dla podobnych interaktywnych elementów w całym interfejsie.

Implementacja

• Użyj CSS dla wymiarów: Stosuj właściwości CSS takie jak min-width i min-height, width, height oraz padding, aby zapewnić, że elementy mają odpowiednie rozmiary.
• Przykład CSS:

  .button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px; /* Dodatkowy padding dla większego obszaru dotyku/kliku */
  }
  
  .icon-wrapper {
    display: inline-block;
    padding: 10px; /* Zapewnia obszar 44x44px dla ikony o rozmiarze np. 24x24px */
    border: 1px solid transparent;
  }
  
  /* Alternatywnie dla przycisków o zmiennej zawartości */
  .large-target-link {
    display: inline-block;
    padding: 12px; /* Daje wystarczający bufor wokół tekstu */
    line-height: 1.2;
  }

• Nie polegaj wyłącznie na ikonie: Jeśli używasz ikon jako interaktywnych elementów, upewnij się, że nie tylko sama ikona jest odpowiednio duża, ale także obszar, który reaguje na interakcję. Często oznacza to umieszczenie ikony w większym, niewidzialnym kontenerze lub dodanie do niej dopełnienia.
• Uwaga na wbudowane kontrolki: Jeśli używasz standardowych kontrolek HTML (<input>, <select>, <textarea>), upewnij się, że ich domyślne rozmiary (lub te, które ustawiasz) spełniają kryterium.

Testowanie

• Testowanie manualne: Przetestuj interfejs za pomocą różnych metod wprowadzania: myszy, ekranu dotykowego (palcem), klawiatury (przyciski są często aktywowane przez klawisz Enter/Spacja, ale ważne jest, aby obszar skupienia był widoczny i wystarczająco duży).
• Narzędzia deweloperskie przeglądarki: Użyj inspektora elementów w przeglądarce, aby sprawdzić rzeczywiste wymiary elementów interaktywnych (w szczególności min-width, min-height oraz padding).
• Narzędzia do kontroli dostępności: Niektóre automatyczne narzędzia mogą wykrywać małe cele, ale mogą nie uwzględniać wszystkich wyjątków ani nieprawidłowo interpretować kontekstu (np. linków wbudowanych w tekst). Zawsze weryfikuj wyniki manualnie.

Przykłady

Prawidłowe implementacje

<button class="my-button">Kliknij mnie</button>

.my-button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
}

<a href="#" class="icon-link-wrapper" aria-label="Szukaj">
  <img src="search.svg" alt="Ikona wyszukiwania" width="24" height="24">
</a>

.icon-link-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.icon-link-wrapper:hover, .icon-link-wrapper:focus {
  background-color: #e0e0e0;
}

<input type="checkbox" id="agree">
<label for="agree">Zgadzam się z regulaminem</label>

label {
  display: block; /* Etykieta zajmuje całą dostępną szerokość */
  padding: 10px 0;
  cursor: pointer;
  min-height: 44px;
  /* Upewnij się, że same pole checkboxa również jest odpowiednio duże lub etykieta je 'otacza' */
}

input[type="checkbox"] {
  margin-right: 8px; /* Odstęp między checkboxem a tekstem */
  min-width: 24px;
  min-height: 24px;
  /* W niektórych przeglądarkach domyślne style checkboxa mogą być małe, 
     wymagając dodatkowego stylu lub 'oszukiwania' poprzez <label> */
}

Nieprawidłowe implementacje

<button class="small-button">OK</button>

.small-button {
  width: 30px;
  height: 20px;
  font-size: 12px;
  padding: 2px 5px;
}

<a href="#" aria-label="Edytuj">
  <img src="edit.svg" alt="Edytuj" width="24" height="24">
</a>

/* Brak stylów CSS zapewniających minimalny rozmiar 44x44px dla linku */

Najlepsze praktyki i często spotykane pułapki

Najlepsze praktyki

• Idź na całość: Jeśli to możliwe, projektuj cele większe niż minimalne 44×44 piksele CSS. Im większy cel, tym łatwiejsza interakcja.
• Duże odstępy: Zapewnij wystarczające odstępy (marginesy) między sąsiadującymi interaktywnymi elementami, aby zmniejszyć ryzyko przypadkowego kliknięcia niewłaściwego celu.
• Wizualne wskaźniki: Upewnij się, że wskaźniki skupienia (:focus) są dobrze widoczne i obejmują cały obszar docelowy elementu interaktywnego.
• Użyteczność dotykowa: Zawsze projektuj z myślą o użytkownikach dotykowych – pamiętaj, że palec jest znacznie grubszy niż wskaźnik myszy.

Często spotykane pułapki

• Mylenie rozmiaru wizualnego z obszarem dotyku: Czasami projektant lub deweloper może sądzić, że mała ikona jest wystarczająca, ponieważ wizualnie „pasuje”. Jednak to obszar, który reaguje na kliknięcie/dotknięcie, jest kluczowy. Użycie padding jest często pomijane.
• Ignorowanie małych ikon: Ikony (np. edycji, usuwania, wyszukiwania) są często projektowane jako małe elementy. Należy upewnić się, że ich obszar docelowy jest odpowiednio powiększony.
• Niepoprawne stosowanie wyjątków: Wyjątek „wbudowane” dotyczy głównie linków tekstowych w ciągu zdania. Nie należy go stosować do samodzielnych przycisków lub ikon. Wyjątek „niezbędne” jest bardzo rzadki i powinien być stosowany z ostrożnością.
• Responsywny design: Elementy mogą być odpowiednie na komputerach stacjonarnych, ale stać się zbyt małe na urządzeniach mobilnych, jeśli nie zostaną odpowiednio przeskalowane lub przeprojektowane.

Dodatkowe zasoby

• WCAG 2.1 Understanding Success Criterion 2.5.5: Target Size (Enhanced) (W języku angielskim)
• WCAG 2.1 Quick Reference: 2.5.5 Target Size (Enhanced) (W języku angielskim)