Wie schreibt man wirkungsvolle Alternativtexte für Bilder?

Ein Bild sagt mehr als 1000 Worte, heißt es. Dann sollte es ja ein Leichtes sein, Alternativtexte für Bilder zu schreiben.

In der Praxis sieht es oft anders aus. Das vermaledeite leere Textfeld starrt die Redakteurin an, die sich unter Zeitdruck schnell eine Beschreibung ausdenken soll. Hat man ein System, das Meta-Angaben der Bilder auslesen kann, ist es vielleicht mit irgendeiner Phrase vorbelegt, und man kann schnell zur nächsten Aufgabe weiterspringen. Aber ein schlechtes Gefühl bleibt im Hinterkopf.

In diesem Artikel beschreiben wir, wieso man sich etwas Gedanken über den Alternativtext von Bildern machen sollte, und geben praktische Tipps, wie man die Beschreibung eines Bildes systematisch angeht.

Wir machen zuerst einen kleinen Abstecher zum Konzept „Alternativtext“. In Eile? Dann hier klicken, um direkt zu den Tipps zu springen ↓.

Alternativ-... was nochmal?

Die meisten Personen begegnen dem Konzept „Alternativtext für Bilder“ üblicher Weise in einer Schulung zur Barrierefreiheit von Webauftritten. Schnell ist der Punkt abgehandelt: Braucht man für blinde Personen. Weitere Erklärungen folgen nicht.

Dabei sind Alternativtexte ein wesentlicher Baustein für allgemein robuste Webseiten. Stellen Sie sich folgendes Szenario vor: Sie schreiben einen wichtigen Artikel, den Sie auf Ihrer Webseite veröffentlichen werden. Was ist der Zweck dieser Arbeit? Sie möchten, dass Ihr Inhalt von so vielen Besuchern der Zielgruppe wie möglich gelesen wird.

Um dieses Ziel zu erreichen, wurden von der Organisation, die auch HTML standardisiert, die Web Content Accessibility Guidelines (WCAG), zu deutsch Richtlinien für barrierefreie Webinhalte, entwickelt. Dieser Standard gibt Entwicklern und Redakteuren gleichermaßen Werkzeuge an die Hand, Barrieren für Besucher abzubauen oder gleich ganz zu vermeiden.

Den WCAG-Richtlinien geht es hier nicht nur um Screenreader. Viele Einschränkungen können ein Problem darstellen, wenn der Betreiber einer Webseite unvorsichtig bei der Umsetzung war.

Ein paar Beispiele:

• statt vollkommener Blindheit reicht manchmal auch schon ein stark eingeschränktes Sichtfeld oder eine Trübung wie beim Grauen Star, um Bilder unerkennbar zu machen.
• Eine grüne Wiese im roten Sonnenuntergang? Ca. 8% aller Männer können diese Farben nicht zuverlässig auseinander halten. Achten Sie bei Ihrem nächsten Tortendiagramm darauf, wie leicht man dieses Problem übersieht!
• Jenseits von Bildern behandeln die WCAG auch Themen wie Schriftgröße. Schauen Sie Ihrem alten Onkel oder einem ehemaligen Kollegen im Ruhestand einmal bei der Smartphone-Nutzung über die Schulter und beachten Sie die eingestellte Schriftgröße. Damit sollte Ihre Webseite auch klarkommen können.
• Funktionierende Autovervollständigung bei Formularen? Anschrift und Telefonnummer werden vom Browser korrekt eingefügt? Dann hat sich die Entwicklerin Gedanken über Barrierefreiheit gemacht. Sie werden es zu schätzen wissen, wenn Ihre dominante Hand einmal verletzt ist, und Sie mit der anderen tippen müssen.

Die Abteilung für Barrierefreiheit bei Microsoft bringt es mit folgender Infografik sehr gut auf den Punkt:

Nicht jede Beeinträchtigung muss permanent sein. Kümmern Sie sich um die Barrierefreiheit Ihrer Seite, und alle Nutzer werden davon profitieren.

Übrigens: Die WCAG-Richtlinien sind auch Grundlage für barrierefreie Webseiten, die die rechtlichen Vorgaben des Barrierefreiheitsstärkungsgesetz erfüllen. Sie schlagen also zwei Fliegen mit einer Klatsche, wenn Sie sie berücksichtigen.

Der Nutzen guter Alternativtexte

Nun gut, aber was genau leisten jetzt Alternativtexte?

Sie bieten einen zweiten Weg, um an die Informationen aus dem Bild zu kommen.

