Eine Alt-Tag, genauer gesagt bekannt als Alt-Text (kurz für alternativer Text), ist eine kurze Beschreibung, die einem Bild im HTML-Code deiner Website hinzugefügt wird. Sie dient zwei wichtigen Zwecken: Barrierefreiheit und SEO.

So sieht es im Code aus:

 <img src="team-photo.jpg" alt="Web-Entwicklungsteam in einer Besprechung">

Einfach ausgedrückt: Wenn ein Bild nicht angezeigt werden kann - entweder weil es nicht geladen wird oder weil der Nutzer eine Sehschwäche hat -, sagt der Alt-Text den Leuten (und Suchmaschinen), worum es sich bei dem Bild handelt.

Es ist eines der Elemente im Hintergrund, das die meisten Nutzerinnen und Nutzer nicht bemerken, aber es spielt eine große Rolle dabei, deine Website inklusiver, verständlicher und in der Suche sichtbar zu machen.

Warum Alt-Text für deine Website wichtig ist

1. Barrierefreiheit Bildschirmleser verwenden Alt-Text, um Bilder für Nutzer mit Sehbehinderungen zu beschreiben. Ohne ihn entgehen diesen Nutzern wichtige Informationen oder der Kontext. Wenn du willst, dass deine Website barrierefrei ist und die WCAG-Standards erfüllt, ist Alt-Text unverzichtbar.
2. SEO Suchmaschinen können Bilder nicht so "sehen", wie Menschen es können. Der Alt-Text gibt ihnen die Möglichkeit zu verstehen, was das Bild zeigt. Das hilft bei der Platzierung in der Bildersuche und der allgemeinen Relevanz der Seite.
3. Fallback-Inhalt Wenn ein Bild nicht geladen werden kann (langsame Verbindung, technischer Fehler usw.), erscheint der Alt-Text an seiner Stelle, damit die Botschaft nicht völlig verloren geht.
4. Inhaltliche Klarheit Ein guter Alt-Text unterstreicht die Bedeutung deines Inhalts - vor allem, wenn das Bild eine zentrale Rolle in deiner Botschaft spielt.

Was macht einen guten Alt-Text aus?

• Sei spezifisch und beschreibend Sag, was das Bild tatsächlich zeigt, einschließlich relevanter Details. Zum Beispiel:
  • ✅ Kunden-Dashboard mit monatlichen Leistungskennzahlen
  • ❌ Bild oder Foto
• Kurz und bündig halten Strebe 5-15 Wörter an. Vermeide es, ihn mit Schlüsselwörtern vollzustopfen oder ihn unnatürlich klingen zu lassen.
• Sag nicht "Bild von..." oder "Bild von...". Screenreader zeigen es bereits als Bild an.
• Kontext verwenden Der Alt-Text sollte dem Zweck des Bildes an seinem Platz entsprechen. Ein Foto kann auf deiner Homepage einen anderen Zweck erfüllen als in einem Blogbeitrag.

Wenn kein Alt-Text erforderlich ist

• Rein dekorative Bilder (z. B. eine Form oder eine Linie im Hintergrund) kann ein leeres Alt-Tag haben: alt="". Dies weist Screenreader an, den Text zu überspringen, damit sich die Nutzer keine sinnlosen Inhalte anhören müssen.
• Icons die bereits beschriftet sind (z. B. ein Papierkorbsymbol neben dem Wort "Löschen"), brauchen nicht immer einen Alttext, wenn die Beschriftung klar genug ist.

Wie man Alt-Tags in der Praxis hinzufügt

• Unter WordPresskannst du den Alt-Text direkt beim Hochladen eines Bildes in die Mediathek eingeben.
• Unter HTMLsieht das alt-Attribut wie folgt aus: <img src="example.jpg" alt="Eine responsive Website, die auf Laptop und Handy angezeigt wird">
• Unter Builder wie Bricks oder ElementorDie Alt-Felder sind in der Regel in den Bildeinstellungen enthalten.

Fazit

Alt-Tags sind klein, aber mächtig. Sie machen deine Website umfassender, verbessern die Suchmaschinenoptimierung und steigern das Nutzererlebnis - oft ohne sichtbare Veränderungen. Wenn du deiner Website Bilder hinzufügst, ist das Schreiben guter Alt-Texte eine der einfachsten Möglichkeiten, die Leistung deines Inhalts insgesamt zu verbessern.