Alternativtexte für Bildelemente in digitalen Medien? Gähn … Geht es noch uninteressanter? Auf den ersten Blick: Wohl kaum. Doch sobald wir etwas genauer hinsehen, wird schnell klar: In diesem Thema steckt eine Menge drin – an barrierefreier Kommunikation, an Nutzerorientierung, an User Experience (UX), an Suchmaschinenfreundlichkeit … Und das alles geht weit über die bloße Erfüllung des Barrierefreiheitsstärkungsgesetzes (BFSG) hinaus.
Das gilt übrigens generell für barrierefreies UX-Design. (Dieser Beitrag erklärt, warum.) Alternativtext ist ein winzig kleiner Teil davon. Noch dazu einer, der in vielen Fällen gar nicht zu sehen ist. Umso mehr lohnt es sich, die Sache etwas genauer zu betrachten.
Hier erfahrt Ihr,
- was ALT-Texte eigentlich sind,
- warum ihr Einsatz sinnvoll ist,
- für welche Elemente Alternativtexte erforderlich sind (und für welche nicht),
- was es beim Erstellen von ALT-Texten zu beachten gilt (mit Tipps und Praxisbeispielen) und
- warum ich dieses Thema ganz persönlich alles andere als langweilig finde.
Was sind ALT-Texte überhaupt?
Digitale Medienformate bestehen – ganz grob gesagt – aus Bildelementen und maschinenlesbarem Text. Das bedeutet: Informationen, die nicht als maschinenlesbarer Text verarbeitet sind (z. B. visuelle Informationen oder in Bildform wiedergegebener Text), werden von den Systemen in der Regel nicht als solche erkannt. Es entstehen also Leerstellen in der maschinellen Wahrnehmung und Vermittlung von Informationen.
ALT-Texte bzw. Alternativtexte dienen dazu, diese Leerstellen zu füllen. So soll es möglich sein, den gesamten Informationsgehalt eines digitalen Mediums zu verstehen, auch wenn bildliche Informationen aus irgendeinem Grund nicht wiedergegeben oder erfasst werden können.
Der Effekt von Alternativtexten zeigt sich auf zwei Ebenen:
- Screenreader (Vorleseprogramme) sind in der Lage, ALT-Texte vorzulesen.
- ALT-Texte erscheinen als Alternative, wenn ein Bildelement nicht angezeigt werden kann.
Ursprung und bekanntester Anwendungsfall von ALT-Texten ist HTML. Doch längst lassen sich Bildelemente auch in vielen anderen Anwendungen mit Alternativtexten versehen.
Beispiel: ALT-Text für ein Header-Motiv
Der Alternativtext dazu: “Eine liegende Acht, das Symbol für Unendlichkeit, als Himmelserscheinung über einer Gebirgslandschaft kurz vor Sonnenaufgang.“
Nehmen wir an, die Überschrift zu diesem Motiv lautete „Hält länger als einen Tag: unser Service-Versprechen“. Ohne die Information zum Bildinhalt wäre der Clou, der sich aus dem Zusammenspiel von Bild und Text ergibt, nicht zu erfassen.
Warum sind ALT-Texte sinnvoll?
Der Einsatz von Alternativtexten ist eine der zentralen Forderungen der Regelwerke zur Barrierefreiheit (z. B. die Web Content Accessibility Guidelines), des European Accessibility Acts und des BFSG. Das Ziel der Maßnahme ist es, auch blinden Menschen und Personen, deren Sehkraft stark eingeschränkt ist, den Zugang zu wichtigen Produkten, Dienstleistungen und Informationen zu ermöglichen.
Statistisch lässt sich die Zahl der Betroffenen nur schwer erfassen. Denn die amtliche Bestätigung einer diesbezüglichen Schwerbehinderung greift hier deutlich zu kurz. REHADAT schätzt daher, dass in Deutschland rund 1,2 Millionen blinde und sehbehinderte Menschen leben.
Wenn wir jedoch etwas genauer hinsehen, wird der Kreis der potenziell Betroffenen noch wesentlich größer. Und dabei geht es nicht nur um Einschränkungen der menschlichen Wahrnehmungsfähigkeit …
Menschliche Einschränkungen
- Permanent: Menschen mit dauerhafter Erblindung oder stark eingeschränkter Sehfähigkeit.
- Zeitlich begrenzt: Etwa, wenn die Sehkraft durch eine akute Krankheit eingeschränkt ist.
- Situationsbedingt: Jemand hat beispielsweise seine Brille verlegt.
- Individuell: Es gibt z. B. auch Menschen, die sich digitale Inhalte während einer anderen Tätigkeit – etwa beim Autofahren – vorlesen lassen.
Technische Einschränkungen
Oft aber hat das Fehlen visueller Informationen gar nichts mit der Wahrnehmungsfähigkeit des Menschen zu tun. Hier einige Beispiele für technische Hürden bei der Wiedergabe von Bildern, auf die wir alle täglich stoßen können:
- Engpässe bei der Datenübertragung
- Bilder, die im Browser nicht geladen werden können
- Bilder in E-Mails, die aufgrund individueller Einstellungen blockiert werden
- Deaktivierte Bildanzeigen oder Content-Filter in Netzwerken von Unternehmen oder Institutionen
- Probleme mit bestimmten Dateiformaten
Statt eines bloßen Fragezeichens im leeren Bildrahmen können Alternativtexte hier Entscheidendes zum Verständnis des Gesamtinhalts beitragen.
Insgesamt dürfte also klar sein: Das Thema Alternativtext betrifft – so wie die Barrierefreiheit generell – viel mehr Menschen und Situationen, als so mancher annimmt. Und es geht noch weiter. Denn Alternativtexte (oder deren Fehlen) können sich auch auf die Bewertung von Inhalten durch Suchmaschinen und die Zustellbarkeit von E-Mails auswirken.
ALT-Texte, Suchmaschinen und Spam-Filter
Suchmaschinen nutzen den ALT-Text (neben dem Bildtitel und der Bezeichnung der Bilddatei), um den Inhalt eines Bildes zu „verstehen“. Im Zusammenspiel mit allen anderen Onpage-SEO-Maßnahmen können gute ALT-Texte also dazu beitragen, die Relevanz und die Reputation einer Seite aus Sicht der Suchmaschine zu erhöhen.
Spam-Filter analysieren den HTML-Inhalt von E-Mails. Dazu gehören auch die ALT-Texte von Bildern. Ein hoher Bildanteil kann bei den Filtern grundsätzlich Spam-Verdacht auslösen. Fehlen zudem die Alternativtexte, verstärkt das diesen Eindruck. Besonders kritisch: unseriöse Alternativtexte mit typischen Spam-Triggern wie „Gratis!!!“ oder „100 % Gewinn“.
Wann sind ALT-Texte erforderlich?
Alternativtexte sind dazu da, Bildinhalte oder die Funktion eines Bildes zu vermitteln, wenn jemand das Bild nicht sehen kann. Doch das heißt nicht, dass sämtliche visuellen Elemente eines digitalen Mediums ALT-Texte benötigen. Hier eine Übersicht.
Fotos, Illustrationen & Co
Alle Fotos, Illustrationen, Animationen, 3D-Renderings etc. benötigen ALT-Text. (Tipps dazu findet Ihr im Abschnitt „How to“.) Enthält ein Bild zusätzlich einen (nicht maschinenlesbaren) Text, dann muss dieser ebenfalls im ALT-Text wiedergegeben werden.
Grafiken
Entscheidend ist hier, ob eine Grafik einen Inhalt, der bereits textlich vermittelt wurde, nur wiederholt bzw. zusammenfasst – oder ob die Grafik zusätzliche Informationen liefert. Im ersten Fall genügt ein kurzer Satz (z. B.: „Eine Balkengrafik zeigt die oben beschriebene Bevölkerungsentwicklung.“). Im zweiten Fall müsst Ihr den zusätzlichen Informationsgehalt der Grafik im ALT-Text erklären.
Auch hier gilt: Enthält eine Grafik nicht maschinenlesbare Textelemente, müssen diese im ALT-Text wiedergegeben werden. Daher ist es grundsätzlich sinnvoll, Dinge wie etwa Bildüber- oder -unterschriften nicht als Teil des Bildes, sondern als maschinenlesbaren Text darüber bzw. darunter zu positionieren.
Tipp: Ihr könnt das Erstellen des ALT-Textes auch als Test dafür betrachten, ob eine Grafik eventuell zu textlastig oder zu komplex ist.
CTA-Buttons und ähnliche Elemente
Ist eine Schaltfläche – z. B. für einen Call-to-Action – ein reines Bild (also nicht maschinenlesbar), muss der Text auf dem Button als ALT-Text wiedergegeben werden. Ist der Text maschinenlesbar, benötigt Ihr keinen ALT-Text.
Es gibt jedoch die Meinung, dass auch in diesem Fall ein Alternativtext erforderlich ist, um genau zu beschreiben, was die Aktion auslöst. Also z. B. ergänzend zu „Outfits entdecken“: „Zur Produktübersicht im Online-Shop“. Muss das wirklich sein? Hierzu eine Wortmeldung aus einer Betroffenen-Community: „Wir können zwar schlecht sehen. Aber wir sind nicht doof.“ 😉
Bild- und Funktionselemente, die keinen ALT-Text benötigen
Rein dekorative Grafikelemente transportieren keine Informationen und haben keine Funktion. Deshalb benötigen sie keinen Alternativtext.
Das Gleiche gilt für Icons, die keine zusätzlichen Informationen vermitteln, sondern nur dazu dienen, Inhalte optisch zu strukturieren oder zu verstärken.
Auch Funktionselemente zur Navigation, Links, Formularfelder oder strukturierende Landmarks (z. B. <header>, <main>, <footer> etc.) benötigen keine Alternativtexte. Designer:innen und Frontend-Developers verwenden hier bestimmte Rollen und Labels. So werden diese Elemente von den Screenreadern erkannt.
Ausnahme: Grafische Elemente mit einer Funktion, die sich nur optisch vermittelt (z. B. ein Pfeil-Icon, das per Klick oder Touch zu einem weiteren Inhalt führt). Diese sollten – so wie Buttons ohne maschinenlesbaren Text – mit ALT-Texten versehen werden.
How to? 7 Tipps zum Erstellen von guten ALT-Texten
Auch wenn Alternativtexte nicht nur Menschen mit Sehbeeinträchtigung betreffen, sollte die Faustregel immer sein:
Formuliert ALT-Texte so, dass ein Mensch mit Sehbehinderung
den Bildinhalt bzw. die Funktion eines Bildes verstehen kann.
Die folgenden Tipps helfen Euch, das korrekt und sinnvoll umzusetzen:
Ein junger, braungebrannter Wanderer springt lachend auf einer Bergwiese in die Luft. Er trägt Bergstiefel, eine Funktionshose, eine 3-in-1-Jacke und einen leichten Rucksack. Im Hintergrund zeichnet sich ein idyllisches Tal ab, das in herbstlichem Nebel liegt.
Ein junger Mann in Outdoor-Kleidung springt lachend auf einer herbstlichen Bergwiese.
Tipp: Probiert auch als Sehende ab und zu einen Screenreader aus. Man bekommt dann sehr schnell einen guten Eindruck, wann ALT-Texte hilfreich sind – und wann sie durch zu viel oder unnötigen Text den Fluss des Erfassens behindern.
2. Ein Bild ist ein Bild ist ein Bild …
Ein Screenreader „weiß“, dass ein Bild ein Bild ist. Und ein nicht übertragenes Bild erscheint in der Regel als leerer Rahmen. Statt „Ein Bild mit zwei Kaninchen“ genügt also „Zwei Kaninchen“.
3. Keine wertenden Beschreibungen
ALT-Texte sollen Bildhalte nüchtern und objektiv beschreiben. Verzichtet deshalb auf Interpretationen oder Wertungen.
Vor einem Feriendomizil in stylishem Terracotta-Look steht ein Fahrzeug mit exklusiver Lackierung in Nachtblau Metallic. Es lädt zum Einsteigen und Losfahren ein.
Ein Fahrzeug in Nachtblau Metallic vor einem Wohngebäude in moderner, mediterraner Architektur.
4. Die Inszenierung der Bildobjekte klarmachen
Betroffenen-Organisationen wie die Hilfsgemeinschaft der Blinden und Sehschwachen Österreichs raten dazu, auch die Ausrichtung und das Verhältnis der abgebildeten Elemente zu beschreiben.
Ein Beispiel: Eine Frau steht mit dem Rücken zur Kamera und blickt auf ein entfernt liegendes Bergpanorama.“
5. Den Kontext berücksichtigen
Stellt sicher, dass der ALT-Text wirklich zum Inhalt passt. Bei unserem Beispiel mit dem springenden Wanderer etwa ging es um Outdoor-Bekleidung. Deshalb ist deren Erwähnung passend. Würde es sich stattdessen nur um das Genießen der Natur drehen, wäre sie überflüssig.
6. In Bildern enthaltene Texte wiedergeben
Sind Texte Teil eines Bildes, können Screenreader sie nicht erfassen. Deshalb müsst Ihr sie im ALT-Text zitieren.
Beispiel: Eine jubelnde Menschenmenge stürmt in Richtung des Betrachters. Text: „Aktionswochen vom 03. bis 27.05.“
7. Kein Keyword-Stuffing, keine Clickbait-Taktiken
Wie bereits erwähnt, werden ALT-Texte auch von Suchmaschinen und Spam-Filtern wahrgenommen. Nicht unwichtig dabei: Was diese beiden nicht mögen oder gar abstrafen, nervt meistens auch die User. Hier die Dos und Don’ts dazu.
Formuliert ALT-Texte immer für die Nutzer:innen, nicht für die Suchmaschine. (Das sieht auch Google so.) Fügt sich ein Keyword auf natürliche Weise in den ALT-Text ein und unterstützt es das Bildverständnis, ist das okay. Passt eine Formulierung mit Keyword nicht zum Bild oder zum Kontext: Lasst es besser. Und auf keinen Fall solltet Ihr Alternativtexte künstlich mit Keywords vollstopfen („Keyword-Stuffing“).
Ein weiteres, absolutes No-Go: platte Werbung und Appelle.
Marken-Sneakers im coolen Design: Jetzt kaufen! 50 % Rabatt auf alle!!!!!
Das Gleiche gilt für reißerische Clickbait-Taktiken (die z. B. auch in E-Mail-Betreffzeilen abgestraft werden):
Ein zufrieden lächelnder Mann. Verdoppeln auch Sie Ihr Geld!
ALT-Texte von der KI erstellen lassen?
Ein Bild gut (und knapp) zu beschreiben ist für Nicht-Profis gar nicht so einfach. Lasst Euch also gerne von der KI unterstützen. Doch Large Language Models wie ChatGPT oder Perplexity erkennen manchmal die Intension eines Bildes nicht richtig – und liegen in der Beschreibung dann leicht, aber entscheidend daneben. Außerdem können sie die Wichtigkeit verschiedener gezeigter Objekte fehlinterpretieren.
Nehmt das Ergebnis also nur als Anregung, um es dann zu optimieren. KI-Bildbeschreibungen stattdessen eins zu eins übernehmen? Besser nicht.
Zum Schluss: Ist das nicht alles ein bisschen pillepalle?
Maßnahmen zur Barrierefreiheit – wie z. B. ALT-Texte – dienen dazu, Informationen, Angebote und Leistungen für möglichst alle Menschen zugänglich zu machen. Das ist für sich gesehen schon mal Grund genug, dem Thema Beachtung zu schenken.
Doch man kann es auch aus einer anderen Perspektive betrachten: Warum sollten Unternehmen eigentlich bestimmte Zielgruppen schlechter behandeln als andere – statt auf sie zuzugehen und sie für sich zu gewinnen? Und wie wir gesehen haben: Diese Zielgruppen sind viel größer, als man denken könnte. Spätestens hier wird klar, dass es um wesentlich mehr geht, als darum, eine gesetzliche Vorgabe zu erfüllen.
Was ich als Kommunikationsberater ebenso spannend finde: Es handelt sich hier um eines dieser Mikrothemen, die auf der strategischen und konzeptionellen Ebene selten Platz finden. Doch jede Strategie, jede unterstützende Technologie und jedes Konzept ist nur so gut wie das Ergebnis, das ein User am Ende wahrnimmt. Und oft entscheiden die Kleinigkeiten, ob sein Erlebnis positiv oder enttäuschend ist. Fehlende oder schlechte ALT-Texte sind ein gutes Beispiel dafür. Deshalb: Lasst uns detailversessen bleiben!
