Alt-Texte: Deine Bilder für alle

Veröffentlicht am 2. Juli 2024
Autor*in: Nina Jameson
Illustration von zwei Bildern und einem Screenreader, der andeutet, Alt-Texte vorzulesen.

Du fängst gerade an, Alt-Texte zu schreiben und bist unsicher, ob sie ausreichend sind oder nicht? Dann ist dieser Artikel für dich. Das Schreiben von Alt-Texten fühlt sich gerade am Anfang schwerer an, als es ist. In diesem Artikel möchte ich dir mitgeben, was wir in den vergangenen Jahren über das Schreiben von Alt-Texten gelernt haben.

Was ist ein Alt-Text

Ein Alt-Text ist eine Textalternative für ein Bild. Durch den Alt-Text können Menschen, die Bilder nicht sehen, diese wahrnehmen. Denn im Gegensatz zu Bildern kann Text von jeder Software zuverlässig ausgelesen werden. Ein Screenreader kann den Alt-Text zum Beispiel vorlesen oder an eine Braillezeile weitergeben, sodass der Text ertastet werden kann.

Der Aufbau eines Alt-Textes

Ein Alt-Text sollte nicht länger als 1 bis 2 Sätze sein. Das bietet nicht viel Platz, ist aber auch Absicht, denn der Alt-Text soll nur die Kernaussage deines Bildes enthalten. Zusammengefasst:

  • Länge: 1 bis 2 Sätze
  • Inhalt: Kernaussage des Bildes
  • Darf nicht in einen Alt-Text: Emojis, Links und Anführungszeichen.

Warum muss mein Alt-Text so kurz sein?

Alt-Texte sind formatlos. Deshalb kann innerhalb von Alt-Texten nicht navigiert, gesprungen oder gesucht werden. Je länger deine Alt-Texte sind, desto anstrengender wird es, sie anzuhören.

Stell dir vor, du schreibst 20 Sätze, es gibt aber eigentlich nur eine wichtige Information ganz am Ende des Alt-Textes. Ich müsste mir jedes Mal die 20 Sätze anhören, weil ich nicht ans Ende springen kann. Das ist nervig, deshalb halten wir uns kurz. Wenn du so viel zu dem Bild zu sagen hast, gehört es in den Text anbei.

Weil Alt-Texte formatlos sind, können sie keinen „rich content“ enthalten. Das ist Entwickler*innen-Slang für alles, was kein Text ist. Emojis und Links sind kein reiner Text und darum würden die Inhalte nicht wie geplant ankommen.

Auch mit Anführungszeichen solltest du vorsichtig sein, denn der Alt-Text wird im Code mit Anführungszeichen umgeben, um den Anfang und das Ende des Textes zu markieren. Wenn du also im Text selbst Anführungszeichen nutzt, kann es sein, dass du den Alt-Text schließt. Dadurch geht ein Teil deines Alt-Textes verloren und im schlimmsten Fall können deine Informationen dann nicht mehr ausgegeben werden.

Der Unterschied zwischen Alt-Text und Bildbeschreibung

Eine Bildbeschreibung ergänzt das Bild um Information, die nicht unbedingt aus dem Bild hervorgehen. Zum Beispiel, wo ein Foto aufgenommen wurde. Ein Alt-Text ist die Alternative zum Bild. Die Bildbeschreibung liefert ergänzende Informationen, der Alt-Text ist der Ersatz.

In unserem Beispiel sehen wir ein Foto vom Brandenburger Tor. Darunter die Bildbeschreibung: „Das Brandenburger Tor mit dem Pariser Platz in westlicher Blickrichtung zur Straße des 17. Juni, 2007.“ Während die Bildbeschreibung Details verrät, die man dem Bild nicht ohne Weiteres ansieht, würde ein Alt-Text nur das Foto beschreiben.

Ein Foto des Brandenburger Tors mit Bildbeschreibung, die sagt, dass das Foto von 2007 ist und man nach Westen auf das Tor blickt.

