Przejdź do treści
Pandus
pl Zmień język
Menu

Wymaganie WCAG A/AA Priorytet: Poważne

Klikalne obszary obrazka nie mają opisu

Strona używa mapy obrazka (jednej grafiki podzielonej na kilka klikalnych obszarów), a niektóre obszary nie mają tekstu mówiącego, dokąd prowadzą.

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 czytników ekranu słyszą tylko „link” albo adres pliku, np. na banerze z linkami do różnych kategorii lub na tabeli rozmiarów podzielonej na strefy. Nie mogą wybrać właściwego obszaru i mogą przegapić promocje lub strony produktów.

Kogo to dotyczy

  • niewidomi klienci
  • osoby korzystające z czytników ekranu
  • osoby sterujące urządzeniem za pomocą głosu

Jak to naprawić

Każdy element <area> z atrybutem href powinien mieć krótki tekst alternatywny nazywający cel, np. alt="Buty damskie". Jeszcze lepiej zastąpić mapę obrazka zwykłymi linkami lub przyciskami nad grafiką albo pod nią; działają one też lepiej na urządzeniach mobilnych.

W Shopify

W motywach Shopify rzadkie. Zwykle pochodzi ze starego HTML wklejonego do strony, wpisu na blogu lub opisu produktu albo z aplikacji do map obrazków. Należy poprawić HTML w edytorze lub poprosić twórcę aplikacji o dodanie tekstu alternatywnego dla każdego obszaru.

W Shoptet (CZ)

W szablonach Shoptet rzadkie. Zwykle to HTML wklejony do strony lub opisu w panelu; tam należy dodać tekst alternatywny, a jeśli kod jest częścią szablonu, warto zwrócić się do partnera Shoptet.

W PrestaShop

Zwykle HTML wklejony do stron CMS lub opisów produktów albo moduł banerów. Tekst alternatywny dla każdego <area> należy dodać w edytorze panelu administracyjnego lub w szablonie modułu.

W WooCommerce

Zwykle stary HTML na stronach lub w opisach produktów albo wtyczka do map obrazków lub „hotspotów”. Tekst alternatywny dla każdego obszaru można dodać w edytorze lub ustawieniach wtyczki albo zgłosić problem autorowi wtyczki.

Normy

Normy
NormaPunkt
WCAG 2.2 2.4.4 (A) Link Purpose (In Context)
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 2.4.4 (A) Link Purpose (In Context)
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 2.4.4 (A) Link Purpose (In Context)
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.2.4.4
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.2.4.4
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.2.4.4
ДСТУ EN 301 549 2022 9.4.1.2

Automatyczny test: reguła axe-core area-alt. dequeuniversity.com, github.com, www.w3.org, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy