Cerință WCAG A/AA Prioritate: Grav
Imaginile nu au descriere text
Unele imagini nu au text alternativ, așa că persoanele care nu le pot vedea nu primesc nicio informație despre ce arată.
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 nu aud nimic sau aud un nume de fișier precum „IMG_2041.jpg” în loc de produs, culoare sau ofertă. Pot rata detalii esențiale și pot pleca spre un magazin care își descrie produsele.
Pe cine afectează
- clienții nevăzători
- utilizatorii de cititoare de ecran
- persoanele cu imaginile dezactivate sau cu conexiune lentă
Cum se remediază
Adăugați un atribut alt fiecărui <img>. Descrieți într-o frază scurtă ce contează pentru cumpărare (produsul, culoarea, un detaliu cheie). Folosiți alt="" pentru imaginile pur decorative, ca să fie omise. Nu repetați „imagine cu” și nu înghesuiți cuvinte cheie.
În Shopify
Adăugați text alternativ la media produselor și la imaginile din secțiunile temei, din panoul de administrare Shopify. Dacă textul alternativ există, dar nu apare în pagină, de obicei șablonului Liquid al temei îi lipsește atributul alt pe eticheta imaginii.
În Shoptet (CZ)
Adăugați descrieri la imaginile produselor și ale bannerelor în panoul de administrare, acolo unde șablonul permite. Dacă șablonul nu le afișează, de obicei este nevoie de o modificare a șablonului prin Shoptet sau printr-un partener Shoptet.
În PrestaShop
Imaginile produselor preiau de obicei alt din legenda imaginii sau din numele produsului setat în back office. Verificați ca șabloanele .tpl ale temei să afișeze atributul alt, inclusiv în module precum sliderele.
În WooCommerce
Completați câmpul Text alternativ în Biblioteca media din WordPress și verificați ca tema sau page builder-ul să îl afișeze. Imaginile inserate de pluginuri sau de slidere pot avea propriile setări pentru alt.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Verificare automată: regula axe-core image-alt.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Pagina folosește markup învechit pentru text care clipește
WCAG 2.2.2 A
-
Textul este greu de citit din cauza contrastului scăzut
WCAG 1.4.3 AA
-
Unele etichete indică elementul greșit
WCAG 4.1.2 A
-
Atributele de accesibilitate au valori greșite
WCAG 4.1.2 A