Posted on

Gute Alternativtexte schreiben: So geht’s

Suchfeld

Vor Kurzem habe ich meinen Follower*innen auf Facebook und Instagram gezeigt, wie sie dort Alternativtexte hinzufügen können. Diese Texte helfen Menschen mit einer Sehbehinderung, deine Bilder inhaltlich zu erfassen. Außerdem sind sie aus SEO-Perspektive nützlich, damit deine Inhalte online gefunden werden. Meine Follower*innen haben sich einen Blogartikel darüber gewünscht, wie man gute Alternativtexte schreibt. Also zeige ich dir jetzt, was Alternativtexte bringen, wie du sie deinen Bildern hinzufügst und wie du sie am besten formulierst.

Inhalt:

Du willst noch mehr hilfreiche Tipps rund um Vielfalt, Inklusion und Barrierefreiheit für dein Online Marketing? Abonniere meinen Newsletter und lass dich regelmäßig informieren! Zum Start bekommst du mein E-Book „Kleine Einführung ins Diversity Marketing“. Danach erhältst du etwa alle zwei Wochen eine Mail mit Mehrwert und Unterstützung für dein Unternehmen. Zu jedem meiner Blogartikel verschicke ich ein Cheat Sheet, Worksheet oder einen Extratipp zum Thema. Diese Woche zum Beispiel erhalten meine Abonnent*innen ein Arbeitsblatt, mit dem sie üben können, für ihre Bilder bessere Alternativtexte zu schreiben.

Was bringen Alternativtexte?

Warum du überhaupt Alternativtexte für deine Bilder schreiben solltest? Es gibt zwei Gründe: sehbeeinträchtige Menschen und Suchmaschinenoptimierung (SEO).

Hast du dich schonmal gefragt, ob blinde Menschen Instagram nutzen? Überraschung: Sie tun es! Deshalb hat Instagram vor einigen Monaten auch die Option eingeführt, Postings mit Alternativtexten zu versehen. Das Alt-Attribut als Teil des HTML-Codes von Websites gibt es aber schon viel länger. Zu Beginn der Existenz des Internets konnten noch nicht alle Browser Bilder überhaupt darstellen. Manche Grafiken haben auch heute noch sehr lange Ladezeiten. Oder sie laden gar nicht, weil die Nutzerin diese Funktion in ihrem Browser ausgestellt hat. Deshalb gibt es Alternativtexte, die bei Bedarf anstelle der Bilder über deren Inhalt informieren.

Viele Menschen mit einer Sehbehinderung nutzen einen Screenreader. Das ist eine Software, die ihnen die Inhalte von Websites vorliest. Manche verwenden zur Ausgabe auch eine Braillezeile – sie lesen die Inhalte also in Blindenschrift. Aber Bilder kann ein Screenreader nicht auslesen. Ebenso geht es übrigens Google! Deshalb helfen Alternativtexte nicht nur Menschen, sondern auch Suchmaschinen, deine Bilder zu verstehen. Du schlägst also zwei Fliegen mit einer Klappe, wenn du treffende Alternativtexte verfasst!

Übrigens: Die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) schreibt Alternativtexte sogar vor. In der Anforderung 1.1 heißt es: „Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der Nutzerin präsentiert wird, ist eine Text-Alternative bereitzustellen, die den Zweck dieses Inhalts erfüllt.“

Die Technik: Wie du deine Bilder mit Alternativtexten versiehst

Bevor ich dir zeige, wie du sinnvolle Alternativtexte schreibst, musst du natürlich wissen, wie du sie deinen Bildern hinzufügst. Exemplarisch gebe ich dir jeweils eine Anleitung für Instagram, Facebook und WordPress.

Instagram

Bei Instagram kannst du deine Fotos entweder direkt beim Hochladen mit einem Alternativtext versehen oder diesen später hinzufügen. Letzteres ist sinnvoll, wenn du deine Bilder über eine andere App wie beispielsweise Planoly hochlädst, die keine Alt-Text-Funktion bereitstellt. Außerdem hast du die Möglichkeit, all deine älteren Bilder nachträglich barrierefrei zu machen.

So fügst du Alternativtexte direkt beim Hochladen deiner Bilder hinzu:

  • Lade dein Bild ganz normal hoch und bearbeite es, bis du zu dem Fenster gelangst, in das du die Bildunterschrift eingeben kannst.⠀⠀⠀⠀⠀⠀⠀
  • Tippe auf Erweiterte Einstellungen. Unter der Überschrift Zugänglichkeit steht Alternativtext eingeben. Tippe darauf. ⠀
  • Gib deinen Alternativtext ein und tippe auf Speichern.

So versiehst du deine Bilder nachträglich mit einem Alternativtext:

  • Wähle ein Bild aus deinem Feed aus und tippe auf die drei Punkte oben rechts. Tippe dann auf Bearbeiten.
  • Der Bearbeitungsmodus öffnet sich. Tippe auf Alternativtext bearbeiten (innerhalb des Bildes unten rechts).⠀⠀⠀⠀
  • Gib deinen Alternativtext ein und tippe auf das Häkchen.

