Objaśnienie KS 2.5.8:Rozmiar celu (minimalny) (Poziom AA)
W skrócie
- Cel
- Ułatwiaj aktywację elementów sterujących.
- Co zrobić
- Zapewnij minimalny rozmiar celów lub wystarczające odstępy wokół nich.
- Dlaczego to jest ważne
- Niektóre osoby z niepełnosprawnościami fizycznymi nie mogą klikać małych przycisków znajdujących się blisko siebie.
Intencja
Celem tego kryterium sukcesu jest zapewnienie łatwej aktywacji celów bez przypadkowej aktywacji celów sąsiednich. Użytkownicy z ograniczoną zręcznością oraz ci, którzy mają trudności z precyzyjną motoryką, mają trudności z precyzyjną aktywacją małych celów, gdy inne cele są zbyt blisko. Zapewnienie wystarczającego rozmiaru lub wystarczającego odstępu między celami zmniejszy prawdopodobieństwo przypadkowego uruchomienia niewłaściwego elementu sterującego.
Niepełnosprawności objęte tym wymaganiem obejmują drżenie rąk, spastyczność i porażenie czterokończynowe. Niektóre osoby z niepełnosprawnościami korzystają ze specjalistycznych urządzeń wejściowych zamiast myszy komputerowej lub gładzika. Zazwyczaj tego typu urządzenia wejściowe nie zapewniają takiej dokładności, jak popularne urządzenia wskazujące. Spełnienie tego wymagania zapewnia również łatwiejszą obsługę interfejsów dotykowych.
Uwaga
To kryterium sukcesu określa minimalny rozmiar i, jeśli nie można tego osiągnąć, minimalny odstęp. Nadal możliwe jest posiadanie bardzo małych i trudnych do aktywowania celów, spełniających wymagania tego kryterium sukcesu, pod warunkiem, że cele nie znajdują się zbyt blisko innych sąsiadujących celów. Jednak użycie większych rozmiarów celów pomoże wielu osobom łatwiej korzystać z celów. Jako najlepszą praktykę zaleca się spełnienie co najmniej wymogu minimalnego rozmiaru określonego w Kryterium sukcesu, niezależnie od odstępów. W przypadku ważnych łączy/kontrolek rozważ dążenie do bardziej rygorystycznego KS 2.5.5 Rozmiar celu (rozszerzony).
Wyjątki
Wymagane jest, aby cele miały rozmiar co najmniej 24 na 24 pikseli CSS. Istnieje pięć wyjątków:
- Odstępy: Niewymiarowe cele (mniejsze niż 24 na 24 piksele CSS) są rozmieszczone w taki sposób, że jeśli okrąg o średnicy 24 pikseli CSS jest wyśrodkowany na obwiedni każdego z nich, okręgi nie przecinają innego celu ani okręgu innego niewymiarowego celu.
- Odpowiednik: W przypadkach, gdy element docelowy nie ma rozmiaru odpowiadającego 24 na 24 pikselom CSS, ale istnieje inny element sterujący, który może osiągnąć podstawową funkcję spełniającą minimalny rozmiar, element docelowy można wykluczyć w oparciu o wyjątek „równoważny”.
- Wierszowe: Kryterium sukcesu nie ma zastosowania do elementów docelowych wbudowanych w zdaniach lub gdy rozmiar elementu docelowego jest ograniczony przez wysokość linii tekstu innego niż wiersz z celem. Ten wyjątek jest dozwolony, ponieważ ponowne rozmieszczenie tekstu w oparciu o rozmiar widocznego obszaru uniemożliwia autorom przewidzenie, gdzie mogą być umieszczone względem siebie łącza. Gdy wiele łączy jest osadzonych w blokach tekstu o mniejszych rozmiarach, zapewnienie, że niewymiarowe łącza w sąsiednich wierszach tekstu spełniają wyjątek dotyczący odstępów (ich okrąg o średnicy 24 pikseli CSS nie przecina żadnych innych łączy ani ich okręgów) wymagałoby dużej wysokości linii, która może być niepożądana w wielu kontekstach projektowych.
-
Kontrolka programu użytkownika: Przeglądarki domyślnie renderują niektóre elementy sterujące, takie jak dni miesiąca
w kalendarzu w
<input type="date">. Dopóki autor nie zmodyfikował domyślnych ustawień programu użytkownika, docelowy rozmiarkontrolki programu użytkownika
jest wyłączony. -
Istotny: Jeżeli wielkość i rozmieszczenie celów ma zasadnicze znaczenie dla przekazywanej
informacji, ma zastosowanie wyjątek
niezbędności
. Przykładowo na mapach cyfrowych położenie pinezek jest analogiczne do położenia miejsc pokazanych na mapie. Jeśli wiele pinezek znajduje się blisko siebie, odstępy między pinezkami a sąsiednimi pinezkami będą często mniejsze niż 24 piksele CSS. Istotne jest, aby pinezki znajdowały się we właściwym miejscu na mapie, dlatego obowiązuje wyjątek Istotne. Podobnym przykładem jest interaktywna wizualizacja danych, w której cele są z konieczności gęste. Innym przykładem jest sytuacja, w której przepisy prawa wymagają, aby formularze internetowe zastępowały formularze papierowe, co może nakładać ograniczenia na wielkość celów. W takich jurysdykcjach wszelkie wymogi prawne dotyczące replikacji małych celów można uznać za istotne. Jeżeli ma zastosowanie zasadniczy wyjątek, zdecydowanie zachęca się autorów do zapewnienia równoważnej funkcjonalności za pomocą alternatywnych środków, w zakresie, w jakim jest to praktyczne.
Wymagania dotyczące rozmiaru
Aby cel miał „co najmniej 24 na 24 piksele CSS”, musi istnieć możliwość narysowania pełnego kwadratu o wymiarach 24 na 24 piksele CSS, wyrównanego do osi poziomej i pionowej w taki sposób, że kwadrat całkowicie mieści się w celu (nie rozciąga się poza obszarem celu).
Kwadrat o wymiarach 24 na 24 piksele musi być wyrównany ze stroną, chociaż sam cel może być przekrzywiony.
Jeśli cel nie jest wystarczająco duży, aby można było w nim narysować kwadrat o wymiarach 24 na 24 piksele, uznaje się go za zbyt małyi nie spełnia wymagań dotyczących rozmiaru kryterium sukcesu. Jeśli jednak ma wokół siebie wystarczającą przestrzeń bez sąsiednich celów, może mimo to spełnić kryterium dzięki wyjątkowi odstępów (poniżej).
Wymaganie jest niezależne od współczynnika powiększenia strony; gdy użytkownicy powiększają, rozmiar elementów w pikselach CSS nie zmienia się. Oznacza to, że autorzy nie mogą spełnić tego wymagania, twierdząc, że cel będzie miał wystarczające odstępy lub wystarczający rozmiar, jeśli użytkownik powiększy stronę.
Wymóg nie ma zastosowania do celów, gdy są one zasłonięte przez treść wyświetlaną w wyniku interakcji użytkownika lub skryptowego zachowania treści, na przykład:
- interakcja z polem kombinowanym powoduje wyświetlenie rozwijanej listy sugestii
- aktywacja przycisku powoduje wyświetlenie modalnego okna dialogowego
- treść wyświetla baner plików cookie po załadowaniu strony
- treść wyświetla okno dialogowe „Wypełnij ankietę” po pewnym okresie braku aktywności użytkownika
Wymóg ten ma jednak zastosowanie do celów we wszelkich nowych treściach pojawiających się nad innymi treściami.
Chociaż kryterium sukcesu pomaga przede wszystkim wszystkim użytkownikom ekranów dotykowych, zapewniając rozmiar celu, aby zapobiec przypadkowemu uruchomieniu sąsiednich celów, jest również przydatne dla użytkowników myszy lub pióra. Zmniejsza ryzyko błędnej aktywacji spowodowanej drżeniem lub zmniejszoną precyzją, czy to z powodu zmniejszonej precyzyjnej kontroli silnika, czy niedokładności sygnału wejściowego.
Odstęp
Jeśli minimalny rozmiar celu nie jest spełniony, odstępy mogą przynajmniej poprawić wygodę użytkownika. Jest mniejsze ryzyko przypadkowej aktywacji sąsiedniego celu, jeśli cel nie sąsiaduje bezpośrednio z innym. Urządzenia z ekranem dotykowym i programy użytkownika zazwyczaj korzystają z wewnętrznej heurystyki umożliwiającej identyfikację łącza lub elementu sterującego znajdującego się najbliżej interakcji dotykowej użytkownika – oznacza to, że wystarczające odstępy między obiektami docelowymi mogą działać równie skutecznie, jak sam obiekt o większym rozmiarze.
Gdy cel jest mniejszy niż 24 na 24 piksele CSS, jest niewymiarowy. W tym przypadku sprawdzamy, czy przynajmniej ma wystarczające odstępy, rysując okrąg o średnicy 24 pikseli CSS nad niewymiarowym celem, wyśrodkowany na obwiednicelu. W przypadku celów prostokątnych ramka ograniczająca pokrywa się z samym celem, dlatego okrąg jest umieszczany na środku celu. Jeśli cel nie jest prostokątny – na przykład, jeśli jest przycięty, ma zaokrąglone rogi lub ma bardziej złożony, klikalny kształt SVG – musimy najpierw określić obwiednię, a następnie znaleźć jej środek. Należy pamiętać, że w przypadku kształtów wklęsłych środek obwiedni może znajdować się poza samym celem. Teraz wyśrodkujemy okrąg na środku ramki ograniczającej.
Powtarzamy ten proces dla wszystkich sąsiednich niewymiarowych celów. Aby określić, czy niewymiarowy cel ma wystarczające odstępy (aby uznać wyjątek dotyczący odstępów w tym kryterium sukcesu), sprawdzamy, czy okrąg celu o średnicy 24 pikseli CSS nie przecina innego celu ani okręgu żadnego innego sąsiedniego niewymiarowego celu.
Poniższy przykład przedstawia trzy wersje poziomego rzędu sześciu przycisków opartych na ikonach. W górnym rzędzie wymiary każdego celu wynoszą 24 na 24 piksele CSS, co spełnia to kryterium sukcesu. W drugim rzędzie te same cele mają tylko 20 na 20 pikseli CSS, ale między nimi jest odstęp wynoszący 4 piksele CSS – ponieważ rozmiar docelowy jest mniejszy niż 24 na 24 piksele CSS, należy je ocenić pod kątem wyjątku dotyczącego odstępów w kryterium sukcesu, i przechodzą. W ostatnim rzędzie cele ponownie mają wymiary 20 na 20 pikseli CSS, ale nie ma między nimi odstępu – nie spełniają one wyjątku dotyczącego odstępów, ponieważ podczas rysowania okręgów o średnicy 24 pikseli CSS nad celami, okręgi przecinają się.
Następne dwie ilustracje przedstawiają zestawy przycisków o wysokości zaledwie 16 pikseli CSS. W pierwszym zestawie nie ma celów bezpośrednio nad ani pod przyciskami, więc spełniają. Na drugiej ilustracji znajdują się dalsze przyciski, które zostały ułożone jeden na drugim, co skutkuje niespełnieniem.
Poniższe dwie ilustracje pokazują, jak można dostosować elementy menu, aby odpowiednio
spełnić te wymagania. Na pierwszej ilustracji aktywowano menu O nas
, co pokazuje, że każdy z elementów menu (tekst i dopełnienie) ma wysokość 24 pikseli
CSS. Na drugiej ilustracji to samo menu jest rozwinięte, ale jego elementy mają wysokość
jedynie 18 pikseli CSS.
Poniższy przykład ma jeden duży cel (obraz prowadzący do nowej strony powiązanej z tym obrazem) i bardzo mały drugi cel (kontrolka z ikoną lupy, służąca do otwierania powiększonego podglądu, prawdopodobnie w trybie modalnym, sam obraz). W górnym rzędzie mały cel nakłada się – lub, mówiąc ściślej technicznie – przycina duży cel. Sam mały cel ma rozmiar 24 na 24 piksele CSS, więc spełnia wymaganie. W drugim rzędzie widzimy, że jeśli drugi cel jest mniejszy – w tym przypadku 16 na 16 pikseli CSS – nie spełnia kryterium, ponieważ okrąg o średnicy 24 pikseli CSS, który narysujemy nad małym celem, przetnie duży cel samo.
W poniższym przykładzie mamy te same dwa cele – duży cel i mały cel. Tym razem mały cel dotyka/opiera się o duży cel. Jeśli mały cel jest mniejszy niż 24 na 24 piksele CSS, okrąg o średnicy 24 pikseli CSS, który narysujemy nad małym celem, przetnie sam duży cel, co nie spełni wymagań. Niewymiarowy cel musi być oddalony od dużego celu, aż jego okrąg nie przetnie dużego celu.
Uwaga
Użytkownicy z różnymi niepełnosprawnościami mają różne potrzeby w zakresie rozmiarów kontrolek. Korzystne może być zapewnienie opcji zwiększenia aktywnego obszaru docelowego bez zwiększania widocznego rozmiaru celu. Inną opcją jest zapewnienie mechanizmu kontrolowania gęstości układu, a tym samym zmiany docelowego rozmiaru lub odstępów, lub obu. Może to być korzystne dla szerokiego grona użytkowników. Na przykład użytkownicy z ograniczonym polem widzenia mogą preferować bardziej skondensowany układ z mniejszymi elementami sterującymi, a użytkownicy z innymi formami słabego wzroku mogą preferować duże elementy sterujące.
Korzyści
Posiadanie celów o wystarczającej wielkości – lub co najmniej o wystarczających odstępach między celami – może pomóc wszystkim użytkownikom, którzy mogą mieć trudności z pewnym namierzaniem lub obsługą małych elementów sterujących. Użytkownicy, którzy odnoszą korzyści, obejmują między innymi:
- Osoby korzystające z urządzenia mobilnego, gdzie ekran dotykowy jest głównym sposobem interakcji;
- Osoby korzystające z myszy, rysika lub wprowadzania dotykowego, które mają problemy z poruszaniem się, takie jak drżenie rąk;
- Osoby korzystające z urządzenia w środowiskach narażonych na wstrząsy, np. w transporcie publicznym;
- Użytkownicy myszy, którzy mają trudności z precyzyjnymi ruchami;
- Osoby uzyskujące dostęp do urządzenia jedną ręką;
- Osoby z dużymi palcami lub obsługujące urządzenie tylko częścią palca lub kostki.
Przykłady
- Na ekranie znajdują się trzy przyciski, a docelowy rozmiar każdego przycisku to 24 na 24 piksele CSS. Ponieważ sam rozmiar docelowy wynosi 24 na 24 piksele CSS, nie są wymagane żadne dodatkowe odstępy, kryterium sukcesu zostaje spełnione.
- Rząd przycisków, z których każdy ma poziomą szerokość większą niż 24 piksele CSS, wysokość tylko 20 pikseli CSS i pionowy margines 4 piksele CSS powyżej i poniżej rzędu przycisków. Ponieważ odstępy nad i pod rzędem przycisków są wystarczające, kryterium sukcesu zostaje spełnione.
- Linki w akapicie tekstu mają różne wymiary docelowe. Linki w akapitach tekstu nie muszą spełniać wymagań CSS 24 na 24 piksele, więc kryterium sukcesu spełnia.
Powiązane zasoby
Zasoby służą wyłącznie celom informacyjnym. Nie należy traktować ich jako zaleceń.
- Target size study for one-handed thumb use on small touchscreen devices (Badanie rozmiaru docelowego dla obsługi kciuka 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
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”.
najmniejszy otaczający prosokąt wyrównany do osi poziomej, w którym znajdują się wszystkie punkty kształtu. W przypadku elementów, które zawijają się do wielu wierszy jako część zdania lub bloku tekstu (takich jak łącza hipertekstowe), obwiednia jest oparta na tym, jak komponent wyglądałby w pojedynczym wierszu.
otacza, okala, ogranicza, obejmuje
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ć).
renderowanie treści w sposób, który jest postrzegalny dla użytkownika
oprogramowanie umożliwiające pobieranie i przeglądanie treści internetowych
nieosadzony zasób uzyskany z pojedynczego identyfikatora URI za pomocą protokołu HTTP wraz z wszelkimi innymi zasobami użytymi do renderowania strony w programie użytkownika lub takimi, które potencjalnie mogą być użyte do renderowania
Uwaga
Mimo że każdy z „pozostałych zasobów” mógłby być renderowany razem z podstawowym zasobem, to niekoniecznie muszą być renderowane równocześnie.
Uwaga
W celu zgodności z niniejszymi wytycznymi, zasób nie może być „osadzony” w innym zasobie wchodzącym w zakres oceny zgodności, aby można go było uznać za stronę internetową.
- Sposób, w jaki poszczególne części strony internetowej są ułożone i połączone ze sobą; oraz
- Sposób ułożenia zbioru stron internetowych.
informacje i wrażenia sensoryczne, które mają być przekazywane użytkownikowi za pośrednictwem programu użytkownika, w tym kod lub znaczniki definiujące strukturę, prezentację i interakcje
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]].