Barrierefreiheit kopf

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.