Facebook

Wenn du ein Bild bei Facebook hochlädst, erhält es einen automatisch generierten Alternativtext. Diesen kannst du aber nachträglich mit einer eigenen, präziseren Beschreibung ersetzen:

  • Wähle ein Bild aus deinem Feed aus und klicke unten rechts auf Optionen. In dem Dialogfenster, das dann erscheint, wählst du Alternativtext ändern.
  • Du siehst nun den automatisch generierten Alternativtext. Klicke auf Erstellten Alternativtext überschreiben.
  • Gib deinen Alternativtext ein und klicke auf Speichern.

WordPress

WordPress ist eines der meistgenutzten Content-Management-Systeme (CMS). Auch auf deiner WordPress Website versiehst du deine Bilder ganz einfach mit Alternativtexten:

  • Öffne den Beitrag oder die Seite, der du ein Bild hinzufügen möchtest. Klicke auf Datei hinzufügen.
  • Lade ein Bild hoch oder wähle eines aus der Mediathek aus und klicke es an.
  • Auf der rechten Seite öffnet sich ein Fenster mit mehreren Bearbeitungsmöglichkeiten – darunter ist auch ein Eingabefeld für den Alternativtext. Schreibe deinen Text hinein, bearbeite die übrigen Felder und klicke auf In den Beitrag einfügen.

HTML

Nutzt du ein anderes CMS, kannst du den Alternativtext auch einfach als HTML-Code hinzufügen. Das geht so:

<img src=“logo.jpg“ alt=“Logo LCR“ />

Das Alt-Attribut alt=““ bietet zwischen den Anführungszeichen Platz für deinen Text.

Wie du Alternativtexte schreibst, die jede*r versteht

Alternativtexte haben zwei Aufgaben: Sie beschreiben die Funktion und den Inhalt von Bildern oder Grafiken. So können blinde Menschen sie identifizieren und mit den textlichen Inhalten der Website in Zusammenhang bringen. Bilder und Grafiken können dekorativ, funktional oder informativ sein. Eine weitere Gruppe sind Schriftgrafiken. Hier ist die Wahl des passenden Alternativtexts einfach: Du übernimmst genau den Text, der in der Grafik zu sehen ist.

Außerdem gibt es komplexe Grafiken wie Diagramme sowie Image Maps und Bildergruppen. Das sind Sonderfälle, auf die ich in diesem Artikel nicht näher eingehen werde. Am Ende findest du aber einige Empfehlungen zum Weiterlesen, falls du tiefer in die Thematik einsteigen willst.

Dekorative Bilder

Bei Bildern und Grafiken, die nur der Dekoration dienen und dem Text inhaltlich nichts hinzufügen, lässt du das Feld für den Alternativtext leer. Das ist zum Beispiel der Fall, wenn neben einem Link noch ein kleines Icon zu sehen ist. Oder es handelt sich um eine abstrakte Grafik, die du als Illustration auf deiner Website verwendest. Oft ist es aber gar nicht so einfach, zu entscheiden, ob ein Bild rein dekorativ und für die sehbeeinträchtigte Leserin unwichtig ist. Wenn du unsicher bist, verfasse einfach eine kurze, identifizierende Beschreibung.

Beispiel

Abstrakte Grafik

Alternativtext: Abstrakte Grafik

Funktionale Bilder

Eine Grafik ist funktional, wenn sie gleichzeitig ein Link oder eine Schaltfläche ist. Mit einem Klick auf mein Logo gelangst du beispielsweise auf die Startseite meiner Website. Diese Funktion des Logos sollte sichtbar gemacht werden. Dass es sich um einen Link handelt, erkennt der Screenreader. Aber nicht, wohin er führt. Du schreibst also als Alternativtext das Linkziel: „Startseite Firmenname“. Bei mir steht: „Startseite LCR“. Ist dein Logo nicht verlinkt, lautet der Text „Logo Firmenname“ – in meinem Fall „Logo LCR“. Wenn du einen Button hast, zum Beispiel für die Suche mit einer kleinen Lupe, lautet der Alternativtext am besten „Suche starten“.

Beispiel

Suchfeld

Alternativtext: Suche starten

Informative Bilder

Informative Bilder fügen deinem Text Informationen hinzu, die Leser*innen ohne das Bild nicht erfassen könnten. Wie ausführlich du die Alternativtexte für solche Bilder gestalten musst, hängt immer vom Kontext und vom Zweck des Bildes ab. Informationen, die du schon im Text oder in der Bildunterschrift gibst, brauchst du nicht noch einmal in den Alternativtext aufzunehmen. Beschreibe die wichtigsten Bildbestandteile so kurz wie möglich, aber so ausführlich wie nötig. Hier sind ein paar Beispiele:

Lucia Clara Rocktäschel
Foto: Hans-Michael Lenz

Alternativtext: Lucia Clara Rocktäschel

