Alt-Texte richtig einsetzen: So werden Bilder barrierefrei

Bilder sind ein zentrales Thema für die Barrierefreiheit im Web. Schließlich können sie Informationen enthalten, die für das Verständnis eines Inhalts wichtig sind. Mit Alternativtexten im so genannten Alt-Tag hilfst du allen Menschen, die diese Bilder nicht sehen können. Dabei gilt: Ein solcher Text sollte gut überlegt sein. Und das kann bisweilen heißen, ihn wegzulassen. Wann das der Fall ist und wie ein guter Alt-Text aussieht, erklärt dir Jan Tißler in diesem Beitrag.

Zusammenfassung

• Bilder benötigen Alt-Texte für Barrierefreiheit, damit sie für Menschen mit Sehbehinderungen oder bei schlechter Internetverbindung zugänglich sind.
• Nicht jedes Bild braucht einen beschreibenden Alt-Text, aber für jedes Bild sollte bewusst entschieden werden, ob und welcher Alt-Text nötig ist.
• Der Inhalt des Alternativtextes entscheidet sich dabei anhand der Art und Funktion des jeweiligen Bildes.
• In WordPress können Alt-Texte in der Mediathek, im Gutenberg-Editor oder im klassischen Editor eingetragen werden, wobei der Alt-Text vom Titel, der Beschriftung und der Beschreibung zu unterscheiden ist.
• Alt-Texte dienen primär der Barrierefreiheit und nicht der Suchmaschinenoptimierung, sollten also für Menschen optimiert sein.

Bilder machen deinen Content lebendiger, ansprechender und idealerweise verständlicher. Was für sehende Menschen ein Vorteil ist, kann für Menschen mit Sehbehinderungen allerdings zur Barriere werden. Ähnlich gilt das für Nutzer, denen die Bilder beispielsweise wegen einer schlechten Internetverbindung unterwegs nicht angezeigt werden. Genau für solche Momente sind Alt-Texte gedacht.

In einem früheren Artikel haben wir bereits erklärt, warum Barrierefreiheit im Web generell wichtig ist. Neben der rechtlichen Komponente wie etwa dem European Accessibility Act (EAA) geht es vor allem darum, allen Menschen gleichermaßen Zugang zu Informationen zu ermöglichen. Alt-Texte sind dafür ein wesentlicher Baustein.

In diesem Artikel geht es um einen ganz konkreten, alltäglichen Aspekt der digitalen Barrierefreiheit: Wie kannst du dafür sorgen, dass die Bilder in deinen Texten, auf deinen Produktseiten oder in deinen Social-Media-Posts für alle zugänglich sind? Welcher Alt-Text ist wirklich hilfreich? Und wann brauchst du überhaupt keinen?

Grundregel: Jedes Bild braucht eine Entscheidung

Die häufigste Frage zum Thema Alt-Texte lautet: „Braucht dieses Bild überhaupt einen Alt-Text?“ Die Antwort mag überraschen: Nein, nicht jedes Bild braucht einen beschreibenden Alt-Text, aber jedes Bild braucht eine bewusste Entscheidung dazu.

Der wichtigste Grundsatz bei dieser Entscheidung ist: Was soll das Bild aussagen oder bewirken?

• Vermittelt das Bild wichtige Informationen, die nicht im umgebenden Text stehen?
• Hat das Bild eine Funktion, z.B. als Button oder als Link?
• Ergänzt das Bild den Inhalt in bedeutsamer Weise?
• Oder dient es rein dekorativen Zwecken, ohne inhaltlichen Mehrwert?

Je nachdem, wie du diese Fragen beantwortest, brauchst du eine andere Entscheidung.

Hinweis: Der Alt-Text ist kein SEO-Tool, auch wenn er für die Suchmaschinenoptimierung relevant ist. Seine primäre Aufgabe ist es, das Bild für Menschen zugänglich zu machen, die es nicht sehen können.

Anleitung: Sechs Bildtypen im Content Marketing und was in den Alt-Text gehört

