WCAG 1.1.1 Conținut non-text

Criteriul de succes 1.1.1 asigură că persoanele care nu pot vedea o imagine primesc totuși informația pe care o transmite aceasta. Utilizatorii de cititoare de ecran aud textul alternativ, la fel ca persoanele la care imaginile nu s-au încărcat. Este de nivelul A, primul criteriu din WCAG, și face parte din EN 301 549 (clauza 9.1.1.1). Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Tot conținutul non-text — imagini, pictograme, grafice, butoane-imagine, elemente SVG — trebuie să aibă un text alternativ care îndeplinește un scop echivalent. Pentru unele tipuri de conținut WCAG cere mai puțin:

• Controale și introducere de date: o imagine care este buton sau acceptă date are nevoie de un nume care descrie scopul ei („Adaugă la favorite”, nu „inimă”).
• Media bazate pe timp (video, audio): textul alternativ trebuie cel puțin să le identifice; subtitrările și descrierile sunt acoperite de 1.2.x.
• Teste care ar deveni invalide sub formă de text și conținut menit să creeze o experiență senzorială (de exemplu o piesă muzicală): cel puțin o identificare descriptivă.
• CAPTCHA: un text alternativ care descrie scopul ei, plus o variantă de CAPTCHA care folosește alt simț (de exemplu audio pe lângă cea vizuală).
• Decor, formatare, conținut invizibil: trebuie implementate astfel încât tehnologiile asistive să le poată ignora — în HTML, alt="" sau o imagine de fundal CSS.

Greșeli tipice într-un magazin online

• fotografii de produs fără alt sau la care se citește numele fișierului (IMG_4021.jpg);
• butoane doar cu pictogramă pentru căutare, coș, cont sau închidere, fără nume accesibil;
• bannere promoționale cu oferta („−30 % în acest weekend”) inclusă în imagine și fără text alternativ;
• insigne de plată și de încredere, tabele de mărimi sau stele de evaluare afișate doar ca imagini;

Cum se verifică

Automat: verificatorul nostru găsește imaginile, câmpurile de tip imagine, obiectele, elementele SVG și elementele cu role="img" care nu au text alternativ, precum și barele de progres și indicatoarele fără nume (regulile image alt, input image alt, SVG image alt și altele conexe). Nu poate aprecia dacă textul alternativ existent este corect, așa că lipsa unei constatări nu înseamnă că criteriul este îndeplinit.

Manual: dezactivați imaginile în browser sau folosiți un cititor de ecran și parcurgeți o pagină de produs. Pentru fiecare imagine întrebați-vă: oferă textul alternativ aceeași informație sau imaginea este decor și rămâne mută? Verificați butoanele-pictogramă navigând la ele cu tasta Tab și ascultând numele lor.

Cum se remediază

• Scrieți textul alternativ în editorul de produse al platformei dumneavoastră (Shopify, WooCommerce și majoritatea celorlalte au un câmp „text alternativ” pentru fiecare element media).
• Descrieți ce contează în context: „Cămașă albastră din in, vedere din spate” în loc de „cămașă”.
• Dați butoanelor-pictogramă o etichetă vizibilă sau un aria-label; ascundeți pictograma în sine de tehnologiile asistive.
• Folosiți alt="" pentru imaginile pur decorative, nu un atribut lipsă.
• Pentru grafice și infografice adăugați un scurt rezumat sau un tabel de date.

Criterii conexe

• 1.4.5 Imagini cu text — folosiți text real în locul textului din imagini.
• 1.2.1 Doar audio și doar video (preînregistrat) — alternative pentru fișierele media.
• Verificare gratuită a unei pagini — găsiți imaginile fără text alternativ de pe site-ul dumneavoastră.

Întrebări frecvente

Are nevoie fiecare imagine de text alternativ conform WCAG?

Fiecare imagine are nevoie de un text alternativ care îndeplinește același scop. Excepția sunt imaginile pur decorative: acestea primesc un atribut alt gol (alt="") pentru ca cititoarele de ecran să le sară.

Ce trebuie să spună textul alternativ al unei fotografii de produs?

Ceea ce cumpărătorul trebuie să afle din imagine: produsul și culoarea, modelul sau detaliul pe care îl arată. Nu începeți cu „imagine cu” și nu repetați cuvânt cu cuvânt titlul produsului dacă acesta se află chiar lângă fotografie.

Intră butoanele-pictogramă sub 1.1.1?

Da. Un control precum lupa, coșul sau pictograma de închidere trebuie să aibă un nume care descrie scopul lui, de exemplu „Căutare” sau „Deschide coșul”. 4.1.2 Nume, rol, valoare adaugă cerințe suplimentare pentru controale.

Poate un instrument automat să verifice textul alternativ?

Poate găsi imaginile, pictogramele și elementele SVG care nu au deloc text alternativ. Nu poate spune dacă textul alternativ existent este corect sau util — pentru asta este nevoie de un om.