Kako napisati dobar alt-tekst

Nedostajući alt-atribut svaki alat pronalazi u sekundi. Vrijedi li tekst u njemu, odlučuje prosudba o kontekstu: ista slika u katalogu proizvoda treba drugačiji alt-tekst nego u uputama. Zato dobar alt-tekst počinje pitanjem, a ne pisanjem.

Jedno pitanje: kakvu ulogu ima slika?

• Nosi informaciju koja nigdje drugdje ne piše: opišite informaciju.
• Poveznica je ili gumb: opišite funkciju, a ne motiv.
• Samo ponavlja susjedni tekst ili je čisti ukras: prazan alt-atribut.
• Složena je slika (grafikon, karta, tlocrt): kratka poruka u alt, detalji kao tekst na stranici.

Tipične pogreške

<!-- 1. Kein alt: der Screenreader liest den Dateinamen vor -->
<img src="produkt-4711-final-v2.jpg">

<!-- 2. Alt beschreibt das Bild statt seiner Funktion -->
<a href="/warenkorb">
  <img src="cart.svg" alt="Einkaufswagen-Symbol">
</a>

<!-- 3. Fuellwort statt Information -->
<img src="umsatz-2026.png" alt="Diagramm">

<!-- 4. Dekoration mit Alt-Text: laermt ohne Nutzen -->
<img src="trenner-welle.svg" alt="dekorative Welle">

Ako atribut posve nedostaje, čitači zaslona obično najavljuju naziv datoteke. Ako na ikoni poveznice stoji „ikona košarice“, znate što gledate, ali ne kamo poveznica vodi. Alt-tekst na čistom ukrasu stvara buku bez koristi.

Kako izgleda ispravno

<!-- 1. Inhaltsbild: sagt, was man auf dem Bild erkennen soll -->
<img src="produkt-4711-final-v2.jpg"
     alt="Blaue Laufschuhe, Seitenansicht, mit weisser Sohle">

<!-- 2. Bild als Link/Button: der Alt-Text ist die FUNKTION -->
<a href="/warenkorb">
  <img src="cart.svg" alt="Warenkorb">
</a>

<!-- 3. Datenbild: die Aussage, nicht die Bildgattung -->
<img src="umsatz-2026.png"
     alt="Umsatz 2026: Anstieg von 1,2 auf 1,9 Millionen Euro">
<!-- Die vollstaendigen Zahlen stehen zusaetzlich als Tabelle im Text -->

<!-- 4. Dekoration: leeres alt, damit sie uebersprungen wird -->
<img src="trenner-welle.svg" alt="">

Slika s vidljivim potpisom

<!-- Bild mit sichtbarer Bildunterschrift: alt und caption
     duerfen sich nicht wiederholen, sonst hoert man alles zweimal -->
<figure>
  <img src="grundriss.png"
       alt="Grundriss: Eingang links, Kasse rechts neben dem Ausgang">
  <figcaption>Der barrierefreie Zugang liegt an der Ostseite.</figcaption>
</figure>

Potpis i alt-tekst imaju različite zadaće: potpis smješta sliku u kontekst, alt-tekst je opisuje. Ako su jednaki, istu rečenicu čujete dvaput zaredom.

Duljina i provjera

1. Jedan redak obično je dovoljan. Sve dulje ide uz sliku kao tekst, a ne u atribut.
2. Pročitajte alt-tekst naglas bez gledanja slike: razumijete li o čemu je riječ?
3. U pregledniku provjerite s isključenim slikama ili čitačem zaslona redoslijed i zvuk.