Atributele ALT (ALT Text)

Un rezumat al unei imagini de pe o pagină web care poate fi citit atât de utilizatori, cât și de motoarele de căutare.

Ce este alt text?

Atributele alt (sau alt text) sunt atribute HTML și reprezintă descrieri ale unei imagini. Aceste descrieri ajută persoanele cu dizabilități să înțeleagă despre ce este vorba în fotografiile afișate pe site-ul tău. Aceste descrieri nu sunt afișate utilizatorilor care nu au deficiențe de vedere. Totodată, ajută și motoarele de căutare să înțeleagă mai bine imaginile din site.

Importanța ALT Text pentru experiența utilizatorilor

Alt Text este o componentă vitală a accesibilității site-ului tău.

Utilizatorii cu probleme de vedere sau cognitive navighează pe internet cu ajutorul unui cititor de ecran pentru nevăzători care convertește textul de pe o pagină în format audio. Cititoarele de ecran nu pot face acest lucru în cazul imaginilor, așa că, în schimb, citesc utilizatorului textul ALT al imaginii. Acest lucru îi permite utilizatorului să descopere conținutul și scopul unei imagini, chiar dacă nu o poate vedea direct.

Dacă textul alternativ al imaginii lipsește sau este prost scris, utilizatorul nu beneficiază de conținutul sau funcționalitatea oferită de imagine.

În unele cazuri, un ALT text necorespunzător poate avea un impact negativ semnificativ asupra experienței utilizatorilor cu deficiențe de vedere sau cognitive. De exemplu, dacă folosești ALT textul imaginilor pentru a îndesa cuvinte cheie, nu vei oferi niciun beneficiu persoanelor cu dizabilități. Mai mult, vei împiedica acești utilizatori să descopere conținutul relevant de pe pagina ta.

Utilizarea textului alternativ mai este important și în următoarele situații:

Probleme tehnice: În situațiile în care o imagine nu se poate încărca din cauza unor probleme de conexiune, se va afișa textul ALT, oferind utilizatorilor o idee despre ceea ce ar fi trebuit să reprezinte fotografia.

Importanța ALT Text pentru SEO

Utilizarea ALT Text pentru imagini nu te va ajuta în mod direct să îți îmbunătățești poziționarea în SERP. Cu toate acestea, textul alternativ pentru imagini este o parte deosebit de importantă a accesibilității, ceea ce înseamnă că utilizatorii cu deficiențe de vedere sau cognitive vor avea o experiență mult mai bună pe un site care utilizează ALT text pentru imagini.

De asemenea, utilizarea textului alternativ poate contribui la optimizarea pentru motoarele de căutare astfel:

  • Căutare de imagini: Cu un text ALT relevant, motoarele de căutare pot înțelege contextul unei imagini, ceea ce face ca aceasta să aibă mai multe șanse să apară în rezultatele căutării de imagini.
  • Relevanța paginii web: Textul ALT sporește relevanța conținutului unei pagini pentru crawlere, îmbunătățind potențial clasamentul general al paginii.
  • Reducerea ratei de respingere (bounce rate): Atunci când imaginile nu se încarcă, iar utilizatorii văd în schimb textul ALT, este mai puțin probabil ca aceștia să părăsească imediat site-ul, reducând rata de respingere (sau crescând engagement-ul), ceea ce reprezintă un semnal pozitiv pentru SEO.

Cum scrii corect textul alternativ?

Trebuie să pleci de la premisa și să îți amintești permanent că scopul ALT text este de a ajuta persoanele cu deficiențe de vedere sau cognitive. Nu este o idee bună să folosești textul alternativ pentru a încerca sa manipulezi poziționarea, adăugând o sumedenie de cuvinte cheie, fără să spui nimic. Nu numai că nu te va ajuta, dar îți poate face rău pe termen lung.

Astfel, iată ce trebuie să ai în vedere atunci când scrii alt text pentru imaginile din site-ul tău:

1. Textul trebuie să prezinte conținutul și funcția imaginilor

Textul alternativ, împreună cu titlul imaginii, caption-ul și corpul textului, ar trebui să surprindă întregul conținut și funcționalitate a paginii. Această practică garantează că nu se va pierde din conținut sau din funcții în cazul în care imaginea nu poate fi afișată.

Descrie imaginea cât mai complet, fără a scrie, însă un roman. Încearcă să reliefezi cât mai bine posibil esența imaginii.

Spre exemplu, dacă ai un magazin online cu îmbrăcăminte, este bine să ai în vedere ca ALT text-ul imaginii tale de produs să evidențieze culoarea, aspectul general, lungimea mânecii, sistemul de închidere, sau potrivirea.

