Text alternativ pentru imagini: reguli, exemple bune și rele

O imagine spune cât o mie de cuvinte, dar numai pentru cei care o văd. Pentru o persoană care folosește un cititor de ecran, imaginea fără descriere este o pauză în text, un „imagine" fără sens sau, mai rău, numele fișierului citit literă cu literă: „IMG subliniere 4521 punct jpg". Textul alternativ rezolvă această problemă: este o scurtă descriere pe care o citește tehnologia asistivă în locul imaginii.

Textul alternativ ajută și în alte situații: când imaginea nu se încarcă din cauza unei conexiuni slabe, când un utilizator a dezactivat imaginile, când un motor de căutare vrea să înțeleagă ce se află în poză. Dar scopul principal rămâne accesibilitatea.

Ce este textul alternativ (alt text)

În HTML, textul alternativ se scrie în atributul alt al etichetei de imagine:

<img src="rucsac.jpg" alt="Rucsac gri din poliester cu două buzunare laterale">

Un cititor de ecran va spune ceva de genul „imagine, rucsac gri din poliester cu două buzunare laterale". Utilizatorul află ce este în poză fără să o vadă.

Este important de reținut că alt nu este același lucru cu titlul imaginii și nici cu legenda (textul vizibil de sub poză). Legenda este pentru toți cititorii, iar alt este pentru cei care nu pot vedea imaginea. În WordPress, câmpul „Text alternativ" apare în biblioteca media și în editorul de articole.

Regula de aur: ce ar trebui să afle cineva care nu vede imaginea?

Nu există o formulă universală, pentru că descrierea corectă depinde de rolul imaginii în pagină. Aceeași fotografie poate avea alt text diferit în două contexte. Fă-ți o întrebare simplă: dacă ar trebui să explic cuiva la telefon ce rol are această imagine aici, ce i-aș spune?

Vom împărți imaginile în câteva categorii.

1. Imagini informative

Imaginile care transmit o informație utilă pentru înțelegerea paginii. Descrie ceea ce contează, nu fiecare detaliu.

• Rău: alt="imagine" sau alt="poza 1".
• Rău: alt="DSC_4521.jpg".
• Bine: alt="Echipa de vânzări în sala de ședințe, în jurul unei mese", dacă poza ilustrează echipa.
• Mai bine (dacă e importantă contextual): alt="Maria Ionescu, director comercial, zâmbind la birou", într-o pagină despre echipă.

2. Imagini decorative

Dacă o imagine are doar rol estetic (o linie ornamentală, un fundal, o pictogramă fără semnificație proprie care repetă textul de lângă ea), cititorul de ecran nu trebuie să o menționeze. Soluția este un atribut alt gol:

<img src="linie.png" alt="">

Atenție: alt="" (prezent, dar gol) este diferit de lipsa completă a atributului. Dacă atributul lipsește, unele cititoare de ecran citesc numele fișierului. Cu alt="" imaginea este ignorată.

3. Imagini funcționale (butoane și linkuri)

Dacă imaginea este un buton sau un link, alt textul trebuie să spună ce face, nu cum arată.

• Rău: alt="lupă" pentru butonul de căutare.
• Bine: alt="Caută".
• Rău: alt="săgeată dreapta" pentru butonul de pagina următoare.
• Bine: alt="Pagina următoare".
• Pentru un logo cu link către prima pagină: alt="Numele firmei, pagina principală".

4. Imagini cu text