Nehmen wir wieder unser Beispiel mit dem wichtigen Artikel von oben. Sagen wir, Sie wollen Ihre Besucher über eine Verkehrssperrung in Ihrem Ort unterrichten. Sie fügen zwei Bilder ein. Eines setzen Sie zu Beginn, das die Stimmung für den Artikel vorgeben soll, z.B. ein Feuerwehrfahrzeug mit aktivem Blaulicht. Weiter im Fließtext fügen Sie eine Übersichtskarte ein, die eine Umleitung beschreibt.

In beiden Fällen kann ein gut gewählter Alternativtext helfen, die Information und die Stimmung an alle Leser zu übermitteln. Beschreiben Sie das Stimmungsbild zum Beispiel so:

Ein Feuerwehrfahrzeug mit aktivem Blaulicht fährt nachts zu einem Einsatz. Im Hintergrund ist eine Häuserzeile zu sehen.

Trifft der Ton des Texts die Stimmung, die Sie hervorrufen wollten? Können Sie sich das Bild allein von der Beschreibung vorstellen? Dann haben Sie einen erfolgreichen Alternativtext geschrieben.

Kommen wir zur Karte mit der Umleitung. Hier ist es wichtig, sich zu überlegen, welche Information die Leserin bereits aus dem Kontext erfahren hat. Stehen die Details zur Umleitung bereits im Fließtext, kann man sich beim Alternativtext kürzer fassen:

Umgebungskarte im Bereich um die Bahnhofstraße. Die Ausweichroute ist hervorgehoben.

Ist dies nicht der Fall, werden Sie ausführlicher:

Umgebungskarte im Bereich um die Bahnhofstraße. Die hervorgehobene Ausweichroute startet auf Höhe der Post, Hausnummer 12, biegt links in die Birnenstraße ab. Anschließend fährt man rechts in den Waldweg, um bei der Kreuzung mit der B566 wieder auf die Bahnhofstraße zu treffen.

Dieser Text ist spezifisch genug, dass eine Person, die das Bild nicht sehen kann, anderen Leuten, z.B. einem Fahrdienst, trotzdem die Strecke erklären kann.

Es gibt die verschiedensten Gründe, warum man das Bild nicht sehen können sollte.

Technische Robustheit

Denn der Alternativtext wird vom Browser noch in einer weiteren Situation verwendet. Falls das Bild aus technischen Gründen nicht geladen werden kann, wird er anstelle des Bildes für alle Besucher ausgegeben.

Dabei kann es unterschiedliche Ursachen haben, warum das Bild nicht lädt. Vom Tippfehler in der Webadresse beim Einfügen des Bildes bis hin zu technischen Ausfällen ist vieles denkbar. Auch in unserem Beispiel vom wichtigen Artikel kann ein Szenario so aussehen:

Die Nachricht von der Verkehrsbehinderung verteilt sich schnell in den sozialen Netzwerken. Viele Menschen besuchen Ihre Webseite für Informationen zur Umleitung. Dadurch wird der Webserver bis an seine Belastungsgrenzen strapaziert. Er schafft es in vielen Fällen nur noch, die HTML-Seite auszuliefern, aber für die Datenmengen der Bilder bleiben keine Ressourcen übrig.

Haben Sie einen guten Alternativtext geschrieben, werden Besucher auch in diesem Fall ihre gesuchte Information finden. Falls nicht, kommen sie immer und immer wieder, bis sie es schaffen, zum Bild vorzudringen. Das kann die Dauer von Serverproblemen um ein Vielfaches verlängern.

Automatisierte Werkzeuge

Und noch jemand profitiert von guten Alternativtexten: Der Google-Suchmaschinenbot. Er kann Alternativtexte auswerten und dadurch gegebenenfalls zielgerichteter Suchende auf Ihre Seite führen.

Auch andere Werkzeuge, die von Ihren Besuchern verwendet werden, können durch eine gute Bildbeschreibung besser funktionieren. RSS-Reader sind Programme, mit denen Menschen zentral neue Artikel von ihren Lieblingswebseiten sammeln. (Auch Open2C bietet Ihnen die Möglichkeit, diese RSS-Feeds für Ihre Seite anzulegen.)

Wenn ein Bild im RSS-Reader nicht lädt, macht es einen deutlich professionelleren Eindruck Ihres Auftritts, wenn stattdessen ein guter Beschreibungstext erscheint.

Konkrete Tipps: Wie schreibe ich gute Alternativtexte?

Hier ist eine schnelle Liste von Tipps für das Beschreiben von Bildern:

