# Imaginile trebuie să aibă text alternativ

<https://www.fixreports.com/ro/issues/image-alt>

WCAG 1.1.1 Non-text Content · Nivelul A

Imaginilor le lipsește textul alternativ, așa că utilizatorii de cititoare de ecran nu știu ce arată.

## 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
1. Adăugați în CMS sau în șablon o descriere scurtă și specifică în textul alternativ al fiecărei imagini.
2. 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ță”).
3. Imaginile decorative ar trebui să aibă un atribut alt gol (alt=""), astfel încât cititoarele de ecran să le omită.

### Pe Shopify
1. Î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.
2. 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ță”).
3. Imaginile decorative ar trebui să aibă un atribut alt gol (alt=""), astfel încât cititoarele de ecran să le omită.

### Pe WooCommerce și WordPress
1. Î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.
2. 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ță”).
3. 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.

## Surse
- Documentația regulii axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Înțelegerea criteriului WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content