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.
