Bilder machen eine Webseite lebendiger. Sie lockern Texte auf, zeigen Produkte, erklären Leistungen oder schaffen einfach ein besseres Gefühl beim Lesen. Auf vielen Webseiten werden Bilder deshalb ganz selbstverständlich eingesetzt. Was dabei aber oft vergessen wird: Ein Bild ist nicht für alle Besucher automatisch sichtbar oder verständlich.
Genau hier kommen Alt-Texte ins Spiel. Sie beschreiben kurz, was auf einem Bild zu sehen ist oder welche Bedeutung das Bild im Zusammenhang mit der Seite hat. Fehlen diese Texte, entsteht schnell ein Problem. Nicht nur für Menschen mit Sehbehinderung, sondern auch für die Bedienbarkeit, die Verständlichkeit und teilweise sogar für die Auffindbarkeit einer Webseite.
Was ist ein Alt-Text überhaupt?
Ein Alt-Text ist ein alternativer Text für ein Bild. Er wird im Hintergrund der Webseite hinterlegt und erscheint nicht wie normaler Fließtext direkt auf der Seite. Trotzdem ist er wichtig.
Wenn ein Bild nicht geladen werden kann, kann der Alt-Text angezeigt werden. Noch wichtiger ist aber: Screenreader können diesen Text vorlesen. Menschen, die eine Webseite nicht oder nur eingeschränkt sehen können, bekommen dadurch erklärt, was auf dem Bild zu erkennen ist.
Ein Beispiel:
Statt:
„Bild123.jpg“
wäre besser:
„Frau nutzt ein Smartphone, um einen Termin online zu buchen“
So versteht man sofort, worum es geht. Der Text muss nicht lang sein. Er sollte nur hilfreich sein.
Warum fehlende Alt-Texte für Nutzer ein echtes Problem sind
Stell dir vor, du besuchst eine Webseite und ein wichtiger Teil der Information steckt in einem Bild. Vielleicht zeigt das Bild ein Produkt, eine Anleitung, eine Speisekarte, eine Infografik oder einen Hinweis zur Bedienung. Wenn du dieses Bild nicht sehen kannst und kein Alt-Text vorhanden ist, fehlt dir diese Information komplett.
Für sehbehinderte oder blinde Menschen ist das nicht nur unpraktisch, sondern manchmal ein echter Ausschluss. Sie bekommen dann nur vorgelesen, dass dort ein Bild ist. Aber nicht, was dieses Bild aussagt.
Das ist ungefähr so, als würde jemand mitten in einem Gespräch auf ein Plakat zeigen und sagen: „Da steht es doch.“ Wenn man das Plakat nicht sehen kann, hilft einem dieser Hinweis überhaupt nicht weiter.
Besonders kritisch: Bilder mit wichtiger Information
Nicht jedes Bild ist gleich wichtig. Ein rein dekoratives Hintergrundbild braucht nicht unbedingt eine ausführliche Beschreibung. Anders sieht es aus, wenn das Bild eine echte Aussage trägt.
Problematisch sind zum Beispiel:
- Produktbilder in einem Online-Shop
- Infografiken mit Zahlen oder Abläufen
- Screenshots aus Programmen
- Bilder von Formularschritten
- Lagepläne oder Anfahrtsskizzen
- Buttons oder Icons ohne sichtbaren Text
- Bilder mit eingebauter Schrift
Gerade bei Bildern mit Text wird es schnell schwierig. Wenn auf einem Bild zum Beispiel „Jetzt 20 % Rabatt sichern“ steht, aber dieser Inhalt nirgendwo anders auf der Seite vorkommt, bleibt die Information für manche Besucher unsichtbar.
Alt-Texte helfen auch bei schlechter Internetverbindung
Barrierefreiheit wird oft nur mit Behinderung verbunden. Dabei profitieren viel mehr Menschen davon.
Bilder laden manchmal langsam oder gar nicht. Das passiert bei schwacher Verbindung, technischen Problemen oder bestimmten Browsereinstellungen. Wenn dann ein sinnvoller Alt-Text vorhanden ist, bleibt wenigstens die Information erhalten.
Das ist besonders bei wichtigen Bildern nützlich. Ein Nutzer versteht dann trotzdem, was gemeint ist, auch wenn das Bild gerade nicht angezeigt wird.
Auch Suchmaschinen verstehen Bilder nicht wie Menschen
Suchmaschinen werden zwar immer besser darin, Bildinhalte zu erkennen. Trotzdem ist ein sauberer Alt-Text weiterhin hilfreich. Er gibt dem Bild einen klaren Zusammenhang zur Seite.
Das bedeutet nicht, dass man Alt-Texte mit Keywords vollstopfen sollte. Das wirkt schnell künstlich und hilft am Ende niemandem. Ein guter Alt-Text beschreibt einfach ehrlich, was auf dem Bild zu sehen ist und warum es relevant ist.
Schlecht wäre zum Beispiel:
„Barrierefreiheit Webseite BFSG barrierefreie Webseite Alt Text SEO“
Besser wäre:
„Laptop mit geöffneter Webseite und Symbolen für digitale Barrierefreiheit“
Das klingt natürlicher und ist für Menschen deutlich verständlicher.
Häufige Fehler bei Alt-Texten
Viele Webseiten haben entweder gar keine Alt-Texte oder sehr schlechte. Besonders oft sieht man diese Fehler:
1. Der Alt-Text fehlt komplett
Das ist der Klassiker. Das Bild ist sichtbar, aber im Code gibt es keine sinnvolle Beschreibung.
2. Der Dateiname wird als Alt-Text verwendet
Texte wie „IMG_4829.jpg“ oder „header-final-neu.png“ helfen niemandem weiter.
3. Der Alt-Text ist viel zu lang
Ein Alt-Text soll keine ganze Bildanalyse sein. Meist reichen ein bis zwei kurze Sätze oder sogar nur eine klare Beschreibung.
4. Jedes Bild wird gleich beschrieben
Wenn auf jeder Unterseite steht „Bild zum Thema Barrierefreiheit“, ist das zu allgemein. Der Text sollte zum jeweiligen Bild passen.
5. Keywords werden unnatürlich eingebaut
Alt-Texte sind nicht dafür da, Suchmaschinen mit Begriffen zu füttern. Sie sollen Menschen helfen, den Bildinhalt zu verstehen.
Wie schreibt man einen guten Alt-Text?
Ein guter Alt-Text beantwortet im Grunde eine einfache Frage:
Was müsste jemand wissen, wenn er das Bild nicht sehen kann?
Dabei kommt es auf den Zusammenhang an. Das gleiche Bild kann je nach Seite unterschiedlich beschrieben werden.
Ein Bild von einem Café könnte auf einer Restaurantseite so beschrieben werden:
„Heller Gastraum eines Cafés mit kleinen Tischen und Theke“
Auf einer Seite über Innenarchitektur könnte derselbe Raum anders beschrieben werden:
„Modern eingerichtetes Café mit Holztheke, warmem Licht und klarer Raumaufteilung“
Beides kann richtig sein. Entscheidend ist, was für den Nutzer an dieser Stelle wichtig ist.
Nicht jedes Bild braucht eine ausführliche Beschreibung
Wichtig ist auch: Man muss es nicht übertreiben. Wenn ein Bild nur Schmuck ist und keine Information vermittelt, kann es für Screenreader ausgeblendet werden. Das ist oft besser, als jeden kleinen Hintergrund oder jede Deko-Grafik vorzulesen.
Ein Beispiel: Eine leichte Wellenform im Hintergrund muss nicht beschrieben werden. Ein Foto vom Team, ein Produktbild oder eine Grafik mit wichtigen Informationen dagegen schon.
Barrierefreiheit bedeutet nicht, alles mit Text vollzupacken. Es bedeutet, die wichtigen Informationen zugänglich zu machen.
Fehlende Alt-Texte wirken schnell unprofessionell
Für Besucher ohne Einschränkungen ist ein fehlender Alt-Text oft unsichtbar. Trotzdem sagt er etwas über die Qualität einer Webseite aus. Wer seine Bilder nicht sauber pflegt, übersieht häufig auch andere Details.
Gerade für Unternehmen, Dienstleister und Online-Shops lohnt sich ein Blick darauf. Alt-Texte sind kein riesiges Technikprojekt. Sie sind eher eine saubere Grundpflege der Webseite. Und genau solche kleinen Dinge machen am Ende den Unterschied zwischen „irgendwie online“ und wirklich nutzerfreundlich.
Fazit: Alt-Texte sind klein, aber wichtig
Fehlende Alt-Texte sind kein Schönheitsfehler. Sie können dafür sorgen, dass Menschen wichtige Inhalte nicht verstehen oder gar nicht erst wahrnehmen. Besonders bei Produktbildern, Anleitungen, Infografiken oder Bildern mit Text kann das schnell zum echten Problem werden.
Die gute Nachricht: Alt-Texte lassen sich meistens relativ einfach nachtragen. Man muss dafür kein Entwickler sein und keine komplette Webseite umbauen. Oft reicht es schon, die wichtigsten Bilder durchzugehen und ehrlich zu beschreiben, was darauf zu sehen ist.
Eine barriereärmere Webseite entsteht nicht immer durch große Maßnahmen. Manchmal beginnt sie mit einem kurzen Satz, der einem Bild endlich eine Bedeutung gibt.v
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.