Wymaganie WCAG A/AA Priorytet: Drobne
Klikalny obraz działa tylko z myszą
Strona korzysta z mapy obrazu po stronie serwera: obrazu-linku, w którym serwer na podstawie dokładnego miejsca kliknięcia decyduje, co otworzyć, np. stara mapa sklepów stacjonarnych lub klikalna grafika katalogu.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby korzystające z klawiatury i czytników ekranu nie mogą wybrać obszaru obrazu, a nic nie informuje ich, jakie to obszary. Wszystko, co kryje się za tymi kliknięciami, pozostaje dla nich niedostępne.
Kogo to dotyczy
- osoby korzystające z klawiatury
- osoby korzystające z czytników ekranu
- osoby sterujące urządzeniem za pomocą głosu
Jak to naprawić
Mapę obrazu po stronie serwera (<img ismap> wewnątrz linku) należy zastąpić zwykłymi linkami tekstowymi lub przyciskami dla każdego celu. Jeśli potrzebny jest klikalny obraz, warto użyć mapy po stronie klienta (<map> z elementami <area>, każdy z tekstem alternatywnym) lub osobnych obrazów-linków. Pomaga też tekstowa lista tych samych linków obok obrazu.
W Shopify
Bardzo rzadko; motywy Shopify nie stosują tej techniki. Jeśli się pojawi, należy poszukać starego HTML wklejonego na stronę lub przestarzałej aplikacji i zastąpić go zwykłymi linkami.
W Shoptet (CZ)
Bardzo rzadko; szablony nie stosują tej techniki. Jeśli się pojawi, pochodzi z HTML wklejonego na stronę; należy zastąpić go zwykłymi linkami.
W PrestaShop
Bardzo rzadko; zwykle stary HTML na stronie CMS lub przestarzały moduł. Należy zastąpić go zwykłymi linkami w treści lub w szablonie .tpl modułu.
W WooCommerce
Bardzo rzadko; zwykle stary HTML na stronie, przestarzała wtyczka lub treść przeniesiona ze starszej witryny. Należy zastąpić go zwykłymi linkami lub wtyczką map obrazu, która dodaje tekst alternatywny do każdego obszaru.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 2.1.1 (A) Keyboard |
| WCAG 2.1 | 2.1.1 (A) Keyboard |
| WCAG 2.0 | 2.1.1 (A) Keyboard |
| EN 301 549 4.1.1 | 9.2.1.1 |
| EN 301 549 3.2.1 | 9.2.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.1.1 |
Automatyczny test: reguła axe-core server-side-image-map.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Niektóre nagłówki to tylko pogrubiony lub duży tekst
WCAG 1.3.1 A
-
Niektóre przełączniki i pola wyboru nie mają nazwy
WCAG 4.1.2 A
-
Duże tabele mają komórki bez nagłówków
WCAG 1.3.1 A
-
Niektóre linki nie mówią, dokąd prowadzą
WCAG 2.4.4 A