• Fragen Sie sich: Warum verwende ich dieses Bild? Was soll es bei den Lesern bewirken?
• Identifizieren Sie die wichtigen Teile des Bildes: Kann ich Personen oder Dinge benennen? Kann ich die Situation auf dem Bild einordnen?
• Verwenden Sie KI-erzeugten Text nicht kritiklos. Überarbeiten Sie ihn, bis Sie mit der Aussage zufrieden sind.
• Schreiben Sie den Text für alle Besucher Ihrer Seite, nicht nur für hypothetische Screenreader-Nutzer. Die Beschreibung kann in den verschiedensten Situationen nützlich werden.

Schauen wir uns jetzt ein paar Szenarien genauer an.

Häufige Fragen zu Alternativtexten

Ich habe gehört, dass man bei Zierbildern keinen Alternativtext angibt. Stimmt das?

Ja, das ist korrekt. (Kleines technisches Detail: Im HTML-Code muss trotzdem das Attribut angegeben werden: alt="".)

Allerdings müssen Sie sich bei einem Bild stets gut überlegen, ob es wirklich keine weitere Information trägt. Unser Beispielbild mit dem Feuerwehrauto oben hatte einen wichtigen Zweck für den Artikel. Es sollte definitiv einen Alternativtext haben.

Oftmals trifft das Kriterium auf Icons und Symbole auf der Seite zu. Aber Achtung! Auch Icons tragen gelegentlich wichtige Informationen. Sehen Sie selbst: Wenn Sie die Icons in dem folgenden Screenshot gedanklich ausblenden, welche Nummer ist die Telefonnummer und welche ist die Faxnummer?

Wenn Sie sich unsicher sind, ob Sie einen Alternativtext brauchen, stellen Sie sich selbst die Frage: Warum verwende ich das Bild, bzw. kann ich es auch einfach weglassen? Nur wenn Sie ganz sicher sind, dass das Bild keinem anderen Zweck als der grafischen Aufhübschung dient, sollten Sie die Beschreibung weglassen.

Soll ich erwähnen, dass es sich um ein Bild handelt?

Viele Alternativtexte im Web beginnen mit dem Wort „Bild:“. Das ist allerdings unnötig, denn Screenreader kündigen vor dem Vorlesen des Alternativtextes an, dass es sich um ein Bild handelt.

Eine Ausnahme ist, wenn Sie spezifisch auf die Art des Bildes eingehen wollen. Handelt es sich um ein Diagramm, eine Landschaftsaufnahme oder ein Porträt, dann können Sie das in der Beschreibung erwähnen.

Eine weitere Information hat nichts in Alternativtexten verloren: Copyright-Hinweise. Wenn ein Copyright-Hinweis notwendig ist, dann muss er auch für Besucher erreichbar sein, die nur das Bild und nicht den Text sehen. Stellen Sie ihn in eine Bildbeschreibung oder in einen dedizierten Bereich unterhalb des Artikels.

In seinem Blogpost Gute Alternativtexte für Bilder formulieren bietet Marvin Siefke noch weitere Tipps in diese Richtung.

Ich habe eine Bild-Unterschrift. Kann ich auf den Alternativtext verzichten?

In manchen Fällen bietet es sich an, eine Bild-Unterschrift zu verwenden. Man findet sie häufig mit Vorsätzen wie „Abbildung 1:“ oder „Bild 3:“. Kann man auf Alternativtext verzichten, wenn es eine Bildunterschrift gibt?

Die Antwort ist im Regelfall „nein“. Denn die Bild-Unterschrift dient einem anderen Zweck als der Alternativtext. Während letzterer das Bild selbst beschreibt, ordnet erstere es in den Gesamtkontext des Artikels ein.

Was heißt das konkret? Im Bild oben sehen Sie die Bildunterschrift „Abb. 1: Darstellung der Gewinnentwicklung“. Dieser Text verknüpft das Bild mit dem Text, in dem es vermutlich um die aktuelle wirtschaftliche Situation einer Organisation geht.

Ein Alternativtext könnte dann z.B. folgendermaßen aussehen:

Balkendiagramm mit vier Balken. Die Balken steigen von links nach rechts an. Über den Balken ist ein Pfeil, der aufwärts nach rechts oben weist.

Beschreiben Sie den Inhalt des Bildes, und nicht, was es für den Artikel bedeutet.

Wie auch immer Sie sich entscheiden, machen Sie einen Fehler nicht: Kopieren Sie nicht einfach den Text an beide Orte. Das verdoppelt für Screenreader-Nutzer nur den Text, ohne dass sie irgendeinen Mehrwert davon hätten.

Martin Underhill hat diesen Punkt noch etwas ausführlicher in seinem Blog behandelt (englisch).

Wie sieht es mit KI aus? Kann mir ChatGPT nicht die Arbeit abnehmen?

Moderne KI-Werkzeuge scheinen bei Bildbeschreibungen wahre Wunder zu bewirken.