Dacă o imagine conține text (un banner cu „-20% la încălțăminte"), alt textul trebuie să includă textul respectiv. Totuși, evită să pui text important doar în imagini: este mai greu de citit, nu se mărește bine și nu se adaptează la ecrane mici. Preferă textul real, în pagină.

5. Grafice, diagrame și infografice

Pentru imaginile complexe, o scurtă descriere în alt nu este suficientă. Procedează în două trepte:

• în alt: o propoziție care spune ce este și concluzia principală, de exemplu „Grafic cu bare care compară vizitele pe lunile ianuarie–iunie";
• în text, lângă imagine: o descriere mai amplă sau un tabel cu datele. Astfel orice cititor poate accesa informația completă.

6. Fotografii de produs

Într-un magazin online, alt textul poate descrie tipul produsului, culoarea, materialul și, dacă e cazul, unghiul. Nu repeta descrierea întreagă a produsului și nu bloca textul cu cuvinte-cheie.

• Bine: alt="Geacă de ploaie bleumarin cu glugă, văzută din față".
• Rău: alt="geacă ploaie geacă ieftină geacă barbați geacă damă promoție".

Umplerea cu cuvinte-cheie este o practică proastă și pentru utilizatori, și pentru motoarele de căutare, care pot trata astfel de texte ca spam.

Reguli practice de scriere

1. Fii concis. Un text alternativ de obicei are una sau două propoziții scurte. Nu există o limită oficială strictă, dar dacă ai nevoie de un paragraf, mută o parte a descrierii în textul paginii.
2. Nu începe cu „imagine cu" sau „fotografie cu". Cititorul de ecran anunță deja că este o imagine. Fac excepție cazurile în care tipul imaginii contează (o pictură, o schiță, o captură de ecran).
3. Nu repeta ce e deja scris în apropiere. Dacă legenda spune „Echipa noastră la târgul din Cluj", alt textul poate fi mai scurt sau gol, ca să nu se citească de două ori.
4. Pune punct la final (sau măcar o punctuație), ca cititorul să facă o mică pauză.
5. Include informația relevantă din context. Un grafic într-un raport financiar are nevoie de concluzia graficului, nu doar de „grafic".
6. Folosește limba paginii. Un alt text în engleză pe o pagină românească va fi citit cu pronunție greșită, dacă nu este marcat ca altă limbă.
7. Nu pune informații care nu se văd. Alt textul descrie imaginea, nu adaugă promoții sau afirmații care nu există în imagine.
8. Scrie pentru oameni. Dacă un fragment ar suna ciudat citit cu voce tare, rescrie-l.

Exemple comparate

Cum procedezi pe un site existent

Dacă ai sute de imagini fără text alternativ, nu te apuca de toate deodată.

1. Începe cu imaginile de pe paginile cele mai vizitate: pagina de start, produsele principale, paginile de serviciu.
2. Continuă cu imaginile care funcționează ca butoane sau linkuri, pentru că lipsa lor blochează acțiuni.
3. Marchează imaginile decorative cu alt gol.
4. Pentru restul, stabilește un ritm: de fiecare dată când publici sau actualizezi o pagină, completezi textele alternative.
5. Adaugă un pas în procesul editorial: nicio imagine nu se publică fără text alternativ sau fără decizie explicită de „decorativă".

Instrumentele bazate pe AI pot genera sugestii de descriere pornind de la imagine. Folosește-le ca punct de plecare, nu ca produs final: o sugestie automată poate greși ce este în poză, poate omite contextul (cine e persoana, ce produs este) sau poate fi prea generică. O persoană din echipă ar trebui să citească și să corecteze fiecare text înainte de publicare. Despre testarea rezultatului cu un cititor de ecran vezi ghidul de testare cu tastatura și cititor de ecran.

Text alternativ și SEO

Textul alternativ ajută motoarele de căutare să înțeleagă conținutul imaginii, deci poate contribui indirect la vizibilitatea în căutarea de imagini. Dar nu scrie alt text pentru roboți. Dacă descrierea este bună pentru un om, de regulă este potrivită și pentru motoarele de căutare. Formulările exacte despre cum folosește fiecare motor aceste informații se pot schimba în timp, așa că nu construi strategia pe un truc. Obiectivul rămâne claritatea.

Greșeli frecvente

• Lipsa totală a atributului alt. Cititorul de ecran poate citi numele fișierului.
• Descrieri generice precum „imagine", „poză", „fotografie".
• Umplerea cu cuvinte-cheie. Face lectura chinuitoare și poate fi considerată spam.
• Același text pentru toate imaginile. O galerie cu 20 de poze, fiecare cu „produs", nu ajută pe nimeni.
• Alt text lung pentru imagini decorative. Zgomot inutil pentru cititorul de ecran.
• Alt text pentru butoane care descrie aspectul, nu funcția („săgeată", în loc de „Pagina următoare").
• Neglijarea imaginilor din fundal puse prin CSS: dacă au rol informativ, informația trebuie dată și în text.
• Publicarea textelor generate automat, fără verificare.

Întrebări frecvente

Cât de lung poate fi un text alternativ?

Nu există o limită universală, dar de obicei ținta e de o propoziție sau două, cu informațiile esențiale. Pentru imagini complexe, mută descrierea lungă în textul paginii.

Ce pun la imaginile decorative?

Un atribut alt gol (alt=""). Astfel cititoarele de ecran le ignoră. Nu șterge atributul complet.

Trebuie să descriu și poza de la baza articolului?

Depinde de rol. Dacă imaginea ilustrează doar atmosfera și nu aduce informație, poate fi decorativă. Dacă arată ceva relevant (un produs, o locație, un rezultat), descrie-o.

Pot folosi același text alternativ ca la titlul imaginii?

Nu automat. Titlul imaginii este un atribut diferit, folosit pentru informații suplimentare, iar alt textul trebuie să descrie conținutul sau funcția imaginii. Verifică dacă textul este util și nu doar o copie a numelui fișierului.

Cum te ajută Leono Accessibility

Leono Accessibility poate sugera texte alternative pentru imaginile din biblioteca media, folosind AI, iar tu le verifici și le editezi înainte să fie publicate. Citește mai multe pe pagina generator de alt text pentru imagini cu AI. Pentru contextul mai larg al cerințelor, vezi și WCAG 2.2 explicat simplu.

Concluzie

Un text alternativ bun răspunde la întrebarea „ce ar trebui să știe cineva care nu vede imaginea?". Descrie rolul imaginii, nu fiecare pixel; spune funcția butoanelor; lasă gol atributul pentru decor; mută explicațiile lungi în text. Nu căuta perfecțiunea: câteva rânduri bine alese, scrise cu grijă, fac un site mult mai prietenos pentru mulți utilizatori.