Alt-Tags für barrierefreie Websites richtig verwenden
Sie haben eine Website, aber so richtig gut sichtbar ist sie nicht und Anfragen bleiben aus? Möglicherweise liegt es auch an den Bildern. Oder genauer: an dem, was nicht zu sehen ist. Denn Suchmaschinen und Screenreader „sehen“ Bilder nur dann, wenn Sie ihnen sagen, was darauf zu sehen ist. Genau das macht der Alt-Tag. Und das macht ihn so wichtig.
Alt-Tags (auch Alt-Attribute oder Alt-Texte genannt) helfen gleich doppelt:
✨ Sie machen Ihre Bilder barrierefrei für Menschen mit Sehbehinderung.
📈 Sie können für Google & Co. einen SEO-Boost bieten.
Doch viele Unternehmen nutzen diese Chance nicht. Oder schlimmer: Sie tragen irrelevante oder kryptische Beschreibungen ein, die am Ziel vorbeigehen. Das lässt sich ändern.
Was ist ein Alt-Tag und warum ist er so wichtig?
Ein Alt-Tag ist ein alternativer Text, der beschreibt, was auf einem Bild zu sehen ist. Das hilft:
✅ Screenreader-Nutzenden, Inhalte zu verstehen
✅ Google, das Bild thematisch einzuordnen und ggf. überhaupt zu indexieren
✅ Ihrer Website, sichtbar & barrierefrei zu werden
Wichtig: Der Alt-Tag ist nicht sichtbar auf der Website. Er steckt im HTML-Code des Bildes und wirkt dort still, aber effektiv.
Alt-Texte schreiben: ✨ 7 Goldene Regeln ✨
✨ 1. So kurz wie möglich, so lang wie nötig
Screenreader lesen oft nur die ersten 125 Zeichen vor. Also: Kern rein, Ballast raus.
✨ 2. Objektiv und sachlich bleiben
Keine Bewertungen wie „schön“, „toll“ oder „jung“. Stattdessen: Was sieht man wirklich? (z. B. Illustration für barrierefreie Website: Laptop mit Symbolen für Barrierefreiheit)
✨ 3. Kontext einbeziehen
Was bedeutet das Bild in diesem Moment, auf dieser Seite? Beschreiben Sie also nicht nur das Bild, sondern seine Funktion.
✨ 4. Kein Bullshit-Bingo
Sätze wie „Bild von…“ oder „Dies ist ein Foto…“? Bitte nicht.
✨ 5. Keywords: ja. Keyword-Stuffing: nein.
SEO funktioniert, wenn der Alt-Text zum Thema passt. Ein Keyword ist okay, zwei sind machbar – mehr bitte nicht.
✨ 6. Dekorative Bilder ausklammern
Bilder ohne Informationswert bekommen: alt=““. Damit Screenreader sie einfach überspringen.
✨ 7. Optional: Bildbeschreibung auf der Seite
Bei komplexen Infografiken oder Schaubildern reicht ein kurzer Alt-Text oft nicht. Hier lohnt sich eine zusätzliche, detaillierte Beschreibung direkt auf der Seite – so wie bei unserer nächsten Grafik.
Checkliste: Wann braucht ein Bild einen Alt-Text?
✅ Es zeigt wichtige Informationen (Infografik, Schaubild, Produktbild)
✅ Es ist inhaltlich relevant (z. B. Teamfoto, Symbolbild zum Thema)
✅ Es hat eine Funktion (z. B. als klickbarer Button)
Und wann nicht?
❌ Es ist rein dekorativ (z. B. Trennlinie, Hintergrundbild, Design-Icon)
❌ Es würde auch ohne Beschreibung nichts an der Aussage der Seite ändern
Praxisbeispiele für gute Alt-Texte
💡 Logo YTPI, Anbieter für Webdesign & Onlinemarketing. Blaues Quadrat mit weißem Icon und schwarzem Schriftzug daneben.
Das Porträt steht neben dem Kontaktformular. In dem Fall gibt es eine Keywordphrase, auf die die Seite optimiert ist: barrierefreie Webseiten.
💡 Porträt eines Mannes. Gepflegter Bart, kurze Haare, graues Sakko vor weißem Hintergrund – Berater für barrierefreie Websites.
💡Zwei Webdesigner zeigen am Schreibtisch auf einen Bildschirm. Einer sitzt, der andere steht dahinter.
Auch hier ist wieder ein Keyword im Spiel, das es gilt, möglichst dezent auch im Alt-Tag unterzubringen: barrierefreie Webseiten.
💡Illustration für barrierefreie Website: Mann sitzt vor Bildschirm mit Symbolen für Seh-, Hör- und Mobilitätseinschränkungen.
Technisch wichtig:
- Achten Sie beim Einpflegen in CMS-Systemen wie WordPress auf das richtige Feld für Alt-Texte. (Nicht zu verwechseln mit Titel oder Bildunterschrift.)
- Bei automatisch generierten Galerien: Prüfen, ob die Alt-Tags überhaupt übernommen werden.
Warum Alt-Texte auch für Ihre Sichtbarkeit entscheidend sind
Laut Google liefern relevante Bild-Alt-Texte wichtige Zusatzsignale, die beim Ranking helfen. Die Google-Bildersuche ist dabei nicht zu unterschätzen: Rund 22 % aller Websuchen beginnen dort.
Und für viele Nutzer ist Ihre Website die einzige, die vorgelesen wird. Also: besser klar als kreativ.
Jetzt handeln
Sie sind unsicher, ob Ihre Website barrierefrei genug ist oder Potenzial bei Bildern verschenkt? Lassen Sie es uns gemeinsam herausfinden.
FAQ zu Alt-Tags, SEO & Barrierefreiheit
Ein Alt-Text beschreibt den sichtbaren Inhalt eines Bildes für Menschen, die das Bild nicht sehen können, z. B. durch Sehbehinderung oder weil das Bild nicht geladen wird.
Alt-Tags verbessern die Barrierefreiheit und unterstützen die Suchmaschinenoptimierung.
Maximal 125 Zeichen. Dann stoppen viele Screenreader automatisch.
Ja, wenn sie thematisch passen. Aber keine Keyword-Listen oder Wiederholungen.
Sie vergeben Chancen: auf bessere Rankings, auf mehr Nutzbarkeit, auf ein positives Nutzererlebnis.
Technisch ja. Aber oft ist das Ergebnis generisch oder unpassend. Besser: von Hand, mit Sinn.
Der Alt-Text wird vorgelesen, wenn das Bild nicht sichtbar ist. Der Bildtitel wird nur bei Mouseover angezeigt.
* Dieser Beitrag ist ein Teamwork aus Mensch und Maschine – einige Textinhalte und Bilder wurden mit KI-Unterstützung erstellt oder überarbeitet.