Salt la conținut
Pandus
ro Schimbați limba
Meniu

Cerință WCAG A/AA Prioritate: Grav

Zonele clicabile ale unei imagini nu au descriere

Pagina folosește o hartă de imagine (o singură imagine împărțită în mai multe zone clicabile), iar unele zone nu au un text care să spună unde duc.

Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.

De ce contează pentru clienții tăi

Utilizatorii de cititoare de ecran aud doar „link” sau adresa unui fișier, de exemplu pe un banner cu linkuri către categorii diferite sau pe un tabel de mărimi împărțit pe zone. Nu pot alege zona potrivită și pot rata oferte sau pagini de produs.

Pe cine afectează

  • clienții nevăzători
  • utilizatorii de cititoare de ecran
  • utilizatorii de control vocal

Cum se remediază

Adăugați fiecărui element <area> cu href un text alternativ scurt care numește destinația, de exemplu alt="Încălțăminte damă". Și mai bine, înlocuiți harta de imagine cu linkuri sau butoane obișnuite deasupra ori dedesubtul imaginii, care funcționează mai bine și pe mobil.

În Shopify

Rar în temele Shopify. De obicei provine din HTML vechi lipit într-o pagină, un articol de blog sau o descriere de produs ori dintr-o aplicație pentru hărți de imagine. Editați HTML-ul în editor sau cereți dezvoltatorului aplicației să adauge text alternativ fiecărei zone.

În Shoptet (CZ)

Rar în șabloanele Shoptet. De obicei este HTML inserat într-o pagină sau descriere din administrare; adăugați textul alternativ acolo sau apelați la un partener Shoptet dacă acel cod face parte din șablon.

În PrestaShop

De obicei HTML lipit în pagini CMS sau descrieri de produs ori un modul de bannere. Adăugați text alternativ fiecărui <area> în editorul din back-office sau în șablonul modulului.

În WooCommerce

De obicei HTML vechi în pagini sau descrieri de produs ori un plugin pentru hărți de imagine sau „hotspot-uri”. Adăugați text alternativ fiecărei zone în editor sau în setările pluginului ori semnalați problema autorului pluginului.

Standarde

Standarde
StandardPunct
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

Verificare automată: regula axe-core area-alt. dequeuniversity.com, github.com, www.w3.org, www.w3.org

Verificări similare

Toate regulile pe care le verificăm