Alt tekst: opiši značenje ili funkciju slike.
Alt tekst prvenstveno pruža tekstualnu alternativu kada slika nije dostupna. Takođe pomaže pretraživaču da razume predmet slike, ali ne treba svaku sliku pretvarati u listu brenda, modela, boje, materijala i ključnih reči.
Kako se bira alt vrednost?
| Vrsta slike | Pristup |
|---|---|
| Informativna fotografija | Kratko opiši informaciju koju slika dodaje kontekstu. |
| Funkcionalna slika/link | Opiši akciju ili destinaciju, ne samo izgled. |
| Dekorativna ili redundantna | Koristi alt="". |
| Složeni grafikon | Kratak alt i potpuna informacija u tekstu/tabeli. |
| Slika teksta | Prenesi tekst ako nije već prisutan kao pravi tekst. |
Da li naziv fajla mora da ponavlja alt tekst?
Ne. Treba da bude kratak i opisni kada je praktično, ali Google ga opisuje kao veoma blag signal. Stabilnost URL-a i kontekst stranice često su važniji od mehaničkog preimenovanja svake slike.
Primer u ovom sajtu
U testu dve patike alt tekst opisuje razliku u kadru zato što je ta razlika tema sekcije. Na produktnoj stranici isti vizual bi mogao da zahteva tačan, stvarni model i boju.
Isti vizual, tri različita alt teksta
Ne postoji tačan alt tekst za sliku samu po sebi. Postoji tačan alt tekst za sliku na toj stranici, u toj sekciji, u toj ulozi.
Uzmimo istu fotografiju crne patike na svetloj pozadini i stavimo je u tri konteksta.
| Gde stoji | Alt tekst | Zašto |
|---|---|---|
| Produktna stranica | Nike Pegasus 41, muška patika za trčanje, crna | Korisnik bira proizvod; tačan model i boja su informacija koju traži |
| Tekst o testu vizuelne pretrage | Crna patika za trčanje izdvojena na svetloj studijskoj pozadini | Tema je kadar i pozadina, ne model; naziv modela bi bio šum |
| Dekorativna slika u zaglavlju bloga | alt="" | Ne dodaje informaciju; čitač ekrana treba da je preskoči |
Ista slika, tri ispravna rešenja. Zato pravilo „uvek navedi brend, model i boju“ ne postoji — u drugom redu bi to bilo pogrešno.
Koliko dugačak alt tekst treba da bude?
Onoliko koliko je potrebno da prenese informaciju ili funkciju, i ni reč više. Za većinu slika to je jedna kratka rečenica.
Predugačak alt tekst je problem pristupačnosti pre nego SEO problem. Čitač ekrana ga izgovara u celini, bez mogućnosti da ga preskoči na sredini. Nabrajanje deset atributa pretvara jednu sliku u dugačku pauzu u čitanju.
| Primer | Ocena |
|---|---|
patika | Prekratko — ne kaže ništa što kontekst već ne kaže |
Crna patika za trčanje na svetloj pozadini | Dobro za većinu konteksta |
patika trcanje crna muska sportska obuca jeftino kupovina online Srbija | Nabrajanje ključnih reči; šteti pristupačnosti i ne pomaže |
Šta alt tekst ne može da uradi
- Ne može da nadomesti ono što slika ne pokazuje. Ako se na fotografiji ne vidi materijal, pisanje materijala u alt ne čini sliku informativnijom — ta informacija pripada tekstu stranice.
- Ne zamenjuje natpis ispod slike. Alt je alternativa za one koji sliku ne vide;
figcaptiončitaju svi. Za informaciju koja je važna svima koristi natpis. - Ne rangira sliku sam po sebi. Kontekst stranice, okolni tekst i naslov sekcije nose više težine nego alt atribut.
- Ne pomaže ako je slika ključni sadržaj u obliku teksta. Cenovnik kao slika ostaje nedostupan, koliko god alt bio dobar.
Provera u pet koraka
- Isključi prikaz slika u pregledaču. Ako stranica i dalje ima smisla, alt tekstovi rade svoj posao.
- Pročitaj alt naglas u kontekstu rečenice pre slike. Ako zvuči kao ponavljanje, slika je verovatno dekorativna.
- Prebroj dekorativne slike sa nepraznim alt-om. Ikone, razdelnici i pozadine gotovo uvek treba da imaju
alt="". - Proveri slike koje su linkovi. Njihov alt mora da opisuje destinaciju, ne izgled.
- Nađi slike sa tekstom. Taj tekst mora postojati i kao pravi tekst na stranici.
SVG, ikone i grafika koja nije <img>
Umetnuti SVG nema alt atribut. Alternativni tekst mu se daje kroz role="img" i <title>, ili kroz aria-label.
Ovo je najčešće previđen slučaj, jer se SVG ubacuje direktno u HTML i vizuelno izgleda kao slika, ali za čitač ekrana to je grupa geometrijskih oblika.
<svg viewBox="0 0 100 100" role="img" aria-labelledby="ikona-naslov">
<title id="ikona-naslov">Preuzmi cenovnik u PDF formatu</title>
<path d="…"/>
</svg>Za složenije dijagrame dodaje se i <desc> sa dužim opisom, povezan preko aria-labelledby koji navodi oba identifikatora. Dijagrami na ovom sajtu rađeni su tako.
| Slučaj | Rešenje |
|---|---|
| Umetnuti SVG koji nosi značenje | role="img" + <title>, po potrebi <desc> |
| Umetnuti SVG kao ukras | aria-hidden="true" i focusable="false" |
SVG učitan kroz <img src="/…svg"> | Običan alt atribut, kao za svaku sliku |
| Ikonski font | aria-hidden="true" na ikoni, tekst u susednom elementu |
| Slika kao CSS pozadina | Nema alternative; ako nosi značenje, ne sme biti pozadina |
<canvas> | Tekstualni sadržaj unutar elementa kao rezerva |
alt, aria-label i title — šta se kada koristi
alt je za <img>. aria-label je za elemente koji nemaju vidljiv tekst, poput dugmeta sa ikonom. title nije alternativa ni za jedno od to dvoje.
title atribut se prikazuje kao oblačić pri prelasku mišem, ne postoji na dodirnim ekranima i čitači ekrana ga nedosledno obrađuju. Nikada ga ne koristi kao jedini nosilac informacije.
| Element | Ispravno |
|---|---|
| Slika u sadržaju | <img src="/…" alt="Opis"> |
| Dugme sa ikonom, bez teksta | <button aria-label="Zatvori"> |
| Link sa slikom i tekstom | Slika dobija alt="", jer tekst linka već opisuje destinaciju |
| Link samo sa slikom | alt opisuje destinaciju, ne izgled slike |
Poslednja dva reda su izvor čestog dupliranja. Kada logo u zaglavlju stoji unutar linka ka početnoj i pored njega nema teksta, njegov alt treba da glasi kao naziv sajta — to je destinacija. Ako pored njega već stoji tekst „Početna“, logo dobija prazan alt.
Složeni grafikoni i dugački opisi
Grafikon koji prenosi podatke ne može stati u jednu rečenicu. Kratak alt imenuje šta grafikon prikazuje, a puna informacija ide u tekst ili tabelu koju vide svi.
Loše rešenje je nabijanje svih brojeva u alt. Čitač ekrana tada izgovara niz brojeva bez strukture, bez mogućnosti da se vrati ili uporedi.
Dobro rešenje ima tri sloja: alt koji imenuje grafikon, figcaption koji izvodi zaključak, i tabela ili pasus sa podacima. Na ovom sajtu tako je urađen grafikon udela AI prikaza u kontrolnoj studiji — ispod njega stoji tabela sa istim brojevima.
| Sloj | Sadržaj |
|---|---|
alt | Šta grafikon prikazuje i koje su krajnje vrednosti |
figcaption | Zaključak koji čitalac treba da izvuče |
| Tabela ili tekst | Svi podaci, dostupni svima i pretraživi |
Alt tekst u katalozima koji se generišu iz baze
Kada se hiljade slika generišu iz baze, alt tekst se ne piše ručno nego kroz šablon. Šablon mora imati rezervnu vrednost i ograničenje dužine, inače proizvodi prazne ili beskrajne opise.
alt = [brend, model, tip_proizvoda, boja]
.filter(nije_prazno)
.join(", ")
|| naziv_proizvodaTri pravila koja ovaj šablon poštuje. Prvo, redosled ide od najspecifičnijeg ka najopštijem, jer se opis čita s početka. Drugo, prazna polja se izbacuju umesto da ostave dvostruke zareze. Treće, postoji rezervna vrednost kada su sva polja prazna.
| Problem | Posledica | Rešenje |
|---|---|---|
| Isti alt na svim slikama proizvoda | Pet fotografija istog artikla ne razlikuju se ničim | Dodaj ugao ili detalj: „sa strane“, „đon“, „u nošenju“ |
| Alt sadrži šifru artikla | Čitač ekrana izgovara niz cifara | Šifra ide u tekst stranice, ne u alt |
| Prazan alt kada polje u bazi nedostaje | Slika postaje nedostupna | Rezervna vrednost u šablonu |
| Alt duži od dvesta znakova | Duga pauza u čitanju | Ograniči broj polja u šablonu |
Kako se problem otkriva na celom sajtu
Ručna provera radi na deset stranica, ne na hiljadu. Za veći sajt problem se otkriva pretragom izvornog koda.
# slike bez alt atributa
grep -rn '<img' --include="*.html" . | grep -v 'alt='
# umetnuti SVG bez role ili aria-hidden
grep -rn '<svg' --include="*.html" . | grep -v 'role=\|aria-hidden'
# alt koji sadrži naziv fajla
grep -rno 'alt="[^"]*\.\(jpg\|png\|webp\)"' --include="*.html" .Treća komanda otkriva najčešći trag automatske obrade — alt vrednost koja je zapravo naziv datoteke. To znači da alt nikada nije napisan, samo popunjen.
Česta pitanja
Da li svaka slika mora da ima alt tekst?
Svaka slika mora da ima alt atribut, ali dekorativne slike treba da imaju prazan alt. Izostavljanje atributa i prazan atribut nisu isto — prazan alt govori čitaču ekrana da sliku preskoči.
Da li alt tekst treba da sadrži ključne reči?
Ne kao cilj. Ako je pojam prirodan deo tačnog opisa, on će se pojaviti sam. Nabrajanje ključnih reči šteti pristupačnosti i ne donosi korist.
Koja je razlika između alt teksta i natpisa ispod slike?
Alt je alternativa za one koji sliku ne vide. Natpis čitaju svi. Informaciju koja je važna svim posetiocima stavi u natpis, ne u alt.
Da li naziv fajla mora da ponavlja alt tekst?
Ne. Opisan naziv je koristan kada je praktičan, ali ga Google opisuje kao veoma blag signal. Stabilnost URL-a slike je važnija od preimenovanja.