Objaśnienie KS 2.5.5:Rozmiar celu (ulepszone) (Poziom AAA)
W skrócie
- Cel
- Sterowanie jest łatwiejsze, zwłaszcza na ekranach dotykowych.
- Co zrobić
- Ustaw niestandardowe cele o wymiarach co najmniej 44 na 44 piksele.
- Dlaczego to jest ważne
- Niektórzy ludzie nie mogą dotykać małych obiektów.
Intencja
Intencją tego kryterium sukcesu jest pomoc użytkownikom, którzy mogą mieć problemy z aktywacją małego celu z powodu drżenia rąk, ograniczonej zręczności lub z innych powodów. Jeśli cel jest zbyt mały, trafienie w cel może być trudne. Myszy i podobne urządzenia wskazujące mogą być trudne w użyciu dla tych użytkowników, a większy cel bardzo pomoże im w uzyskaniu pozytywnych wyników na stronie internetowej.
Dotyk jest szczególnie problematyczny, ponieważ jest to mechanizm wprowadzania danych o małej precyzji. Użytkownikom brakuje takiego samego poziomu precyzyjnej kontroli, jak w przypadku wejść, takich jak mysz lub rysik. Palec jest większy niż wskaźnik myszy i zazwyczaj zasłania użytkownikowi widok dokładnej lokalizacji na ekranie, która jest dotykana/aktywowana.
Problem może być jeszcze bardziej skomplikowany w przypadku witryn responsywnych/mobilnych, które muszą obsługiwać różne rodzaje precyzyjnych i zgrubnych danych wejściowych (np. witryna, do której można uzyskać dostęp zarówno na tradycyjnym komputerze stacjonarnym/laptopie za pomocą myszy, jak i na tablecie lub telefonie komórkowym z ekranem dotykowym).
Chociaż to kryterium określa minimalny rozmiar docelowy, zaleca się stosowanie większych rozmiarów, aby zmniejszyć możliwość niezamierzonych działań. Jest to szczególnie istotne, jeśli spełniony jest którykolwiek z poniższych warunków:
- kontrolka jest często używana;
- wyniku interakcji nie można łatwo cofnąć;
- kontrolka jest umieszczona w miejscu, w którym trudno będzie ją dosięgnąć, lub w pobliżu krawędzi ekranu;
- kontrolka jest częścią zadania sekwencyjnego.
Korzyści
- Użytkownicy korzystający z urządzenia mobilnego, w którym ekran dotykowy jest podstawowym sposobem interakcji
- Użytkownicy z niepełnosprawnością ruchową, taką jak drżenie rąk
- Użytkownicy, którzy mają trudności z ruchami motorycznymi
- Użytkownicy, którzy uzyskują dostęp do urządzenia jedną ręką
- Użytkownicy z dużymi palcami lub obsługujący urządzenie tylko częścią palca lub kostki
- Użytkownicy, którzy mają słaby wzrok, mogą lepiej widzieć cel
Przykłady
-
Przykład 1: Przyciski
Na ekranie znajdują się trzy przyciski, a obszar docelowy każdego przycisku to 44 na 44 piksele CSS.
Powiązane zasoby
Zasoby służą wyłącznie celom informacyjnym. Nie należy traktować ich jako zaleceń.
- Apple touch target size recommendations (Zalecenia dotyczące rozmiaru celu dotyku Apple)
- Windows UWP Guidelines for touch targets (Wskazówki dotyczące platformy UWP systemu Windows dotyczące docelowych obiektów dotyku)
- Google Material Design Touch targets (Cele dotykowe w Google Material Design)
- web.dev Accessible tap targets (web.dev Dostępne cele stuknięcia)
- Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF) (Opuszki ludzkich palców do badania mechaniki zmysłu dotyku (PDF))
- One-Handed Thumb Use on Small Touchscreen Devices (Obsługa kciukiem jedną ręką na małych urządzeniach z ekranem dotykowym)
Techniki
Każdy numerowany element w tej sekcji reprezentuje technikę lub kombinację technik, które Grupa Robocza WCAG uważa za wystarczające do spełnienia tego kryterium sukcesu. Nie jest jednak konieczne stosowanie tych konkretnych technik. Aby uzyskać informacje na temat stosowania innych technik, zobacz Objaśnienie technik dla kryteriów sukcesu WCAG, szczególnie w sekcji „Inne techniki”.
Techniki wystarczające
Wybierz poniżej sytuację, która pasuje do Twojej treści. Każda sytuacja obejmuje techniki lub kombinacje technik, które są znane i udokumentowane jako wystarczające w danej sytuacji.
- Zapewnienie, że cele dotykowe mają co najmniej 44 na 44 piksele CSS.
- Zapewnienie mechanizmu zmiany wielkości celów dotykowych niezależnie od powiększenia
Techniki pomocnicze
Chociaż nie jest to wymagane do uzyskania zgodności, należy rozważyć następujące dodatkowe techniki, aby zwiększyć dostępność treści. Nie wszystkie techniki mogą być stosowane lub byłyby skuteczne we wszystkich sytuacjach.
- Zapewnienie, że łącza śródliniowe posiadają wystarczająco duży rozmiar pola aktywacji
Błędy
Poniżej wymieniono typowe błędy, które Grupa Robocza WCAG uważa za niespełnienie tego kryterium sukcesu.
- Niespełnienie kryterium sukcesu 2.5.5 z powodu rozmiaru celu mniejszego niż 44 na 44 piksele CSS
Kluczowe pojęcia
obszar wyświetlacza, który zaakceptuje akcję wskaźnika, taki jak obszar interaktywny komponentu interfejsu użytkownika
Uwaga
Jeżeli dwa lub więcej celów dotykowych nakładają się na siebie, pokrywający się obszar nie powinien być uwzględniany przy pomiarze wielkości celu, chyba że nakładające się cele wykonują tę samą czynność lub otwierają tę samą stronę.
jeżeli taki element zostanie usunięty, może to całkowicie zmienić informację lub funkcjonalność treści, a informacja i funkcjonalność nie mogą zostać osiągnięte w inny sposób, zapewniający zgodność
fragment treści internetowej odbierany przez użytkownika jako pojedyncza kontrolka dla określonej funkcji
Uwaga
Wiele komponentów interfejsu użytkownika może być implementowanych w postaci pojedynczego elementu. Tutaj komponenty nie są związane z konkretną techniką programistyczną, a raczej z tym, co użytkownik odbiera jako pojedynczą kontrolkę.
Uwaga
Do komponentów interfejsu użytkownika należą elementy formularzy i linków, jak również komponenty generowane przez skrypty.
Uwaga
To, co jest tutaj rozumiane jako „komponent” lub „komponent interfejsu użytkownika” jest również czasami nazywane „elementem interfejsu użytkownika”.
kąt widzenia wynoszący około 0,0213 stopnia
Piksel CSS jest kanoniczną jednostką miary dla wszystkich długości i pomiarów w CSS. Jednostka ta jest niezależna od gęstości i różni się od rzeczywistych pikseli sprzętowych obecnych na wyświetlaczu. Programy użytkownika i systemy operacyjne powinny zapewnić, że piksel CSS jest ustawiony jak najbliżej wartości i jednostek piksela referencyjnego zdefiniowanego w CSS Values and Units Module Level 3 reference pixel [[css3-values]], który uwzględnia fizyczne wymiary wyświetlacza oraz zakładaną odległość oglądania (czynniki, których autorzy treści nie mogą określić).
dane wejściowe z urządzenia, które może kierować określone współrzędne (lub zestaw współrzędnych) na ekranie, takie jak mysz, pióro lub kontakt dotykowy
Uwaga
Zobacz także Pointer Events definition for "pointer" [[pointerevents]].