Wenn es um Bilder in deinen Inhalten geht, triffst du im Content-Marketing-Alltag meist auf sechs verschiedene Typen. Es gelten jeweils andere Regeln, was den Alt-Text betrifft. Schauen wir uns das nun genauer an!

1. Informative Bilder

Was ist damit gemeint? Informative Bilder vermitteln Inhalte, die für das Verständnis deiner Seite wichtig sind. Im Content Marketing sind das typischerweise:

• Produktfotos in deinem Online-Shop
• Screenshots einer Software, die du erklärst
• Grafiken, die einen Sachverhalt darstellen (sofern sie nicht zu komplex sind)
• Fotos, die im Fließtext einen bestimmten Aspekt illustrieren

Was gehört in den Alt-Text? Der Alt-Text sollte knapp beschreiben, was das Bild zeigt und warum es relevant ist. Stell dir vor, du würdest jemandem am Telefon das Bild beschreiben: Was wäre das Wichtigste?

Beispiele für gute Alt-Texte:

• Produktfoto: „Blaue Laptoptasche mit Schultergurt und drei Außenfächern“
• Screenshot: „Dialog zum Erstellen eines neuen Projekts mit hervorgehobenem Start-Button“
• Grafik in einem Artikel über Kundenbindung: „Diagramm zeigt höhere Conversion-Rate bei Bestandskunden im Vergleich zu Neukunden“

Was du besser weglässt:

• „Bild von…“ oder „Ein Foto, das…“. Denn: Screenreader kündigen das Bild bereits als solches an!
• Marketing-Sprache wie „atemberaubende Laptoptasche“. Bleib lieber sachlich und informativ.
• Details, die nichts zur Bedeutung des Bildes beitragen.
• Keywords, die nur SEO dienen und den eigentlichen Zweck des Bildes eher verschleiern als erklären.

Sonderfälle und Stolperfallen: Achte bei Produktfotos darauf, nicht nur das Aussehen, sondern auch relevante Eigenschaften zu erwähnen. Bei einer Kaffeemaschine wäre „Silberne Kaffeemaschine mit Touchdisplay und integriertem Mahlwerk“ informativer als nur „Silberne Kaffeemaschine“.

2. Dekorative Bilder

Was ist damit gemeint? Dekorative Bilder dienen ausschließlich der visuellen Auflockerung, ohne inhaltlichen Mehrwert zu bieten. Im Content Marketing sind das typischerweise:

• Hintergrundmuster oder -grafiken
• Schmucklinien und Trennelemente
• Stimmungsbilder ohne inhaltliche Relevanz
• Rein ästhetische Elemente im Layout

Was gehört in den Alt-Text? Hier ist die Antwort einfach: nichts! Dekorative Bilder bekommen einen leeren Alt-Text: alt="" (zwei Anführungszeichen ohne Leerzeichen dazwischen).

Beispiele:

• Hintergrundbild mit Farbverlauf: alt=""
• Trenner zwischen Textabschnitten: alt=""
• Stilisierte Bildumrandung: alt=""

Was du besser weglässt: Beschreibungen wie „dekoratives Bild“ oder „Trenner“, denn sie erzeugen unnötiges „Hörrauschen“ für Screenreader-Nutzer.

Sonderfälle und Stolperfallen: Die Grenze zwischen dekorativ und informativ ist manchmal fließend. Ein Stimmungsbild kann dekorativ sein, wenn es nur der Atmosphäre dient oder informativ, wenn es einen bestimmten Kontext vermitteln soll. Im Zweifel frag dich: Würde jemand, der dieses Bild nicht sehen kann, wichtige Informationen verpassen?

Tipp für deine Website: Sprich mit deinem Entwicklungsteam darüber, rein dekorative Elemente besser als CSS-Hintergrundbilder einzubinden. Diese werden von Screenreadern automatisch ignoriert und benötigen keinen Alt-Text.

3. Funktionale Bilder

Was ist damit gemeint? Funktionale Bilder lösen eine Aktion aus oder führen zu einem anderen Ort. Im Content Marketing sind das typischerweise:

• Icons in Buttons („Warenkorb“, „Suchen“, „Drucken“)
• Logos, die zur Startseite verlinken
• Social-Media-Icons mit Links zu deinen Profilen
• Pfeile für Vor/Zurück in Bildergalerien

