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. Doch wie kannst du gute Alternativtexte schreiben? In diesem Artikel zeige ich dir, was Alternativtexte bringen, wie du sie deinen Bildern hinzufügst und wie du sie am besten formulierst.
Inhalt:
- Was bringen Alternativtexte?
- Die Technik: Wie du deine Bilder mit Alternativtexten versiehst
- Wie du Alternativtexte schreibst, die jede*r versteht
- Checkliste: Alternativtexte schreiben leicht gemacht
- Quellen zum Weiterlesen
Was bringen Alternativtexte?
Warum du überhaupt Alternativtexte für deine Bilder schreiben solltest? Es gibt zwei Gründe: Der wichtigere ist, dass du deine Bilder mit Alternativtexten auch sehbeeinträchtigen Menschen zugänglich machst. Zusätzlich sind Alternativtexte hilfreich für die Suchmaschinenoptimierung (SEO) deiner Website.
Hast du dich schon mal gefragt, ob blinde Menschen Instagram nutzen? Überraschung: Natürlich tun sie es! Deshalb hat Instagram 2018 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 WordPress, Instagram, Facebook und LinkedIn.
WordPress
WordPress ist eines der meistgenutzten Content-Management-Systeme (CMS). Dort kannst du deine Bilder ganz einfach mit Alternativtexten versehen und deine Website so etwas barrierefreier machen:
- Ö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.
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.
Tipp: Wenn ich auf Instagram Carousel-Postings mache, also mehrere textlastige Slides, dann kopiere ich mir den Text von den Slides in eine Notizapp und ergänze sie eventuell um Bild- oder Grafikbeschreibungen. So brauche ich sie beim Posten bloß noch in das richtige Feld zu kopieren.
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. Direkt beim Hochladen klickst du einfach auf den kleinen Pinsel, der erscheint, wenn du die Maus über das Bild bewegst. Daraufhin öffnet sich ein Fenster, in dem du den Alternativtext bearbeiten kannst. Bei bereits hochgeladenen Fotos gehst du so vor:
- 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.
Wichtig: Wenn du deine Beiträge von anderen Apps wie z. B. Instagram aus auf Facebook crosspostest, wird der Alternativtext nicht übernommen! Du musst also doch noch einmal zu Facebook und den Alternativtext dort hinzufügen.
Auf LinkedIn Alternativtexte für Fotos und Grafiken zu erstellen, ist einfach: Du lädst dein Bild hoch und unten links erscheint die Schaltfläche „Alternativtext hinzufügen“. Da klickst du drauf und kannst eine 120 Zeichen lange Beschreibung eingeben. Speichern und fertig!
Wie du Alternativtexte schreibst, die alle verstehen
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. Einleitend schreibst du dazu, wie der Text aussieht – also z. B. „Schwarze Schrift auf weißem Hintergrund: …“
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, wird oft empfohlen, das Feld für den Alternativtext leer zu lassen. 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. Dazu gibt es natürlich auch unterschiedliche Meinungen. Wenn du unsicher bist, verfasse einfach eine kurze, identifizierende Beschreibung. Danach kannst du gern noch eine genauere Beschreibung anfügen – wer sich für diese nicht interessiert, kann sie ja auch einfach überspringen. Beachte, dass die wichtigste Information ganz am Anfang stehen sollte.
Beispiel
Alternativtext: Abstrakte Grafik oder Abstrakte Grafik aus Dreiecken in verschiedenen Blau-, Grün-, Orange- und Gelbtönen
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“. Auch hier kannst du optional eine genauere Beschreibung ergänzen.
Beispiel
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:
Alternativtext: Porträt von Lucia Clara Rocktäschel. Sie schaut lächelnd nach rechts aus dem Fenster. Sie trägt einen schwarzen Pullover mit aufgestickten Perlen und ihre pink-blauen Haare offen.
Erklärung: Bei einem Porträtfoto schreibst du in den Alternativtext den Vor- und Nachnamen der abgebildeten Person. Weitere Details musst du nicht zwingend benennen, es sei denn du möchtest sie besonders hervorheben. Bei einem Foto von mir könnten das die pinken Haare sein. Manche Screenreader-Nutzer*innen fordern aber auch eine vollständige Beschreibung aller Bildinformationen. 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.
Alternativtext: Lucia Clara Rocktäschel liegt auf dem Sofa in ihrem Büro und arbeitet am Laptop. Neben dem Sofa steht ein goldgestrichener Beistelltisch mit Zimmerpflanzen.
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.
Alternativtext (1): Drei rote Birnen sind auf einem Stück Holz aufgereiht.
Alternativtext (2): Drei rote Birnen der Sorte Birnina sind auf einem Stück Holz aufgereiht.
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. Mittlerweile sind aber auch sehr ausführliche Alternativtexte gängig, die mehrere Sätze lang sind – je nach Komplexität des Bildes.
- 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.
- Feedback einholen: 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.
Hat dir dieser Guide geholfen? Lass mir gern dein Feedback in den Kommentaren da!
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.
Website und Workshops von barrierefreiposten.de