Alt-Text

„Das Brandenburger Tor ist ein großes Monument aus sechs massiven Säulen mit einer Bronze-Statue auf dem Dach, zwei Anschlussbauten links und rechts im gleichen Stil und einem großen Platz davor. Dort stehen einige Menschen, dahinter Bäume und leicht bewölkter Himmel.“

Keyword-Stuffing

Keyword-Stuffing bedeutet, den Alt-Text mit SEO-relevanten Inhalten voll zustopfen. Ein Alt-Text ist allerdings für Menschen gedacht, nicht für Suchmaschinen. Wenn du den Alt-Text, hart gesagt voll „müllst“ mit unzusammenhängenden Schlagwörtern, ist das nicht barrierefrei geschweige denn Nutzer*innenfreundlich. Wenn du mich fragst, ist ein guter Alt-Text auch ohne Stuffing relevant genug für Suchmaschinen.

Das gehört in einen Alt-Text: die Kernaussage deines Bildes

Die Kernaussage ist die Antwort auf die Frage: „Was willst du mit dem Bild sagen?“. Diese Antwort haben vor allem die Leute parat, die die Bilder für den individuellen Anwendungsfall heraussuchen.

Alt-Texte sind keine Ein-Person-Aufgabe

Barrierefreiheit ist Teamarbeit, auch Alt-Texte sind keine Aufgabe, die nur an einer Person hängen sollten. Wenn du ein Bild heraussuchst, solltest du mit dem Bild auch den Alt-Text liefern. Wenn du Bilder von anderen bekommst, sag ihnen, dass du einen Alt-Text dazu benötigst.

Vergiss das nicht, denn ich kann dir aus Erfahrung sagen, dass das Schreiben von Alt-Texten mehr Zeit in Anspruch nimmt. Am einfachsten kann die heraussuchende Person sagen, was damit gemeint ist. Darum sollte der Alt-Text auch von dieser Person kommen. Wenn du findest, dass der Alt-Text nicht passend ist, gib das gerne an die Person zurück. Wir alle müssen das Schreiben von Alt-Texten erst lernen.

Der Alt-Text verrät nichts, was nicht ohnehin klar ist

Der Alt-Text darf nur enthalten, was aus dem Bild hervorgeht oder was von den Leser*innen des Artikels aus dem Text entnommen werden kann.

Stell dir vor, du schreibst einen Artikel über erfolgreiche Frauen und zeigst ein Bild von Angela Merkel. Dann darfst du im Alt-Text nur schreiben, dass es sich um Angela Merkel handelt, wenn diese Information aus deinem Text hervorgeht. Andernfalls steckst du einem Teil deiner Besucher*innen mehr Informationen zu, die andere nicht haben.

Schreibe im Alt-Text also nur, was ohnehin jeder weiß, der deine Inhalte liest. Wenn du Menschen namentlich im Alt-Text nennen willst, gib diese Information einfach im Text mit. Du und ich haben schon in der Schule gelernt, dass man sich auf die Bilder beziehen soll, die man verwendet. Unsere Lehrer*innen hatten wie immer recht: Wenn du dich an ihre Best Practices hältst, machst du dir das Leben sehr viel einfacher.

Unterschiedliche Arten von Bildern

Es gibt im Großen und Ganzen vier unterschiedliche Arten von Bildern:

  • Informatives Bild: Ich weiß mehr, nachdem ich das Bild gesehen habe.
  • Funktionales Bild: Ich soll etwas tun.
  • Komplexes Bild: Ich weiß sehr viel mehr, nachdem ich das Bild gesehen habe und das ist nicht in 1 bis 2 Sätzen beschreibbar.
  • Dekoratives Bild: Ich verliere nichts, wenn ich das Bild nicht sehe.

Informative Bilder