Was gehört in den Alt-Text? Hier beschreibst du nicht das Bild selbst, sondern seine Funktion oder sein Ziel. Der Alt-Text sollte vermitteln, was passiert, wenn man auf das Bild klickt.

Beispiele für gute Alt-Texte:

• Drucken-Icon: „Seite drucken“
• Firmenlogo mit Link: „Zur Startseite“
• Facebook-Icon: „Besuche uns auf Facebook“
• Pfeil in einer Produktgalerie: „Nächstes Produktbild anzeigen“

Was du besser weglässt:

• Beschreibungen des Aussehens („Druckersymbol“) statt der Funktion
• Technische Hinweise wie „Link zu…“. Beschreibe das Ziel, nicht den Mechanismus

Sonderfälle und Stolperfallen: Wenn ein solches Bild neben seiner Funktion auch inhaltlich wichtig ist, kann der Alt-Text beides kombinieren. Bei einem spezifischen Produktbild, das gleichzeitig ein Link ist, könnte der Alt-Text lauten: „Rote Sportschuhe mit Luftpolstersohle – Produktdetails anzeigen“.

4. Bilder mit Text

Was ist damit gemeint? Diese Kategorie umfasst alle Bilder, in denen Text der Hauptbestandteil ist. Im Content Marketing sind das typischerweise:

• Zitate als Bild gestaltet
• Banner mit Aktionsangeboten
• Infografiken mit eingebetteten Beschriftungen
• Screenshots mit wichtigem Textinhalt

Was gehört in den Alt-Text? In den Alt-Text gehört der gesamte Text, der im Bild enthalten ist, sofern er nicht anderweitig auf der Seite verfügbar ist.

Beispiele für gute Alt-Texte:

• Zitat als Bild: „Zitat: Digitale Barrierefreiheit ist kein Luxus, sondern eine Notwendigkeit. – Maxi Müller, Digitalexpertin“
• Aktionsbanner: „Sommeraktion: 20% auf alle Outdoor-Produkte bis zum 31.07.“

Was du besser weglässt:

• Beschreibungen des Designs, wenn der Text selbst das Wichtigste ist
• Verkürzte Versionen des Textes: Der komplette Text sollte wiedergegeben werden

Sonderfälle und Stolperfallen: Bei Bildern mit Text ist es generell eine bessere Alternative, stattdessen echten Text mit CSS zu gestalten. Das verbessert nicht nur die Barrierefreiheit, sondern auch die Suchmaschinenoptimierung und die Anpassungsfähigkeit auf verschiedenen Geräten.

5. Komplexe Bilder

Was ist damit gemeint? Komplexe Bilder enthalten so viele Informationen, dass sie nicht mit einem kurzen Alt-Text ausreichend beschrieben werden können. Im Content Marketing sind das typischerweise:

• Detaillierte Infografiken
• Diagramme und Statistiken
• Prozessabläufe und Flowcharts
• Komplexe technische Darstellungen

Was gehört in den Alt-Text? Der Alt-Text sollte eine kurze Zusammenfassung bieten und darauf hinweisen, dass eine ausführlichere Beschreibung folgt. Die eigentliche Beschreibung solltest du dann im Fließtext oder in einem separaten, verknüpften Abschnitt bereitstellen.

Beispiele für gute Alt-Texte:

• „Infografik: Kundenzufriedenheit 2023 nach Branchen – Details folgen im Text“
• „Diagramm: Conversion-Trichter mit vier Stufen, ausführliche Erklärung unterhalb des Bildes“

Was du besser weglässt:

• Zu lange Alt-Texte, die versuchen, alle Details zu erfassen
• Unspezifische Beschreibungen wie „Grafik zum Thema Marketing“

Sonderfälle und Stolperfallen: Bei komplexen Bildern ist es besonders wichtig, alle enthaltenen Informationen auch in Textform anzubieten. Das hilft nicht nur Menschen mit Sehbehinderungen, sondern ebenso allen, die Inhalte lieber in Textform aufnehmen oder nach bestimmten Informationen suchen möchten.