Erklärung: Bei einem Porträtfoto schreibst du in den Alternativtext den Vor- und Nachnamen der abgebildeten Person. Weitere Details musst du nicht benennen, es sei denn du möchtest eines besonders hervorheben. Bei einem Foto von mir könnten das die pinken Haare sein. Je nach Kontext kannst du die Bildunterschrift für weitere Informationen nutzen. Geht es zum Beispiel um Frisuren, könnte die Bildunterschrift lauten: „Bunte Haarfarben wie Pink sind gerade voll im Trend“. Schreibst du einen Artikel über die abgebildete Person, könnte in der Bildunterschrift etwas über ihren Beruf oder ihre Vorliebe für ausgefallene Haarfarben stehen.

Lucia Clara Rocktäschel liegt auf dem Sofa in ihrem Büro und arbeitet am Laptop.
Foto: Carolin Mattke

Alternativtext: Lucia Clara Rocktäschel liegt auf dem Sofa in ihrem Büro und arbeitet am Laptop.

Erklärung: Ein Bild von einer Person, die eine Handlung ausführt, braucht einen etwas ausführlicheren Alternativtext. Beschreibe kurz, was die Person tut. Du kannst auch erwähnen, in welcher Umgebung sie sich befindet. Wie immer hängt es vom Kontext ab, in dem das Bild steht. Geht es im dazugehörigen Artikeln darum, wie positiv sich Pflanzen auf den Arbeitsalltag auswirken, müsstest du die Grünpflanze links im Bild auch im Alternativtext in den Fokus rücken.

Drei rote Birnen.

Alternativtext (1): Drei rote Birnen.

Alternativtext (2): Drei rote Birnen der Sorte Birnina.

Erklärung: Auch hier kommt es wieder auf den Kontext an. Geht es um gesunde Ernährung und Obst, reicht (1) aus. Handelt es sich aber um ein Produktfoto für die Birnensorte Birnina, ist (2) die richtige Wahl. Birnen können verschiedene Farben haben. Deshalb ist es sinnvoll, im Alternativtext anzugeben, dass diese Birnen rot sind.

Checkliste: Alternativtexte schreiben leicht gemacht

Jetzt weißt du, welche Alternativtexte sich für verschiedene Bildarten eignen. Zum Schluss gebe ich dir noch ein paar Regeln mit auf den Weg, die du beachten solltest, wenn du Alternativtexte schreibst. Sie basieren auf Empfehlungen der Web Accessibility Initiative (WAI) und der am Ende dieses Artikels aufgeführten Quellen.

  • Länge: Alternativtexte sind idealerweise maximal 80 bis 100 Zeichen lang – sie bestehen also aus ein bis zwei Sätzen. Je kürzer desto besser, aber: Am wichtigsten ist, dass deine Alternativtexte gut verständlich sind und sie Inhalt und Funktion des Bildes korrekt wiedergeben.
  • Kontext: Achte immer auf den Kontext, in dem das Bild steht. Was ist das Thema des Beitrags, den das Bild illustriert? Mit welchem Ziel setzt du das Bild ein? Welche Informationen stehen im Text und in der Bildunterschrift? Die Antworten auf diese Fragen helfen dir, den passenden Alternativtext zu finden.
  • Dopplungen vermeiden: Screenreader sagen den Nutzer*innen, dass es sich um eine Grafik handelt und erkennen auch Verlinkungen. Du brauchst deine Alternativtexte also nicht zu beginnen mit „Dieses Bild zeigt, …“ oder „Dieses Bild ist ein Link.“
  • Objektivität: Halte deine Alternativtexte so objektiv wie möglich. Deine persönliche Meinung oder Interpretation des Bildes gehört nicht in den Alternativtext. Drückt das Bild offensichtlich eine bestimmte Emotion aus oder soll diese erzeugen, darfst du das allerdings erwähnen.
  • Prüfen: Wie du am besten herausfindest, ob dein Alternativtext verständlich geschrieben ist? Lies ihn einer Person vor, die das dazugehörige Bild noch nicht gesehen hat. Kann sie sich vorstellen, was auf dem Bild zu sehen ist? Wenn ja, hast du deine Arbeit gut gemacht. Wenn nicht, musst du nochmal ran. Falls du einen sehbehinderten Menschen kennst, ist das natürlich noch besser.

Hat dir dieser Guide geholfen? Lass mir gern dein Feedback in den Kommentaren da!

P.S.: Wenn dir das alles zu viel ist und du keine Lust hast, deine Alternativtexte selbst zu schreiben – sprich mich an! Ich helfe dir gerne dabei, deine Bilder und Grafiken barrierefrei zu machen.

Quellen zum Weiterlesen:

Masterarbeit von Sarah Sophie Kitza zur Gestaltung von Alternativtexten
Leitfaden der TU Chemnitz
Buch: „Barrierefreiheit verstehen und umsetzen“ von Jan Eric Hellbusch und Kerstin Probiesch.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.