Ako ste ikada imali problema s učitavanjem stranice ili niste mogli vidjeti slike, onda ste vjerojatno upoznati s ALT tekstom slike. ALT tekst slike je opisna tekstualna oznaka koja se prikazuje kada se slika ne može prikazati na web stranici. Osim toga, ALT tekst slike pomaže tražilicama da razumiju o čemu se radi na vašoj web stranici.
Što je ALT tekst?
ALT tekst je koristan za ljude koji ne mogu vidjeti slike(osobe s oštećenim vidom), kao i za tražilice koje indeksiraju web stranice. Dakle, ako želite poboljšati svoju dostupnost i SEO, važno je imati pravilno napisan ALT tekst.
Ali kako ga optimizirati za konverziju?
Kako napisati učinkoviti ALT tekst
Evo nekoliko savjeta kako napisati opisnu i informativnu ALT tekst:
- Budite sažeti, ali specifični
- Koristite relevantne ključne riječi bez prekomjerne uporabe
- Opisujte sadržaj i funkciju slike
- Razmislite o kontekstu slike na stranici
IV. Uobičajene pogreške koje treba izbjegavati
Evo nekoliko uobičajenih grešaka pri pisanju ALT teksta, na koje trebate paziti:
- Korištenje generičkih fraza poput “slika” ili “fotografija”
- Kopiranje naziva datoteke slike kao ALT teksta
- Pisanje irelevantnih ili zavaravajućih opisa
- Keyword stuffing
Dobar ALT tekst:
- Opisuje sadržaj slike na specifičan i informativan način, primjerice: “Crna mačka leži na prozoru s pogledom na gradsku noćnu pozadinu”
- Koristi relevantne ključne riječi koje se odnose na sadržaj slike i temu web stranice
- Pomaže korisnicima koji ne mogu vidjeti sliku da razumiju što se nalazi na njoj
Loš ALT tekst:
- Koristi generičke fraze poput “slika”, “fotografija” ili “grafika”
- Ne opisuje sadržaj slike na specifičan način, primjerice: “Mačka”
- Ne služi kao pomoć ljudima koji ne mogu vidjeti sliku
Znate li prepoznati dobar ALT tekst?
<img src="slika.jpg" alt="Crna mačka leži na prozoru s pogledom na gradsku noćnu pozadinu">
<img src="slika.jpg" alt="Mačka">
<img src="hamburger.jpg" alt="Jedan ukusni hamburger u mekanom pecivu s salatom, rajčicom i preljevom ljutog umaka na vrhu">
<img src="hamburger.jpg" alt="Slika hrane">
Složeniji oblici ALT tekst slika
Ikone:
Alt tekst za ikone trebao bi biti ekvivalentan informacijama koje ikona predstavlja, poput “Preuzmite PDF” ili “Posjetite našu Facebook stranicu”.
Slike kao veze:
Kad koristite sliku kao poveznicu-link na drugu stranicu, alt tekst trebao bi opisati što će se dogoditi kada se klikne na sliku (umjesto kako izgleda). Na primjer, alt tekst za sliku pitanja koje vodi na stranicu za pomoć trebao bi biti “Kontaktirajte podršku” umjesto “pitanje”.
Slike s kompleksnim informacijama:
Važno je razmisliti kako prenijeti informacije koje se nalaze na slikama, naročito ako se radi o slikama koje sadrže podatke poput infografika. Kako bi se osigurala pristupačnost informacija svim korisnicima, potrebno je koristiti opisni tekst, odnosno alt tekst i prateći tekst na stranici. Primjer stranice koja koristi pristupačnu infografiku možete pronaći na WebAIM web stranici.
Kontekst ALT taga:
Kada se radi o dodavanju alternativnog teksta za sliku, važno je uzeti u obzir kontekst u kojem se slika pojavljuje.
Kad koristite sliku u članku “Automobili jučer i danas”, alternativni tekst bi trebao opisati automobil na slici i kako se on odnosi na temu članka odnosno paragraf kod kojeg ste stavili sliku.
Međutim, ako se ista slika koristi u drugom kontekstu, na primjer za članak o klimatskim promjenama, alternativni tekst bi trebao opisati kako se automobil na slici odnosi na klimatske promjene ili na neki drugi način povezan s temom članka.
<!-- Slika u kontekstu članka o automobilima -->
<h1>Članak o automobilima</h1>
<p>Ovo je ilustracija automobila:</p>
<img src="slika-automobila.jpg" alt="Crveni sportski automobil vozi se po cesti uz planine">
<!-- Slika u kontekstu članka o klimatskim promjenama -->
<h1>Članak o klimatskim promjenama</h1>
<p>Ovo je ilustracija automobila u kontekstu klimatskih promjena:</p>
<img src="slika-automobila.jpg" alt="Sportski automobil koji zagađuje okoliš vozi se po cesti uz planine">
Važno je imati na umu da alternativni tekst ne samo da pomaže osobama s oštećenjem vida, već i osobama koje koriste čitače zaslona. Stoga, uvijek je potrebno dodati adekvatan alternativni tekst za svaku sliku kako bi se osigurala pristupačnost sadržaja.
Alati za optimizaciju ALT teksta
Postoje alati i resursi koji vam mogu pomoći u optimizaciji ALT teksta:
- Alati za analizu slike koji predlažu ALT tekst na temelju sadržaja slike
- Provjere pristupačnosti koje upozoravaju na nedostajući ili nedovoljan ALT tekst
Postoje alati za provjeru ALT teksta kod slika. Neke od popularnih web stranica koje nude ovu uslugu su “WAVE Web Accessibility Tool” i “WebAIM”.
- https://wave.webaim.org/
- https://webaim.org/
- Accessibility Insights for Web
- Siteimprove Accessibility Checker
Zaključak
Korištenje alt teksta na slikama je poput stavljanja začina u hranu. Bez začina, jelo bi bilo neukusno i bezlično, baš kao i slika bez alt teksta – beskorisna i nepristupačna. Ali, kada dodamo prave začine, hrana postaje ukusna.
