Jedes Bild auf Ihrer Website kann eine kurze schriftliche Beschreibung tragen, den sogenannten Alternativtext (kurz „Alt-Text“). Die meisten Besucherinnen und Besucher sehen ihn nie. Für jemanden, der blind ist und einen Screenreader nutzt (eine Software, die den Bildschirm vorliest), ist diese Beschreibung aber das Bild. Eine gute Beschreibung vermittelt, was Sehende auf einen Blick erfassen. Eine fehlende oder nachlässige hinterlässt eine Lücke oder, schlimmer noch, eine sinnlose Zeichenfolge wie „IMG_4032.jpg“. Dieser Artikel erklärt, wer Bildbeschreibungen nutzt, zeigt einen einfachen Weg zur Entscheidung, was Sie schreiben, und bietet viele gute und schlechte Beispiele zum Übernehmen. Zum Schluss erfahren Sie, wo das Beschreibungsfeld in den gängigsten Website-Baukästen zu finden ist.
Was Alternativtext ist und wer ihn nutzt
Alternativtext ist ein kurzer Text, der im Code der Seite zum Bild gespeichert wird. Der Browser zeigt ihn nicht auf dem Bildschirm an, andere Werkzeuge nutzen ihn aber:
- Menschen mit Screenreader. Blinde und sehbehinderte Menschen hören die Beschreibung, wenn sie zum Bild gelangen.
- Menschen mit langsamer oder begrenzter Verbindung. Lädt ein Bild nicht, zeigen viele Browser stattdessen die Beschreibung.
- Menschen, die Bilder ausschalten, um Daten zu sparen oder sich weniger ablenken zu lassen.
- Suchmaschinen. Google gibt an, Alternativtext zusammen mit dem Bild und dem umgebenden Text zu nutzen, um zu verstehen, was ein Bild zeigt. Siehe die Google-Richtlinien für Bilder.
Fehlende Beschreibungen gehören zu den häufigsten Problemen im Web. Im WebAIM Million 2026, einer automatischen Prüfung von einer Million Startseiten, hatten 53,1 % der Seiten Bilder ohne Alternativtext. Die gute Nachricht: Dafür brauchen Sie keine Entwicklerin und keinen Entwickler. In den meisten Baukästen ergänzen oder verbessern Sie eine Beschreibung selbst in einer Minute.
Zuerst entscheiden: Wozu dient dieses Bild?
Fragen Sie sich, bevor Sie etwas schreiben, was das Bild auf dieser Seite leistet. Das W3C, die Organisation hinter den Webstandards, veröffentlicht einen Entscheidungsbaum für Alternativtexte, der genau auf dieser Frage aufbaut. Hier eine vereinfachte Fassung.
- Zeigt das Bild Text? Dann gibt die Beschreibung diesen Text wieder.
- Ist es ein Link oder eine Schaltfläche? Dann beschreiben Sie, wohin es führt oder was es tut, nicht wie es aussieht.
- Liefert es der Seite eine Information? Dann beschreiben Sie diese Information in einem kurzen Satz.
- Zeigt es komplexe Informationen, etwa ein Diagramm oder eine Karte? Dann geben Sie eine kurze Beschreibung und stellen die vollständige Information als Text in die Nähe.
- Ist es reine Dekoration, oder sagt der Text daneben schon dasselbe? Dann erhält es eine leere Beschreibung, damit Screenreader es überspringen.
Dasselbe Foto kann auf verschiedenen Seiten eine andere Beschreibung brauchen. Ein Strandfoto ist in einem Blogartikel über Zeitmanagement Dekoration, auf der Buchungsseite eines Ferienhauses am Meer dagegen eine wesentliche Information.
Informative Bilder: Sagen Sie, worauf es ankommt
Die meisten Bilder auf der Website eines kleinen Unternehmens sind informativ: Produktfotos, Fotos Ihrer Räume, Ihres Teams, Ihrer Arbeit. Beschreiben Sie, was Besucher wissen müssen, so wie Sie es einem Freund am Telefon erzählen würden.
Produktfotos im Onlineshop
Kundinnen und Kunden können das Produkt nicht in die Hand nehmen. Das Foto beantwortet Fragen: welche Farbe, welche Form, wie sieht es im Gebrauch aus? Ihre Beschreibung sollte dieselben Fragen beantworten.
- Schlecht: „produkt1.jpg“
- Schlecht: „Tasse“
- Schlecht: „Beste Tasse kaufen Tasse günstig Keramiktasse Geschenk Tasse Kaffeetasse“
- Gut: „Handgemachte Keramiktasse in Meergrün, mit gesprenkelter Glasur und breitem Henkel“
Zeigt Ihr Shop mehrere Fotos eines Produkts, geben Sie jedem eine eigene Beschreibung: „Dieselbe Tasse von oben, mit unglasiertem Rand“, „Die Tasse in zwei Händen, damit man die Größe sieht“. Fünfmal den Produktnamen zu wiederholen, sagt Zuhörenden nichts Neues.
Ein Teamfoto
- Schlecht: „Team“
- Schlecht: „Gruppe lächelnder Menschen“
- Gut: „Unser fünfköpfiges Team vor der Werkstatt, in der Mitte Gründerin Lotte“
Auf einer Seite „Über uns“ zählt, wer auf dem Foto ist. Auf einer Karriereseite zählt vielleicht eher die Stimmung: „Das Team beim gemeinsamen Mittagessen an einem langen Tisch im Garten“.
Ein Foto, das die Atmosphäre zeigt
Für jemanden, der ein Restaurant auswählt, ist das Foto der Terrasse eine Information: „Sonnige Terrasse mit acht Tischen unter einer großen Platane“. Dieselbe Art Foto als Hintergrund hinter einer Überschrift ist meist Dekoration.
Funktionale Bilder: Logos, Symbole und Schaltflächen
Ist ein Bild ein Link oder eine Schaltfläche, dann ist die Beschreibung sein Name. Ein Screenreader kündigt es als „Link“ oder „Schaltfläche“ an, gefolgt von Ihrem Text. Dieser Text muss also sagen, was beim Aktivieren passiert.
- Logo, das zur Startseite führt. Schlecht: „Logo“. Schlecht: „Logo mit grünem Blatt“. Gut: „Bäckerei Becker, Startseite“. Man weiß, dass das Logo oben zur Startseite führt; gebraucht wird der Name des Unternehmens.
- Lupe auf einer Suchschaltfläche. Schlecht: „Lupe“. Gut: „Suchen“.
- Symbole sozialer Netzwerke. Schlecht: „Instagram-Symbol“. Gut: „Bäckerei Becker auf Instagram“.
- Ein Druckersymbol. Schlecht: „Drucker“. Gut: „Dieses Rezept drucken“.
Steht das Bild in einem Link, der schon sichtbaren Text hat, etwa eine Produktkarte mit Foto und Produktnamen, kann das Foto oft eine leere Beschreibung erhalten. So wird der Name nicht doppelt vorgelesen. Unsere Anleitung zu Linktexten erklärt, warum Links einen klaren Namen brauchen.
Bilder mit Text, Dekoration und komplexe Bilder
Bilder mit Text
Ein Banner mit „Sommerschlussverkauf, 20 % auf alles bis 31. August“ ist Text, auch wenn es ein Bild ist. Die Beschreibung enthält dieselben Worte: „Sommerschlussverkauf, 20 % auf alles bis 31. August“. Noch besser: Setzen Sie den Text als echten Text auf die Seite, über das Bild. Echten Text kann man vergrößern, übersetzen und über Suchmaschinen finden, und er bleibt auf jedem Bildschirm scharf.
Dekorative Bilder
Hintergrundmuster, Trennlinien, abstrakte Formen und Stockfotos, die nur Stimmung erzeugen, sind Dekoration. Sie erhalten eine leere Beschreibung. Im Code ist das alt="", ohne etwas zwischen den Anführungszeichen. Das ist etwas anderes, als die Beschreibung ganz wegzulassen: Ohne alt lesen manche Screenreader den Dateinamen vor, und genau das wollen Sie vermeiden.
Diagramme, Schaubilder und Karten
Ein Diagramm enthält zu viel für eine kurze Beschreibung. Geben Sie ihm zwei Teile:
- Eine kurze Beschreibung, die sagt, welche Art Diagramm es ist und was seine Kernaussage ist: „Balkendiagramm: Die Onlinebestellungen haben sich zwischen 2024 und 2026 verdoppelt“.
- Die vollständige Information als Text beim Diagramm, etwa ein kurzer Absatz oder eine Tabelle mit den Zahlen.
Diese Textfassung hilft weit mehr Menschen als nur denen mit Screenreader. Viele erfassen einen Satz wie „Die Bestellungen stiegen von 1.200 im Jahr 2024 auf 2.450 im Jahr 2026“ leichter als Balken.
Länge, Ton und was Sie vermeiden sollten
Eine feste Höchstlänge gibt es nicht, aber kurze Beschreibungen funktionieren am besten. Wer zuhört, kann nicht überfliegen, und der Screenreader liest alles am Stück vor. Peilen Sie einen Satz an, oft weniger als fünfzehn Wörter. Manche Baukästen setzen eigene Grenzen: Shopify erlaubt bis zu 512 Zeichen, empfiehlt aber höchstens 125, und Squarespace erlaubt 250.
Tipps für den Ton:
- Schreiben Sie in der Sprache der Seite, mit einfachen Worten.
- Beginnen Sie mit dem Wichtigsten. „Roter Wintermantel mit Kapuze“ ist besser als „Ein Mantel, der rot ist, für den Winter und mit Kapuze“.
- Nennen Sie die Art des Bildes nur, wenn sie wichtig ist: „Ölgemälde des Hafens“, „Bildschirmfoto des Bestellformulars“, „Handgezeichnete Karte“.
Was Sie vermeiden sollten:
- „Bild von“ oder „Foto von“. Der Screenreader sagt bereits, dass es ein Bild ist, also hört man „Grafik, Bild von einer Tasse“.
- Aneinandergereihte Suchbegriffe. Listen von Suchwörtern sind anstrengend anzuhören und können Ihre Website laut Google wie Spam wirken lassen. Google selbst nennt eine Reihe wie „puppy dog baby dog pup pups“ ein schlechtes Beispiel und „Dalmatian puppy playing fetch“ (ein Dalmatinerwelpe, der einen Ball apportiert) das beste.
- Dateinamen und Kameracodes wie „DSC_0045“ oder „startbanner-final-v2“.
- Die Bildunterschrift oder den Text daneben wörtlich wiederholen. Steht unter dem Foto schon „Lotte in ihrer Werkstatt“, kann die Beschreibung etwas anderes ergänzen oder leer bleiben.
- Raten oder erfinden. Hat ein Werkzeug eine Beschreibung für Sie geschrieben, prüfen Sie sie. Automatische Beschreibungen übersehen oft das Wesentliche, etwa wer eine Person ist.
Wo Sie Beschreibungen in Ihrem Baukasten eintragen
Menübezeichnungen ändern sich gelegentlich und können in der deutschen Oberfläche anders lauten. Suchen Sie nach einem Feld wie „Alternativer Text“, „Alt-Text“ oder „Bildbeschreibung“ (englisch „Alt text“ oder „Alternative text“). Hier die aktuellen Stellen in den gängigsten Werkzeugen.
- WordPress. Wählen Sie den Bild-Block aus. Tragen Sie im Einstellungsbereich rechts, bei den Bildeinstellungen, den Text in das Feld „Alternativer Text“ ein. Sie können es auch in der Mediathek tun: Öffnen Sie ein Bild und füllen Sie bei den Anhang-Details den alternativen Text aus.
- Shopify. Für Produktfotos: Gehen Sie zu Produkte, öffnen Sie ein Produkt, klicken Sie auf ein Foto, um die Medienvorschau zu öffnen, wählen Sie die Option zum Hinzufügen des Alt-Textes, tippen Sie und speichern Sie, wie in der Shopify-Hilfe beschrieben. Bilder in Ihrem Theme haben ein eigenes Feld im Theme-Editor, bei der Einstellung des Bildes.
- Wix. Klicken Sie im Editor auf das Bild, dann auf das Symbol für die Einstellungen, und füllen Sie das Feld aus, in dem Wix fragt, was auf dem Bild zu sehen ist (englisch „What’s in the image?“). Für Galerien öffnen Sie die Medienverwaltung und wählen jedes Bild einzeln aus. Um ein Bild als dekorativ zu markieren, bietet Wix ein Kontrollkästchen im Barrierefreiheits-Assistenten. Siehe die Wix-Hilfe zu Bildern.
- Squarespace. Bearbeiten Sie den Bildblock und tragen Sie den Text im Feld für den Alt-Text auf dem Tab Inhalt ein. Die Hilfeseite von Squarespace erklärt, wo das Feld bei Galerien und anderen Layouts sitzt.
- KI-Baukästen wie Lovable, Bolt und v0. Dort gibt es kein Formularfeld: Sie bitten im Chat darum. Eine nützliche Anweisung: „Liste jedes Bild auf dieser Seite mit seinem aktuellen Alt-Text auf. Schlage für jedes Bild eine bessere Beschreibung vor, je nachdem, was es zeigt und wozu es da ist. Markiere dekorative Bilder für ein leeres alt. Warte auf meine Zustimmung, bevor du etwas änderst.“ Unsere Anleitung für KI-Baukästen enthält weitere fertige Anweisungen.
Mehrere dieser Werkzeuge können inzwischen mit KI Beschreibungen vorschlagen. Das spart Zeit, doch betrachten Sie jeden Vorschlag als Entwurf: Das Werkzeug sieht Pixel, nicht Ihre Absicht.
Wie ibin Ihnen hilft, schwache Beschreibungen zu finden
Eine automatische Prüfung findet Bilder ganz ohne Beschreibung sowie Links oder Schaltflächen, die aus einem Bild ohne Namen bestehen. ibin zeigt jedes davon mit einem vergrößerten Ausschnitt der Stelle auf der Seite und einer Anleitung zu Bildbeschreibungen.
Was eine automatische Prüfung nicht kann, ist beurteilen, ob eine Beschreibung _stimmt_. „Tasse“ besteht jeden automatischen Test. Deshalb bietet ibin einen optionalen zweiten Blick der KI an. Er betrachtet die Bilder und ihre Beschreibungen und bewertet auf einer Skala von 1 bis 5, wie gut sie passen, zusammen mit Linktexten, Bedienbarkeit per Tastatur und verständlicher Sprache. Verstehen Sie diese Bewertungen als Hinweise: Sie zeigen, welche Bilder einen genaueren Blick verdienen, und die Entscheidung treffen Sie. Automatische Prüfungen finden ungefähr ein Drittel bis die Hälfte aller Barrierefreiheitsprobleme; den Rest muss ein Mensch prüfen.
Prüfen Sie Ihre Bildbeschreibungen
Prüfen Sie eine Seite kostenlos mit ibin, um zu sehen, welche Bilder keine Beschreibung haben, und fordern Sie dann den zweiten Blick an, um Beschreibungen zu finden, die besser werden können. Beginnen Sie mit Ihrer Startseite und Ihren meistverkauften Produkten. Wenn Sie sich anmelden, können Sie bis zu 200 Seiten derselben Website prüfen, und die Anleitungen erklären jede Lösung Schritt für Schritt.
Sehen Sie, wie Ihre Website abschneidet
Prüfen Sie kostenlos eine Seite, ohne Konto. Sie erhalten eine klare Liste, was zuerst zu beheben ist, mit Bildern, wo jedes Problem liegt.