Praxistipp: Füge nach dem komplexen Bild einen Abschnitt mit der Überschrift „Bildbeschreibung“ oder „Details zur Grafik“ ein. Hier kannst du alle wichtigen Informationen aus dem Bild in strukturierter Form wiedergeben.

6. Bildgruppen

Was ist damit gemeint? Bildgruppen bestehen aus mehreren zusammengehörigen Bildern, die gemeinsam eine Information vermitteln. Im Content Marketing sind das typischerweise:

• Bewertungssterne (5 einzelne Stern-Bilder)
• Produktgalerien mit verschiedenen Ansichten
• Schrittweise Anleitungen mit mehreren Bildern
• Vorher-Nachher-Vergleiche

Was gehört in den Alt-Text?
Bei Bildgruppen gibt es zwei Strategien:

1. Ein Bild bekommt einen beschreibenden Alt-Text für die ganze Gruppe, die anderen leere Alt-Texte:
   Bei Bewertungssternen könnte das erste Sternbild den Alt-Text „4 von 5 Sternen“ bekommen, während die anderen vier Sternbilder leere Alt-Texte haben.
2. Jedes Bild bekommt einen eigenen kontextbezogenen Alt-Text: Bei einer Produktgalerie könnte jedes Bild seinen eigenen Alt-Text haben: „Rote Handtasche von vorne“, „Rote Handtasche von der Seite“, „Innenansicht mit Fächern“.

Beispiele für gute Alt-Texte:

• Bewertung: Erstes Bild: „4,5 von 5 Sternen“, alle anderen: alt=""
• Produktgalerie: „Küchenmaschine Premium XL in Silber – Frontansicht mit Bedienfeld“

Was du besser weglässt:

• Wiederholungen bei zusammengehörigen Bildern, die die gleiche Information vermitteln
• Nummerierungen wie „Bild 1 von 5“, wenn diese keine inhaltliche Bedeutung haben

Sonderfälle und Stolperfallen: Bei Bildkarussells und Galerien ist es wichtig, dass Nutzer von Screenreadern verstehen, dass es sich um zusammengehörige Bilder handelt. Sprich mit deinem Entwicklungsteam darüber, wie die Bildgruppe technisch korrekt ausgezeichnet werden kann, z.B. über ARIA-Attribute.

Praxistipp: Bei einer Produktgalerie ist es oft sinnvoll, im ersten Bild das Produkt umfassend zu beschreiben und bei den Folgebildern nur die jeweils neue Perspektive oder das neue Detail zu erwähnen.

So funktionieren Alt-Texte bei WordPress

WordPress ist das meistgenutzte Content-Management-System weltweit und glücklicherweise bietet es alle notwendigen Optionen, um deine Bilder barrierefrei zu gestalten.

Wo und wie du Alt-Texte in WordPress einträgst

Je nachdem, wie du mit WordPress arbeitest, gibt es verschiedene Wege, um Alt-Texte hinzuzufügen:

In der Mediathek

Die gründlichste Methode ist es, den Alt-Text direkt beim Hochladen in die Mediathek einzutragen:

1. Gehe zu „Medien“ → „Mediathek“ in deinem WordPress-Dashboard
2. Wähle ein Bild aus oder lade ein neues hoch
3. Rechts siehst du ein Feld „Alternativer Text“: Hier trägst du deinen Alt-Text ein
4. Klicke auf „Speichern“

Der Vorteil: Der Alt-Text bleibt mit dem Bild verknüpft, egal wo du es von nun an auf deiner Website verwendest.

Im Gutenberg-Editor (Block-Editor)

Wenn du einen Beitrag oder eine Seite im Block-Editor bearbeitest:

1. Füge ein Bild ein oder wähle ein bereits eingefügtes Bild aus
2. In der rechten Seitenleiste findest du unter „Bildeinstellungen“ das Feld „Alternativtext“
3. Falls die Seitenleiste nicht sichtbar ist, klicke auf das entsprechende Symbol oben rechts

Im klassischen Editor

Wenn du noch den klassischen Editor verwendest:

