zurück

Alt-Tags für barrierefreie Websites richtig verwenden

3D-Darstellung eines PC-Bildschirms mit Benutzeroberfläche und Text daneben: Alt-Tags richtig nutzen: Für barrierefreie Websites, SEO & KI.
Alt-Tags sind unverzichtbar – für Barrierefreiheit, für SEO, für KI. Wer online sichtbar sein will, kommt an sauberen Bildbeschreibungen nicht vorbei.

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 zur Erstellung barrierefreier Alt-Tags auf hellblauem Hintergrund mit Illustration eines Mannes am Computer.
Alt-Tags sorgen für barrierefreie Zugänglichkeit – und helfen bei SEO. Diese Checkliste zeigt, worauf es bei den Alt-Texten ankommt: präzise, relevant, kontextbezogen und ohne Schnörkel.

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.

💡 Logo YTPI, Anbieter für Webdesign & Onlinemarketing. Blaues Quadrat mit weißem Icon und schwarzem Schriftzug daneben.

Porträt eines Mannes. Gepflegter Bart, kurze Haare, graues Sakko vor weißem Hintergrund – Berater für barrierefreie Websites.

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.

💡Zwei Webdesigner zeigen am Schreibtisch auf einen Bildschirm. Einer sitzt, der andere steht dahinter.

Illustration für barrierefreie Website: Mann sitzt vor Bildschirm mit Symbolen für Seh-, Hör- und Mobilitätseinschränkungen.

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:

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.

Jetzt zum Newsletter anmelden!

Abonnieren Sie unsere Blogbeiträge, um keine neuen Inhalte zu verpassen, oder melden Sie sich für unseren YTPI Newsletter an und erhalten Sie exklusive Updates direkt in Ihr Postfach. Natürlich können Sie auch beides wählen – so bleiben Sie bestens informiert!

Newsletter-Liste auswählen

Wir senden keinen Spam! Erfahren Sie mehr in unserer Datenschutzerklärung.