Warum Alt Text für Barrierefreiheit und SEO wichtig ist
Alt Text ist ein zentraler Baustein barrierefreier Websites: Screenreader lesen ihn vor, wenn Nutzerinnen und Nutzer das Bild nicht sehen können. So bleibt die Information erhalten, die sonst ausschließlich visuell vermittelt würde.
Auch für SEO ist Alt Text relevant, weil Suchmaschinen Bilder nicht wie Menschen „sehen“, sondern Kontextsignale aus Texten auswerten. Ein passender Alternativtext unterstützt:
- die Einordnung des Bildthemas im Zusammenspiel mit Überschriften und umgebendem Text
- die Auffindbarkeit in der Google Bildersuche
- die inhaltliche Relevanzsignalisierung einer Seite, wenn Bilder wichtige Inhalte transportieren
Zusätzlich verbessert Alt Text die Nutzererfahrung: Bei langsamer Verbindung oder Ladefehlern bleibt verständlich, was eigentlich zu sehen wäre.
Wo Alt Text hinterlegt wird und wie er technisch aussieht
Alt Text wird nicht als eigener HTML-Tag geschrieben, sondern als Attribut im img-Element:
<img src=”ledertasche-schwarz.jpg” alt=”Schwarze Ledertasche mit goldener Schnalle auf weißem Hintergrund”>
In vielen CMS (z. B. WordPress, Shop-Systeme, Headless-CMS) gibt es dafür ein Feld wie „Alternativtext“ oder „Alt-Text“. Dieses Feld schreibt letztlich genau dieses alt-Attribut in den Quellcode.
Wichtig für die Einordnung:
- Alt Text ist nicht die Bildunterschrift (die sichtbar unter dem Bild steht).
- Alt Text ist nicht das title-Attribut (das meist nur als Tooltip beim Hover angezeigt wird und für Barrierefreiheit/SEO nicht die gleiche Rolle spielt).
Wie Screenreader und Suchmaschinen Alt Text verwenden
Screenreader
Screenreader geben den Alt Text als Ersatzinformation aus. Das ist besonders wichtig bei:
- informativen Bildern (Produkte, Teamfotos, Illustrationen mit Aussage)
- Diagrammen und Screenshots, wenn der Bildinhalt entscheidend ist
- Icons und Bildern, die eine Aktion auslösen (z. B. Button als Bild)
Suchmaschinen
Suchmaschinen nutzen den Alt Text als Bildbeschreibung und bewerten ihn im Kontext weiterer Signale wie:
- Überschrift und Text rund um das Bild
- thematische Ausrichtung der Seite
- Bilddateiname und ggf. strukturierte Daten (je nach Setup)
Alt Text wirkt dabei nicht isoliert, sondern als Teil des Gesamtbildes.
Sonderfälle: dekorative und funktionale Bilder richtig behandeln
Dekorative Bilder
Wenn ein Bild rein dekorativ ist und keinen Informationswert hat (z. B. Hintergrundornamente), sollte der Alt Text leer sein:
<img src=”deko-linie.svg” alt=””>
So wird das Bild von Screenreadern übersprungen und stört nicht beim Vorlesen.
Funktionale Bilder
Wenn ein Bild eine Funktion hat (z. B. ein Icon als Link oder Button), sollte der Alt Text die Aktion beschreiben, nicht das Aussehen.
Beispiel:
- Statt: „Lupe Icon“
- Besser: „Suche“
Alt Text Beispiele aus der Praxis
- Produktbild: „Schwarze Ledertasche mit goldener Schnalle auf weißem Hintergrund“
- Teamfoto: „Drei Personen im Büro besprechen ein Website Layout am Laptop“
- Diagramm: „Balkendiagramm zeigt Anstieg der organischen Klicks von Januar bis Juni“
Bei Diagrammen gilt: Wenn die genaue Aussage wichtig ist, reicht ein sehr kurzer Alt Text oft nicht. Dann sollten die Werte oder Kernaussagen zusätzlich im Fließtext oder in einer zugänglichen Datentabelle stehen.
Häufige Fehler beim Schreiben von Alt Text
- Keyword Stuffing statt sinnvoller Bildbeschreibung („Alt Text SEO Webdesign Agentur Alt Text…“)
- Floskeln wie „Bild von“ oder „Foto von“ (Screenreader-Nutzer wissen, dass es ein Bild ist)
- Dateinamen als Alt Text („IMG_3847.jpg“)
- Doppelte Inhalte, wenn ein Text im Bild identisch direkt daneben als Klartext steht
- Zu vage Beschreibungen ohne Aussage („Person im Büro“), obwohl mehr Kontext relevant wäre
Praktische Standards und Tools zur Qualitätskontrolle
Für Barrierefreiheit gilt WCAG als wichtigste Referenz: Alt Texte müssen vorhanden und inhaltlich passend sein, wenn Bilder Informationen transportieren.
Für Audits und Checks eignen sich u. a.:
- WAVE zum Finden fehlender oder unpassender Alternativtexte
- axe DevTools für Accessibility-Tests direkt im Browser
Im KI-Kontext sind gute Alt Texte außerdem ein Vorteil, weil sie Bildinhalte als maschinenlesbaren Text verfügbar machen. Das hilft bei Content-Audits, Qualitätssicherung und automatisierten Analysen, ohne dass Bildinhalte manuell interpretiert werden müssen.
Quellen: Wikipedia: Alt-Text, accessGO: Alt Text – so machen Sie Bilder barrierefrei, Sitejet Help: Alt-Text für Bilder in Collections, Marketinginstitut: Alt Text & Barrierefreiheit