2. Textul trebuie să fie concis

Nu scrie foarte mult. Este probabil ca multe dintre informații să se regăsească în conținutul scris. Folosește propoziții cât mai scurte posibil – nu folosi fraze lungi sau cuvinte complicate. Alt text-ul ar trebui, ideal să aibă 125 de caractere. Nu este o limită impusă, însă majoritatea cititoarelor de ecran se opresc la 125 de caractere.

3. Nu folosi în alt text „poză cu…”

Motoarele de căutare și cititoarele de ecran știu deja că este vorba despre descrierea unei imagini. Nu este nevoie să mai explici că este vorba despre o fotografie.

Pe de altă parte, dacă ai un eCommerce în cadrul căruia vinzi picturi sau tablouri, este o idee bună ca alt text-ul imaginilor să informeze despre tipul de artă vizuală înfățișată (i.e. grafică în creion, pictură ulei pe pânză, etc.).

4. Evită aglomerarea de cuvinte cheie

Folosirea multor cuvinte cheie irelevante în textul alt ar putea afecta experiența utilizatorului.

În plus, umplutura cu cuvinte cheie poate fi un semnal pentru motoarele de căutare că site-ul tău este un spam și nu este foarte util.

5. Uneori este ok să nu completezi nimic la ALT text

În cazul în care conținutul și scopul unei imagini sunt descrise în mod adecvat în caption sau în corpul textului, este acceptabil să lași alt textul imaginii necompletat.

Atunci când o imagine este inclusă pe o pagină doar în scop decorativ, alt textul poate fi lăsat necompletat, deoarece conținutul imaginii nu are nicio legătură cu conținutul paginii.

Prin urmare, ar trebui să te concentrezi, întotdeauna, mai întâi pe o descriere veridică a imaginii și apoi (dacă este posibil) să adaugi la aceasta un cuvânt-cheie relevant.

Adăugarea textului ALT la imaginile din site

În HTML5, toate elementele de tip imgine din pagină trebuie să aibă un atribut alt în care editorul poate include un text alternativ. Atributele Alt pot fi (și uneori ar trebui) lăsate goale, dar nu ar trebui să lipsească niciodată complet dintr-o imagine.

Dacă codezi direct în HTML, va trebui să incluzi un atribut alt atunci când adaugi un element de tip imagine în pagină. Linia ta de cod va arăta cam așa:

<img src="pisicamea.jpg" alt="pisica mea" width="1240" height="960">

Dacă folosiți un CMS, cum ar fi WordPress, Wix sau similar, ar trebui să existe o opțiune în interfața pentru utilizator care să permită introducerea textului Alt, fie atunci când încarci o imagine în CMS, fie atunci când aceasta este adăugată la o pagină.

Când și cum folosești ALT text în funcție de tipul imaginii

Conținutul optim al unui text ALT de bună calitate depinde în mare măsură de scopul și de conținutul unei imagini.

Un bun punct de plecare este să te întrebi ce text ar putea înlocui imaginea dacă aceasta nu ar exista. În plus, diferențierea în funcție de tipul imaginii poate ajuta la formularea atributului ALT într-un mod care să susțină eforturile SEO.

  • Imagini de sine stătătoare: conținut grafic care se prezintă de la sine. De exemplu, fotografii din galerii și albume, capturi de ecran demonstrative ale aplicațiilor, imagini amuzante, imagini care se descarcă sau se cumpără, etc.. Textul alternativ oferă o descriere scurtă, dar pertinentă a imaginii, inclusiv cel mai important cuvânt cheie din punct de vedere SEO, pentru căutarea de imagini.
  • Imagini integrate în text: Aceste elemente grafice înlocuiesc un cuvânt sau câteva cuvinte din motive estetice sau pentru a economisi spațiu. Acestea includ emoticoane, simboluri și pictograme. Atributul ALT corespunzător conține textul pe care imaginea îl înlocuiește – de exemplu, „emoji care face cu ochiul”.
  • Imagine explicativă: grafice, statistici, capturi de ecran explicative. În cazul în care un grafic rezumă doar textul din jur, fără a furniza informații noi, textul ALT rămâne gol. În caz contrar, acesta va cuprinde un sumar al conținutului imaginii. Pentru explicații mai lungi, textul normal este mai potrivit, deoarece este util pentru toți utilizatorii.
  • Grafică decorativă fără valoare informațională: imagini de fundal, rame, linii și alte elemente decorative. Deoarece aceste imagini sunt utilizate exclusiv pentru estetica vizuală, vei lăsa câmpul de alt text gol.