Wymaganie WCAG A/AA Priorytet: Umiarkowane
Przyciski i linki są za małe, by wygodnie je dotknąć
Niektóre przyciski lub linki są mniejsze niż 24 na 24 piksele i znajdują się zbyt blisko sąsiednich elementów.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Klienci na telefonach oraz osoby z drżeniem rąk lub ograniczoną sprawnością dłoni trafiają w niewłaściwy kolor, rozmiar lub przycisk ilości. Prowadzi to do błędnych zamówień i frustracji.
Kogo to dotyczy
- osoby robiące zakupy na telefonie
- osoby z niepełnosprawnością ruchową
- starsi klienci
- osoby obsługujące telefon jedną ręką
Jak to naprawić
Zapewnij elementom interaktywnym rozmiar co najmniej 24×24 piksele CSS albo zostaw tyle miejsca, by okrąg o średnicy 24px wyśrodkowany na każdym małym elemencie nie dotykał innego elementu. Sprawdź próbki kolorów, przyciski ilości, ikony zamknięcia i paginację. Linki wewnątrz zdań są z tego wyłączone.
W Shopify
Zwykle próbki wariantów, przyciski ilości lub ikony w motywie. Zwiększ rozmiary lub odstępy (padding) w CSS motywu; sprawdź też widżety aplikacji.
W Shoptet (CZ)
Zwykle próbki lub ikony w szablonie. Zwiększ rozmiar lub padding przez opcje własnego kodu CSS.
W PrestaShop
Zwykle próbki atrybutów, przyciski ilości lub ikony w motywie. Zwiększ rozmiar lub padding w pliku custom CSS motywu.
W WooCommerce
Zwykle próbki wariantów, pola ilości lub ikony z motywu albo wtyczek. Zwiększ rozmiar lub padding w CSS motywu potomnego.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 2.5.8 (AA) Target Size (Minimum) |
| EN 301 549 4.1.1 | 9.2.5.8 |
Automatyczny test: reguła axe-core target-size.
dequeuniversity.com, github.com, www.w3.org, www.etsi.org
Podobne testy
-
Niektóre nagłówki to tylko pogrubiony lub duży tekst
WCAG 1.3.1 A
-
Niektóre grafiki wektorowe nie mają opisu tekstowego
WCAG 1.1.1 A
-
Niektóre linki nie mówią, dokąd prowadzą
WCAG 2.4.4 A
-
Osadzona treść nie ma nazwy
WCAG 4.1.2 A