Die meisten Bilder sind informative Bilder. Informative Bilder liefern Wissen, dass ich ohne das Bild nicht hätte. Das kann ein Fakt sein, aber auch Emotionen fallen darunter. Bilder, die das Branding unterstützen, sind informativ und nicht dekorativ.

Beispiel informatives Bild

Folgendes Bild zeigt ein junges Mädchen mit blonden Haaren, das konzentriert mit bunten Bauklötzen spielt. Sie trägt ein pinkes Oberteil und eine blaue Latzhose. Das Mädchen sitzt an einem Tisch, auf dem verschiedene farbige Bausteine verteilt sind. Sie baut einen Zug aus Bausteinen zusammen. Ihre Mimik ist ernst und fokussiert, während sie einen roten Baustein auf den hintersten Wagen des Zuges setzt. Im Hintergrund sind weitere Spielzeuge und Teile der Umgebung sichtbar. Die Szene wirkt hell und farbenfroh.

Ein Mädchen sitzt auf dem Boden und spielt mit Bausteinen.

Eine sehr ausführliche Bildbeschreibung und ungeeignet für einen Alt-Text. Wir wollten uns ja kurz halten. Was genau an dem Bild wichtig ist, können wir erst entscheiden, wenn wir den Kontext kennen, indem das Bild eingebettet wird.

Szenario 1: Online-Shop für Tobilino-Bausteine

Wir befinden uns in einem Online-Shop und wollen unsere Tobilino-Bausteine verkaufen. Unsere Kernaussage ist: „Du sollst meine Steine kaufen, Kinder lieben sie, sie sind bunt und außerdem ist das Spielen äußerst fesselnd.“ Der Hintergrund, was das Mädchen trägt und andere Details sind unwichtig. Darum erwähnen wir sie auch nicht. Unser Alt-Text könnte lauten: „Ein Mädchen errichtet konzentriert aus bunten Tobilino-Bausteinen einen Zug mit zwei Wägen und einer Lok an der Spitze. Die Tobilino-Bausteine können nach Belieben miteinander kombiniert werden.“ Der Name Tobilino ist an der Stelle in Ordnung, denn der Name des Produktes geht aus der Produktseite selbst hervor.

Szenario 2: Digitales Fotoalbum einer Kita

Wir erstellen ein digitales Fotoalbum für unsere Kita, um mehr Eltern für uns zu begeistern. Die Kinder werden auf derselben Seite nicht vorgestellt, man kennt das Mädchen auf dem Bild also nicht. Was wir in diesem Fall mit dem Bild sagen wollen, ist, dass die Kita-Kinder gezielt fördert. Unser Alt-Text könnte lauten: „Ein Kind spielt konzentriert mit den Bausteinen der Kita. Altersgerechte Förderung ist uns wichtig, wir bringen Kindern die motorischen Grundlagen pädagogisch bei“.

Funktionale Bilder

Funktionale Bilder sollen mich animieren, eine Aktion durchzuführen. Dazu zählen zum Beispiel Social Media Icons auf einer Website. Die Icons sollten nicht beschrieben werden, sag mir stattdessen, was ich tun soll. Falsch wäre also „das Logo von LinkedIn“. Besser wäre: „Folge Nina auf LinkedIn“.

Folge Nina auf Linkedin

Komplexe Bilder

Komplexe Bilder sind besonders informative Bilder und können nicht in 1 bis 2 Sätzen beschrieben werden. Dazu gehören Diagramme.

Balkendiagramm;  Besucherzahlen von Januar bis Juni
Besucher*innen-Zahlen der Website JaneMalt.de

Der Alt-Text beschreibt in diesem Fall, was die Grafik zeigt. Zum Beispiel: „Balkendiagramm; Besucher*innen-Zahlen von Januar bis Juni“. Was die Grafik im Detail verrät, musst du an anderer Stelle genauer erklären. Das kann in auf der Seite sein, auf der du das Diagramm einfügst. Du kannst die Erläuterung aber auch an einer anderen Stelle liefern, verlinke dann in unmittelbarer Nähe auf die detaillierte Beschreibung der Grafik.

