ALT-Texte und UX: So langweilig, dass es schon wieder spannend wird?

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

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 …

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:

1. Klar und knapp

Formuliert knapp, präzise und neutral, was auf dem Bild zu sehen ist. Konzentriert Euch dabei auf die wesentlichen Bildinhalte. Lasst alles Unnötige weg. Textlängen von max. 100 bis 150 Zeichen können hier als Orientierung dienen. ALT-Texte müssen auch keine ganzen Sätze sein. Oft genügt eine stichwortartige Beschreibung (z. B. „Eine Frau mit grün gefärbten Haaren“).

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.

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.

Das Gleiche gilt für reißerische Clickbait-Taktiken (die z. B. auch in E-Mail-Betreffzeilen abgestraft werden):

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!