Über Bilder und Alt-Texte

Bildbeschreibungen zu erstellen gehört nicht zu meinen Lieblingsaufgaben, da bin ich ehrlich. Es ist immer eine Gratwanderung zwischen wichtigen und überflüssigen Details. Aber ich habe viel gelernt, und Barrierefreiheit ist nichts, was man nur dann liefern sollte, wenn es keine Umstände macht.

Was ist ein Alternativtext überhaupt?

Das Alt-Attribut wird dem HTML-Element <img> zugeordnet: <img src="bild.jpg" alt="Zwei Hunde schlafen auf dem Sofa."> . Es enthält Text, der vom Browser alternativ statt der Grafik angezeigt werden kann ( MDN Web Docs ). Der Alternativtext wird von Screen Readern an der Stelle vorgelesen, wo das Bild eingefügt wurde. Außerdem wird er von Browsern angezeigt, wenn ein Bild nicht geladen werden konnte.

Als ich meine Website überarbeitet habe, habe ich darauf geachtet, dass alle Bilder einen Alternativtext (auch Alt-Text genannt) bekommen. Nicht nur wegen der oben genannten Gründe, sondern auch für die Suchmaschinenoptimierung (SEO). Solange Suchmaschinen noch keine automatische Bilderkennung beherrschen, sind sie auf den Text aus dem Alt-Attribut angewiesen, um Relevanz und Inhalt bewerten zu können. Das heißt, wer keinen Alternativtext schreibt, vergibt unter anderem die Chance, dass der eigene Inhalt gefunden werden kann.

Worauf man beim Schreiben von Alt-Text achten sollte

Laut MDN Web Docs sollte man bei dem Verfassen von Bildbeschreibungen Folgendes beachten:

Der Text sollte das von der Grafik Dargestellte kurz und sinnvoll wiedergeben, so dass der Inhalt, den sie transportieren, ersichtlich wird. Ist dies nicht möglich, sollte das Attribut weggelassen werden. Reine Dekorationselemente sollten hingegen mit einem leeren Attribut (alt="") eingefügt werden; Alternativtexte wie “Roter Punkt” sind unbedingt zu vermeiden!

Bei Grafiken, die wie die hier genannten Punkten oder solchen, die zum Beispiel nur farbige Akzente setzen, sollte man ein leeres Alt-Attribut einsetzen. Screenreader lesen sonst die Namen der Grafiken vor, was Nutzer*innen auf Dauer nervt und keinen Mehrwert bietet.

Aber wie sieht das bei Fotos aus, die z. B. in Headern genutzt werden? Denken wir nur an Stockfotos, die für sich vielleicht nichtssagend sind, aber grafische Untermalung für eine Aussage genutzt werden. Eine kurze Recherche ergibt, dass manche Designer auch hier empfehlen, den Alt-Text wegzulassen, da diese Bilder nur der Dekoration dienen.

Leer lassen oder nicht, das ist hier die Frage

Das einzuschätzen finde ich schwierig. Oft setzt man ein Bild auch ein, weil sie eine bestimte Stimmung transportieren, die dem Inhalt einen Rahmen bietet. Sollten Menschen mit Sehbehinderung darauf verzichten müssen?

Vor Kurzem stieß ich auf den Artikel What is it like to use a screen reader . Der Autor ist der Kommunikationsspezialist Anthony Vasquez, der selber blind ist. Er schreibt:

An example I recently found […] is “a grasshopper waits on a vaccine syringe,” next to a headline about second vaccine doses. Though some may deem this a decorative image deserving of an empty alt, I disagree. I appreciate getting this much information by just browsing a homepage. It feels like I’m getting the same information a sighted reader would get after skimming the headlines and their corresponding photographs.

Er schreibt: „Es fühlt sich an, als bekäme ich die gleichen Informationen wie Sehende, wenn sie Überschriften und dazugehörige Fotos überfliegen.“ Leere Alt-Attribute, wenn falsch eingesetzt, enthalten Nutzer*innen von Screen Readern Witze, Stimmungen oder sogar Inhalte vor, die Sehende mit dem Bild bekommen. Das hat natürlich auch etwas mit Inklusion und Gerechtigkeit zu tun.

Sollte man bestimmte Ausdrücke vermeiden?

Wenn wir uns mit Alternativtext beschäftigen, müssen wir auch darüber sprechen, ob man seine Wortwahl entsprechend anpassend sollte.

Auf Twitter bot die Userin Inka vor Kurzem ein Q&A über ihre Blindheit an. Der ganze Thread ist übrigens lesenswert. Auf die Frage, ob man Farben oder Ausdrücke wie „hell“ oder „strahlend“ in der Bildbeschreibung vermeiden sollte, antwortete sie folgendermaßen:

Sollte man nicht. Selbst wenn ein von Geburt blinder Mensch noch nie etwas wirklich strahlendes gesehen hat, kennt er den Ausdruck in der Regel und weiß was er bedeutet. Das geht also völlig in Ordnung.

— Inka-👩‍🦯 (@SoEineBlinde) September 6, 2021

Die Frage ist aus zwei Gründen interessant und wichtig:

Zum Einen scheint Vielen nicht klar zu sein, dass Screen Reader nicht nur von Sehbehinderten genutzt werden. Auch Menschen, die nur eine Hand zur Verfügung haben (z.B. durch einen Bruch oder weil sie ein Baby schleppen müssen), eine Augenverletzung haben, oder die ihre Hände und Augen für etwas anderes benötigen, nutzen sie. Ich persönlich lasse mir gerne lange Artikel vorlesen, während ich koche oder durch die Stadt laufe. Beides Situationen, in denen man nicht auf’s Smartphone starren sollte.

Zum Anderen ist es so, dass nicht alle Blinden von Geburt an blind sind. Oder zu 100% nichts sehen. Manche sehen noch Farben und Schemen, aber können nur schlecht Details erkennen.

Zudem weiß man heute, dass die Denkweise von Person zu Person variiert. Manche sehen farbige Bilder und Videos vor ihrem inneren Auge, andere sehen in Gedanken schwarz-weiß oder sogar Wörter, Buchstaben. Beispiele sind etwa visuelles Denken bei Autist*innen oder Aphantasie . Aber auch Menschen, die sich keine Bilder vorstellen können, verstehen Formulierungen wie „strahlend blauer Himmel“ oder „pink wie Barbie“. Weil Sprache mehr als Bilder transportiert.

Fazit

Ich persönlich bin dazu übergangen, für alle Header-Bilder und Fotografien einen Alternativtext zu schreiben. Auch bei abstrakten Bildern, die für sich genommen eigentlich nur verschmierte Farbe sind (zum Beispiel in meinem Sketchbook), schreibe ich einen kurzen Satz. Für mich sind es nur ein paar Sekunden Mehrarbeit, für jemand anderes aber die Möglichkeit zur Teilhabe.

Zum Weiterlesen:

• Detailierte Informationen über Alternativtexte und wie man sie schreiben sollte findet ihr bei WebAIM .
• Wer mehr dazu lesen möchte, wie man gute Alternativtexte schreibt, sollte bei Lucia Clara Röcktäschel reinschauen: Gute Alternativtexte schreiben: So geht’s .