Das Alt-Attribut bei Bildern

Was ist das Alt-Attribut?

Das alt-Attribut (kurz für „alternative Text“) ist ein Bestandteil des HTML-Elements <img>. Es beschreibt den Inhalt und die Funktion eines Bildes, falls dieses aus irgendeinem Grund nicht geladen werden kann oder für Nutzer mit Screenreadern zugänglich gemacht werden soll.

Warum ist das alt-Attribut wichtig?

1. Barrierefreiheit (Accessibility)

Screenreader für sehbehinderte Menschen lesen das alt-Attribut vor, wenn sie auf ein Bild stoßen. Das ist besonders wichtig für:

– Blinde oder sehbehinderte Nutzer
– Nutzer mit eingeschränkter Internetverbindung (wenn Bilder nicht geladen werden)
– Menschen, die über Screenreader z. B. auf Smartphones surfen

Ohne alt-Text bleibt der Bildinhalt für diese Menschen komplett unzugänglich.
Beispiel:
Ein Button mit einem Bild ohne alt-Text wird von einem Screenreader nicht als klickbares Element erkannt – das kann die Benutzbarkeit stark einschränken.

2. Suchmaschinenoptimierung (SEO)

Google und andere Suchmaschinen können Bilder nicht direkt „sehen“. Sie interpretieren Inhalte anhand von Begleittexten – insbesondere dem alt-Attribut.

Ein gut formulierter alt-Text verbessert die Sichtbarkeit deiner Bilder in der Google-Bildersuche und signalisiert Relevanz für das Thema deiner Seite.

SEO-Tipp:Integriere bei Bedarf relevante Keywords, aber vermeide Keyword-Stuffing. Der Text soll beschreiben, nicht spammen.

3. Technische Ausfallsicherung

Wenn ein Bild nicht geladen wird (z. B. wegen Verbindungsproblemen oder eines Fehlers im Dateipfad), wird stattdessen der alt-Text angezeigt. So bleibt der Inhalt zumindest teilweise erhalten.

Wann sollte man alt="" verwenden?

Wenn ein Bild rein dekorativ ist und keinerlei Informationswert bietet, sollte es ein leeres alt-Attribut haben. So wird es von Screenreadern ignoriert und stört nicht den Lesefluss.

Beispiele für dekorative Bilder:

– Hintergrundgrafiken
– Trennlinien
– Icons, die zusätzlich beschriftet sind

alt-Text in WordPress einfügen (z. B. mit Kadence)

In WordPress kannst du den alt-Text ganz einfach einfügen:

– Beim Hochladen eines Bildes in die Mediathek
– Oder im Block-Editor (z. B. im Bildblock oder Kadence Image Block)

Gehe einfach auf „Mediathek > Bild auswählen“ und trage den Alternativtext im rechten Bereich ein.
Der alt-Text wird automatisch in den HTML-Code des Bildes übernommen, wenn du es anschließend in Seiten oder Beiträge einfügst

Fazit

Das alt-Attribut ist klein, aber mächtig:

– Es macht deine Website zugänglicher für alle
– Es verbessert deine SEO
– Es sorgt für bessere Nutzerfreundlichkeit

Nutze es deshalb bewusst und regelmäßig – vor allem in WordPress und bei bildlastigen Themes wie Kadence, das stark auf Performance und saubere Semantik setzt.