Mit diesem Artikel bekommst du ein besseres Verständnis für Bilder Alt-Attribute – und konkrete Tipps, wie du sie richtig einsetzt.
Warum Bilder Alt-Attribute wichtig sind
Alt-Attribute helfen Suchmaschinen, Bilder zu finden und einzuordnen. Der Text im Alt-Attribut fliesst direkt in die Indexierung deiner Seite ein. Wer Alt-Attribute weglässt oder schlampig befüllt, verschenkt Sichtbarkeit.
Noch wichtiger: Barrierefreiheit. Menschen mit Sehbehinderungen sehen die Bilder auf deiner Webseite nicht – aber sie hören den Alt-Text. Screenreader lesen ihn vor. Fehlt das Alt-Attribut oder ist es nichtssagend, bleibt ein Teil deiner Inhalte für diese Personen schlicht unsichtbar.
Bilder Alt-Attribute richtig anwenden
Ein Alt-Attribut liefert eine Beschreibung des Bildes für den Fall, dass es nicht angezeigt wird. Diese Beschreibung muss präzise und aussagekräftig sein – nicht ausschweifend. Irrelevante Infos im Alt-Text stören die Nutzererfahrung und verwirren Screenreader-Nutzende.
Faustregel: kurz, konkret, auf den Punkt. Was ist auf dem Bild zu sehen – und warum steht es genau hier?
Das ist beim Erstellen von Alt-Attributen zu beachten
- Beschreibe Inhalt und Bedeutung des Bildes knapp – nicht den Dateinamen, nicht das Format.
- Relevante Keywords gehören rein, wenn sie natürlich passen. Suchmaschinenoptimierung funktioniert hier nur, wenn der Text auch für Menschen Sinn ergibt.
- Zu allgemein («Foto») ist nutzlos. Zu spezifisch («Frau mit braunen Haaren und blauer Jacke vor grauem Hintergrund, leicht nach links geneigt») bläht auf. Der mittlere Weg zählt.
- Barrierefreiheit ist kein Bonus-Feature. Alt-Attribute sind für Menschen mit Sehbehinderungen der einzige Zugang zum Bildinhalt.
Alt-Text Beispiele
Was du schreibst, hängt stark vom Kontext ab. Ein paar konkrete Beispiele – auch für WordPress, obwohl sich Alt-Texte zwischen CMS kaum unterscheiden:
- Thema Landschaft: «Blick auf die Berge in der Ferne, die von einem See und Bäumen im Vordergrund umgeben sind».
- Thema Tiere: «Golden Retriever Welpe, der in einem grünen Feld mit einem Tennisball spielt».
- Thema Hand-/Massanfertigung, z.B. für Webshop-Produktbeschreibungen: «Rote handgefertigte Keramikvase mit texturierter Oberfläche und einer dünnen weissen Linie um den Rand». Erfasse Farbe, Muster und Material vollständig.
- Thema Nachhaltigkeit: «Menschen, die Plastikflaschen und Papier in einer Recyclingstation sortieren und entsorgen».
Alt-Text und Bild-Beschriftung: zwei verschiedene Dinge
Der Alt-Text ist ein Ersatz für das Bild – er greift, wenn das Bild nicht lädt, etwa bei Textbrowsern oder schlechter Verbindung. Er beschreibt präzise, was zu sehen ist.
Die Bild-Beschriftung steht direkt unter dem Bild und gibt Kontext: den Namen einer Person, den Aufnahmeort, den Zusammenhang. Sie kann zusätzliche Informationen liefern, die im Alt-Text nichts verloren haben. Kurz halten, auf das Wesentliche fokussieren – das gilt für beide.