1. Klicke auf das Bild, das du bearbeiten möchtest
2. Klicke auf das Bearbeitungs-Symbol (Stift-Icon)
3. Im Dialog findest du das Feld „Alternativtext“
4. Klicke auf „Aktualisieren“, um deine Änderungen zu speichern

WordPress-spezifische Besonderheiten und Fallen

Die vier Bildfelder in WordPress verstehen

In WordPress gibt es vier verschiedene Felder für Bilder, die oft für Verwirrung sorgen:

1. Alternativtext: Dies ist der eigentliche Alt-Text, der von Screenreadern vorgelesen wird und angezeigt wird, wenn das Bild nicht geladen werden kann. Hier ergänzt du die Beschreibungen, die wir in diesem Artikel besprochen haben.
2. Titel: Wird als Tooltip angezeigt, wenn jemand mit der Maus über das Bild fährt. Nicht zu verwechseln mit dem Alt-Text! Der Titel hat keine Bedeutung für die Barrierefreiheit.
3. Beschriftung: Erscheint als sichtbarer Text unter dem Bild auf deiner Website, auch als Bildunterschrift bekannt. 
4. Beschreibung: Wird auf der Anhangseite des Bildes angezeigt, aber normalerweise nicht im Beitrag selbst. Du kannst es für interne Notizen oder ausführliche Beschreibungen nutzen. Es hat aber keine direkte Auswirkung auf die Barrierefreiheit.

Bildunterschriften vs. Alt-Texte

Ein häufiger Irrtum ist, dass Bildunterschriften (Beschriftungen) den Alt-Text ersetzen können. Das stimmt nicht, denn:

• Bildunterschriften sehen alle Besucher
• Alt-Texte werden nur von Screenreadern vorgelesen oder angezeigt, wenn das Bild nicht lädt

Bei informativen Bildern brauchst du oft beides: Die Bildunterschrift kann zusätzliche Informationen oder Kontext bieten, während der Alt-Text das Bild für nicht-sehende Nutzer zugänglich macht.

Featured Images nicht vergessen

Beitragsbilder (Featured Images) werden in WordPress oft übersehen, wenn es um Alt-Texte geht. Du kannst den Alt-Text für Beitragsbilder festlegen, indem du:

1. Das Bild in der Mediathek bearbeitest, bevor du es als Beitragsbild festlegst
2. Bei einigen Themes über die Theme-Optionen spezifische Alt-Texte für Beitragsbilder angibst

Überprüfe, ob dein Theme Alt-Texte für Beitragsbilder korrekt übernimmt. 

Bildergalerien richtig auszeichnen

Bei WordPress-Galerien solltest du für jedes einzelne Bild einen passenden Alt-Text festlegen:

1. Erstelle eine Galerie im Editor
2. Klicke auf „Bearbeiten“ oder wähle die Galerie aus
3. Klicke auf jedes einzelne Bild in der Galerie
4. Lege für jedes Bild einen eigenen Alt-Text fest, entsprechend seiner Bedeutung

Schlusswort

Hat man (wie ich) keine persönliche Erfahrung mit Screenreadern, scheint das Thema zunächst abstrakt. Letztlich solltest du dich aber von den hier aufgeführten Empfehlungen nicht abschrecken lassen. Achte vor allem darauf, dass die Alt-Texte sinnvoll und nützlich sind für echte Menschen und du sie nicht nur als „SEO-Trick“ ansiehst.

Willst du noch mehr erfahren, empfehle ich dir das Images Tutorial der Web Accessibility Initiative. Dort findest du auch eine sehr nützliche Entscheidungshilfe für Alternativtexte in Bildern.

---

Dieser Artikel gehört zu: UPLOAD Magazin 120

• Weitere Artikel aus dieser Ausgabe kostenlos auf der Website lesen ...
• Bleib auf dem Laufenden über neue Inhalte mit dem „Update am Montag“ …

Schon gewusst? Mit einem Zugang zu UPLOAD Magazin Plus oder zur Content Academy lädst du Ausgaben als PDF und E-Book herunter und hast viele weitere Vorteile!