Ce verifică această regulă
Verifică dacă elementele <img> au text alternativ sau un rol none ori presentation.
De ce contează
WCAG 1.1.1 cere un text alternativ pentru imaginile cu semnificație. Fără el, un utilizator de cititor de ecran nu își poate da seama ce produs arată o fotografie.
Cum se remediază
Pe orice site
- Adăugați în CMS sau în șablon o descriere scurtă și specifică în textul alternativ al fiecărei imagini.
- Descrieți ce contează pentru un cumpărător: numele produsului, culoarea și unghiul prezentat (de exemplu „Geantă tote din pânză, oliv, vedere din față”).
- Imaginile decorative ar trebui să aibă un atribut alt gol (alt=""), astfel încât cititoarele de ecran să le omită.
Pe Shopify
- În panoul de administrare Shopify, deschideți Products > [produs] > Media, faceți clic pe fiecare imagine și completați câmpul „Alt text”. Pentru imaginile din secțiuni, deschideți Online Store > Themes > Customize și setați textul alternativ al imaginii în setările secțiunii.
- Descrieți ce contează pentru un cumpărător: numele produsului, culoarea și unghiul prezentat (de exemplu „Geantă tote din pânză, oliv, vedere din față”).
- Imaginile decorative ar trebui să aibă un atribut alt gol (alt=""), astfel încât cititoarele de ecran să le omită.
Pe WooCommerce și WordPress
- În WordPress, deschideți Media > Library (Media > Bibliotecă), selectați fiecare imagine și completați câmpul „Alternative Text” (Text alternativ). Imaginile din galeria produselor folosesc același câmp.
- Descrieți ce contează pentru un cumpărător: numele produsului, culoarea și unghiul prezentat (de exemplu „Geantă tote din pânză, oliv, vedere din față”).
- Imaginile decorative ar trebui să aibă un atribut alt gol (alt=""), astfel încât cititoarele de ecran să le omită.
Cum se verifică remedierea
- Scanați din nou paginile afectate.
- Folosiți un cititor de ecran (VoiceOver: Cmd+F5 pe Mac) pentru a auzi cum sunt anunțate imaginile produselor.
Cum o detectează FixReports
Scanarea noastră rulează regula axe-core image-alt într-un browser Chrome real pe fiecare pagină testată și raportează fiecare element cu erori, cu pagina, markupul și, unde este cazul, o captură de ecran.
Un test automat confirmă că această problemă anume este prezentă. Nu poate spune dacă restul paginii este accesibil: unele bariere apar doar atunci când o persoană verifică pagina.