direkt zum Inhalt

Gute Alternativtexte für Bilder formulieren

Mehrere Polaroid-Urlaubsfotos liegen auf dem Rücken eines Fotoalbums
Foto: © Rirri/unsplash.com

Bildern kann in HTML und damit auch in Redaktionssystemen wie WordPress, Kirby, Joomla und vielen anderen ein Alternativtext hinterlegt werden. Neben Webseiten besteht die Möglichkeit inzwischen auch auf fast allen relevanten Social Media-Plattformen. So kann selbst Instagram als sehr visuelles, soziales Netzwerk möglichst barrierefrei genutzt werden.

Warum sollte man einen Alternativtext angeben?

Ein Alternativtext hat mehrere Vorteile. Der wichtigste Grund ist, dass man den Inhalt und die Funktion des Bildes auch Menschen zugänglich macht, die das Bild nicht sehen können. Screenreader und andere Hilfstechnologien sind nicht in der Lage, ein Bild selbst zu interpretieren. Sie können nur wiedergegeben, was dem Bild hinterlegt wurde.

Auch für sehende Menschen kann ein Alternativtext zum Verständnis des Kontexts beitragen, wenn das Bild beispielsweise nicht geladen wird. Insbesondere über den Mobilfunk kann die Verbindung beim Laden manchmal abbrechen, sodass dann aber immerhin der Alternativtext im Browser dargestellt wird.

Sinnvoll ist die Hinterlegung von alternativen Texten auch für Suchmaschinen. Die sogenannten »Crawler«, die den Inhalt der Webseite erfassen, haben kein visuelles Verständnis. Google & Co. kann damit mit einem einfachen Mittel mitgeteilt werden, was auf dem Bild zusehen ist. Das trägt erheblich dazu bei, auch über dieses Bild in Suchmaschinen gefunden werden zu können.

Alternativtext hinzufügen

  • Der Alternativtext wird als ALT-Attribut in den IMG-Tag geschrieben: <img src="sonnenuntergang.jpg" alt="Die Sonne geht hinter einem Feld unter">. Das funktioniert für alle Bildformate – ob JPEG, PNG, GIF, WEBP, AVIF oder SVG – gleich.
  • Etwas versteckt befindet sich beim Posten über die App in der letzten Eingabemaske, in der man unter anderem auch die Bildunterschrift einträgt, ganz unten in kleiner Schrift die Schaltfläche »Erweiterte Einstellungen«. Unter dem Punkt Barrierefreiheit kann dort ein Alternativtext eingegeben werden.

    Nachträglich ist das weniger versteckt: Wenn man ein Bild bearbeitet, befindet sich unten rechts im Bild eine Schaltfläche »Alternativtext hinzufügen«.
  • Twitter ist hier sehr bedienfreundlich. Beim Erstellen eines Tweets muss zuerst ein Bild hochgeladen werden. Anschließend wird unter dem Bild eine Schaltfläche »Beschreibung hinzufügen« sichtbar. Mit bis zu 1.000 Zeichen kann der Inhalt in einem sich öffnendem Dialog beschrieben werden.
  • Facebook legt automatisch Alternativtexte an, die meist aber eine unzureichende Qualität haben. Es empfiehlt sich, diese manuell einzutragen. Am Computer muss dazu ein Bild ausgewählt und hochgeladen werden. Im nächsten Schritt wird eine Schaltfläche »Bearbeiten« sichtbar, wenn man mit dem Mauszeiger über das Bild fährt. Mit der Option »Erstellten Alternativtext überschreiben« kann ein Alternativtext eingetragen werden.

    Nachträglich kann man einen Alternativtext auch auf Smartphones hinzufügen. Dazu muss das Bild auf Facebook geöffnet werden. Über das Symbol mit den drei Punkten öffnet sich dann die Option »Alternativtext hinzufügen«.

Wie formuliert man einen guten Alternativtext?

Das sollten Sie berücksichtigen ✔️

  1. So kurz wie möglich und so ausführlich wie nötig – dieses Motto sollte beim Formulieren eines guten Alternativtextes gelten. Normalerweise sollten ein bis zwei Sätze reichen, um den Inhalt und den Zweck des Bildes zu vermitteln.
  2. Dient die Grafik dem Zweck der Verlinkung, ist deren Ziel interessanter als der Inhalt des Bildes. Wenn ein Bild einer Brieftaube mit dem Kontaktformular verlinkt ist, kann der Alternativtext »öffnet Kontaktformular« lauten.
  3. Beachten Sie den Kontext: Ein Kleinbus, der dem Sonnenuntergang entgegen fährt, kann ein dekoratives Bild für ein Reiseblog sein – und ist damit fast ausreichend beschrieben. Interessant wäre noch der Ort der Aufnahme. Für ein Autoblog wäre dagegen die Automarke und das Modell, vielleicht das Baujahr relevant.
  4. Text, der in dem Bild zu sehen ist, sollte im Wortlaut wiedergegeben werden. Manchmal werden auch Tabellen als Grafik eingebaut. Diese lassen sich meist unmöglich mit einem Alternativtext beschreiben, weshalb es immer besser ist, Tabellen direkt einzubauen – nicht als Grafik. Für komplexere Diagramme empfiehlt sich eine ausführliche Beschreibung, die man unter dem Bild gegebenenfalls verlinken kann.
  5. Achten Sie auf die Grammatik und die Zeichensetzung: Ein Alternativtext wird von Screenreadern genauso vorgelesen, wie er hinterlegt wurde.

Das sollten Sie vermeiden ❌

  1. Die Information, dass es sich um eine Grafik handelt, wäre in dem Alternativtext redundant und überflüssig. Screenreader geben diese Information im Zusammenhang mit dem anschließenden Alternativtext ohnehin wieder.
  2. Ein Urheberrechtsnachweis wird ebenfalls oft in den Alternativtext aufgenommen, allerdings hat das dort nichts zu suchen. Normalerweise trägt der Urheberrechtsnachweis nicht zum Verständnis des Bildes bei.
  3. Mit der Suchmaschinenoptimierung sollte man es hier ebenfalls nicht übertreiben: Anstelle einer »echten« Beschreibung des Bildes werden deshalb manchmal Keywords oder rein werbliche Aussagen in den Alternativtext aufgenommen, die mit dem Bildinhalt kaum etwas zu tun haben. Das geht zu Lasten der Verständlichkeit und katapultiert die Webseite bei Google & Co. auch nicht nach oben.
  4. Vermieden werden sollte auch eine identische Bildunterschrift, die auf den Alternativtext folgt. In diesen Fällen ist es bedienfreundlicher, den Alternativtext leerzulassen, weil sonst mit dem Screenreader der gleiche Text doppelt vorgelesen wird.

Mit Barrierefreiheit mehr Menschen erreichen

Nehmen Sie den Kontakt für eine persönliche Beratung auf:

Beratung vereinbaren

Fazit

Ein Alternativtext erhöht die Barrierefreiheit enorm. Entscheidend ist aber eine sinnvolle Verwendung, um die Verständlichkeit sicherzustellen.