Dekorative Bilder

Dekorative Bilder sind keine Informationsträger. Ich verliere nichts, wenn ich das Bild nicht habe. Ich kann dir sagen: Die wenigsten Bilder sind dekorativ, meistens sind sie informativ. Ein Beispiel für ein dekoratives Bild wäre ein Trennstrich im Bildformat.

Es ist wie beim Dating: Wenn du darüber nachdenken musst, ob es dekorativ ist oder nicht, ist es wahrscheinlich nicht der Fall. Geh auf Nummer sicher und schreibe einen Alt-Text.

Ist es nicht nervig, viele informative Bilder mit wenig Inhalt zu bekommen?

Die Frage stellen sich viele, hauptsächlich in Bezug auf Websites und Hintergrundbilder, die das Layout anreichern. Benötigst du eine Alternative, für ein Bild Alt-Text, dass eine Person zeigt, die vor einem Laptop sitzt und Spaß bei der Arbeit hat? Stört das nicht eher?

Berechtigte Frage, es kann sein, dass manche Nutzer*innen an deinen Bildern kein Interesse haben. Du solltest ihnen aber ermöglichen, selbst zu entscheiden, ob sie sich den Alt-Text anhören wollen oder nicht. Sehbehinderte Menschen können die Bilder überspringen, wie alle anderen auch. Du musst dir also keine Sorgen machen, dass du sie voll spammst. Genauso wie du visuell über Bilder springst, die dich nicht interessieren, kann das auch eine blinde Person.

Text im Bild

Text in Bildern, der gelesen werden soll, ist prinzipiell nicht in Ordnung – außer es gibt eine gleichwertige Alternative in Textform. Die Web Content Accessibility Guidelines (WCAG) enthalten dazu noch ein paar wenige Ausnahmen. Das ist zum Beispiel für Dokumentationszwecke in Ordnung, bei Redundanz oder wenn das Objekt nun mal Text hat, wie das Foto eines Buchcovers. Mehr zu dem Kriterium 1.4.5 der WCAG (englisch).

Alt-Texte für LinkedIn, Facebook, Instagram und Co.

Hier gelten dieselben Anforderungen, wie bei anderen Bildern auch. Mit einer Ausnahme: Dekorative Bilder auf Social Media gibt es nicht, denn dafür müsste dir die Plattform erlauben, Bilder als dekorativ zu markieren. Darum solltest du immer einen Alt-Text schreiben.

Die automatisch generierte Alt-Texte aller Plattformen müssen immer kontrolliert werden. Stand heute bin ich mir sicher, dass du in den meisten Fällen auf ein besseres Ergebnis kommst. Man kann den Vorschlag natürlich aus Ausgangsbasis benutzen.

In diesem Beitrag lernst du, wie du barrierefreie Alt-Texte in Facebook und Instagram einstellst!

Puh, ich weiß nicht, wie ich dieses Bild sinnvoll beschreiben soll

Der Alt-Text ist eine sehr gute Möglichkeit, dein Bild zu hinterfragen. Vielleicht macht das Bild an dieser Stelle einfach keinen Sinn? Dann kannst du die Herausforderung annehmen und entweder ein besseres suchen oder deine Grafik überarbeiten, um die Aussage zu konkretisieren.

Über Nina Jameson

Hi, Ich bin Nina, Gründerin und Geschäftsführerin der Gehirngerecht Digital GmbH. Unser Mission ist es, das Internet barrierefrei und damit zugänglich für alle zu machen! Auf dieser Mission suchen wir immer Partner und Unterstützer. Wenn du Interesse hast, mit uns zusammenzuarbeiten oder selbst hier einen Blog-Eintrag zu veröffentlichen, melde dich jederzeit bei uns!

Du hast noch weitere Fragen?