Wenn wir ChatGPT mit folgendem Prompt fragen:

Bitte erstelle eine ein- bis zweizeilige Beschreibung des Bildes, die als Alternativtext in HTML verwendet werden kann.

erhalten wir zum Beispiel folgende Antwort:

Gruppe von Läuferinnen und Läufern in Startposition mit den Händen am Boden auf einer sandigen Strecke im Freien. Die Personen stehen dicht nebeneinander und bereiten sich auf den Start eines Laufrennens vor.

Das hört sich schon mal nicht verkehrt an. Aber vergessen Sie nicht den Zweck, den Sie mit dem Bild verfolgen!

Wenn Sie einen Artikel über die Vorbereitungen Ihrer Lieblings-Fußballmannschaft schreiben, dann kann der Alternativtext auch so lauten:

Lauftraining auf Sand. Die Mannschaft des 1. FC Schrankenlos steht in Startposition bereit zum Wettlauf.

Wenn der Artikel eine Person beschreibt, wäre ein guter Alternativtext:

Josef Stanglhuber in der Mitte seiner Trainingskollegen bei den Vorbereitungen zum 100m-Sprint. Er trägt ein schwarzes T-Shirt.

In beiden Fällen sind die Texte deutlich aussagekräftiger als das, was die KI produziert hat. Und das ist auch nicht verwunderlich. Nur Sie können wissen, was das wichtige auf dem Bild für Ihren Artikel ist.

Überlegen Sie sich, weshalb Sie das Bild verwenden. Was möchten Sie Ihren Lesern zeigen? Und diese Information bilden Sie im Beschreibungstext ab.

KI-Werkzeuge sind optimal, um eine initiale Schreibblockade zu überwinden, aber kontrollieren und überarbeiten Sie deren Ausgabe, sodass sie zu dem passt, was Sie ausdrücken wollen.

Ich habe viele Bilder ohne Alternativtext und die Wahl zwischen keinem Alternativtext und KI-erzeugtem. Wie entscheide ich mich?

Sie stehen vor einer Bildergalerie mit 300 Schnappschüssen vom letzten Firmenausflug und sollen für jeden davon einen Alternativtext erfinden? Das ist ein Ding der Unmöglichkeit und in vielen Fällen auch nicht zielführend.

Vermeiden Sie den Impuls, die Bilder nach und nach einem KI-Tool zu füttern. Es kann in diesem Fall nämlich durchaus besser sein, einen generischen Text zu verwenden, wie „Bild 1 von 300“.

Denn kein Alternativtext ist besser als falscher oder irreführender Alternativtext. Wenn Sie Ihren Lesern signalisieren, dass Sie für dieses Bild keinen passenden Alternativtext liefern können, geben Sie ihnen die Möglichkeit an die Hand, selbst für Abhilfe zu sorgen. Technikafine Personen mit Sehproblemen haben z.B. gelegentlich ihr eigenes KI-Werkzeug, um sich Bildbeschreibungen erzeugen zu lassen.

Der Vorteil für den Leser ist, dass er zum einen dann weiß, dass der Beschreibungstext automatisch erstellt wurde, und er zum anderen sein Werkzeug so einstellen oder prompten kann, dass es ihm die Teile des Bildes bevorzugt beschreibt, die ihn am ehesten interessieren.

Entscheiden Sie auf Basis Ihrer Leserschaft. Werden sie von automatisch generierten Beschreibungstexten profitieren? Sind die Texte von ausreichend guter Qualität, dass sie einen Mehrwert bieten? Unterscheiden sie wichtige Details in den Bildern gut genug, dass die Leserin nicht 300 Mal den gleichen Text in ähnlicher Formulierung hören muss? Und wie schätzen Sie selbst die Technik-Fähigkeiten Ihres Publikums ein?

Alternative Bildbeschreibungen sind (k)eine Kunst

Verzweifeln Sie nicht an Bildbeschreibungen. Es ist wie mit vielen Fertigkeiten eine Sache der Übung. Sie werden besser und schneller, je mehr Sie diese Fähigkeit trainieren.

Erinnern Sie sich daran, warum Sie das Bild für Ihren Artikel verwenden. Dann geht die Arbeit deutlich leichter von der Hand. Vielleicht macht es Ihnen am Ende sogar ein wenig Freude, Ihren zukünftigen Besuchern zu beschreiben, was Sie gerade sehen.

Viel Spaß beim Bilder Beschreiben!

Titelfoto von Kwami Fattah Al Sissi auf Unsplash, Balkengrafik von Umm-e-Hani Ali auf Unsplash, Foto der Läufer von Annie Spratt auf Unsplash