Alt-Texte: Wie Du mit ihnen Bild-Barrieren brichst und Fotos (aus)lesbar machst

Website Accessibility. Alt-Texte machen Deine Website für alle zugänglich – sie helfen Menschen mit Sehbehinderungen, langsamen Verbindungen und Suchmaschinen.

Alt-Texte (auch Alternative Texte oder Alt-Attribute genannt) sind kurze Text­beschreibungen, die in den HTML-Code eines Bildes eingebettet werden. Sie dienen als Alternative für Bilder und werden angezeigt, wenn diese nicht ge­laden werden können, und können von assistiven Technologien wie Screen­readern vorgelesen werden. Sie helfen zudem Suchmaschinen, Bildinhalte zu verstehen.

Achte darauf, dass Du jedes inhaltlich relevante Bild mit einem aussagekräftigen Alt-Text versiehst, der den Zweck oder Inhalt des Bildes beschreibt – so können Screenreader-Nutzer:innen verstehen, was dargestellt wird. In WordPress kannst Du diesen Text in der Media­thek bei dem entsprechenden Foto in das Feld „Alter­nativ­text“ eintragen.

Best Practices für Alt-Texte

Sei präzise und knapp

Beschreibe den Inhalt und Zweck des Bildes in wenigen Worten (idealerweise unter 125 Zeichen, mehr wird von vielen Screenreadern nicht weiter vorgelesen). Vermeide sowohl „Bild von…“ am Anfang als auch zu lange Beschreibungen.

Gute Beispiele:

• „Frau sitzt mit Laptop am Schreibtisch und arbeitet konzentriert“
• „Startseite einer Coaching-Website mit klarer Navigation“

Schlechtes Gegenbeispiel:

• ❌ „Bild von einer Frau mit langen blonden Haaren, einem blauen Top und pink lackierten Nägeln, die an einem Laptop sitzt und so tut als würde sie arbeiten, um produktiv zu wirken“
  Alt-Text zu lang, enthält unwichtige Infos und interpretiert Motivation und Wirkung, die im Bild nicht sichtbar sind.

Berücksichtige den Kontext

Der Alt-Text sollte zum umgebenden Inhalt passen und die Funktion des Bildes im jeweiligen Zusammenhang vermitteln. Zum Beispiel:

• Artikel über Website-Struktur:
  → „Sitemap einer Website mit klarer Seitenhierarchie“
• Artikel über Überforderung im Business:
  → „Unaufgeräumter Schreibtisch mit vielen Zetteln und Notizen“

Unterscheide zwischen dekorativen und informativen Bildern

Bei rein dekorativen Bildern, verwende ein leeres Alt-Attribut (alt=““), bei informativen Bildern stelle relevante Informationen im Alt-Text bereit.

Dekorative Bilder bieten keinen inhaltlichen Mehrwert, zum Beispiel bei Trennlinien, abstrakten Hintergründen, oder Stock Moodbildern. Dann ist KEIN beschreibener Text, also Alt-Text notwendig.

Wenn es sich um informative Bilder handelt, dann schon. Zum Beispiel:

• „Screenshot der WordPress Mediathek mit markiertem Alt-Text-Feld“
• „Diagramm zeigt Ladezeit-Verbesserung nach Bildoptimierung“

Texte auf Bildern

Versuche nach Möglichkeit darauf zu verzichten, Texte auf Bilder zu setzen. Wenn es nicht anders geht, dann setze auf jeden Fall den Text des Bildes auch in den Alt-Text, damit er so ausgelesen werden kann. Zum Beispiel:

• Bild mit Text: „Checkliste: 5 Schritte zur barrierefreien Website“
  → Alt-Text: „Checkliste: 5 Schritte zur barrierefreien Website“
• Bild mit Zitat:
  → „Zitat: Gute Alt-Texte machen Inhalte für alle zugänglich“

Beschreibe wichtige Details

Bei Schaubildern, Diagrammen oder Infografiken solltest Du die zentralen Informationen oder Trends beschreiben, nicht nur den Typ des Bildes. Zum Beispiel:

• „Balkendiagramm zeigt steigende Nutzerfreundlichkeit durch Alt-Texte“
• „Infografik: Zusammenhang zwischen Accessibility und SEO“

Bei Produktbildern

Erwähne wichtige Eigenschaften wie Marke, Modell, Farbe oder besondere Merkmale. Zum Beispiel:

• „Laptop Lenovo ThinkPad, schwarzes Gehäuse, geöffnet“
• „Ergonomische Funkmaus in Grau mit seitlichen Tasten“

Bei Logos

Verwende den Firmennamen als Alt-Text, zum Beispiel:

• „Microsoft Logo“
• „WordPress Logo“

Bei Buttons mit Bildinhalt

Beschreibe die Funktion des Buttons, nicht das Bild selbst. Zum Beispiel:

• „Suche“ statt „Lupe“
• „Menü öffnen“ statt „Dropdown Pfeil“
• „PDF herunterladen“ statt „Pfeil, der nach unten zeigt“

Alt-Attribute Fazit

Mit gut geschriebenen Alt-Texten machst Du Deine Website nicht nur zugänglicher für Menschen mit Beeinträchtigungen, sondern verbesserst auch Dein SEO-Ranking und sorgst für eine bessere User Experience für alle Besucher:innen.

Mehr zu Barrierefreiheit

Hier kannst Du Dir weitere konkrete Tipps zum Thema Barrierefreiheit auf Deiner Website anschauen.

Weitere Beiträge rund um Accessibility & Barrierefreiheit auf Deiner Website

Aufzeichnung Webinar: Barrierefreiheit auf der Website – Mehr erreichen, weniger ausschließen

Aufzeichnung Webinar Barrierefreiheit auf der Website: Erfahre praxisnahe Tipps, wie Du als Selbstständige:r Deine Seite testest & weniger Menschen ausschließt.

Barrierefreies Webdesign: Worauf Du beim Letter Spacing achten solltest

Letter Spacing richtig nutzen: Tipps zum Buchstabenabstand für barrierefreies Webdesign, das lesefreundlich und inklusiv gestaltet ist.

Sprechende Links: Kleine Änderung, große Wirkung für die Barrierefreiheit

Website Accessibility. Sprechende Links sind selbsterklärende Links, die die Nutzungserfahrung Deiner Website verbessern. Wie erfährst Du in diesem Blogbeitrag.

Barrierefrei bloggen: So machst Du Deine Weiterlesen-Links verständlich für Screenreader

Erfahre, wie Du die Weiterlesen-Links auf Deiner Blogübersichtsseite für Screenreader optimierst und Deinen Blog barrierefreier & nutzerfreundlicher machst.

Fehlermeldungen barrierefrei gestalten – klare Hinweise auf der Website, die alle verstehen

Fehlermeldungen barrierefrei gestalten: Hilfreiche Texte, klare Auszeichnungen und starke Icons. So finden alle den Fehler – und wissen, was zu tun ist.

Accessibility-Tipp für barrierefrei gestaltete Formulare: Kommuniziere, was passiert

Erfahre, warum klare Rück­meld­ung­en auf Deiner Website wichtig für Barrierefreiheit sind – besonders bei Formularen – und wie Du diese kommunizierst.

How to Farbkontraste auf der Website überprüfen

Warum gute Farbkontraste mehr sind als Design-Schnickschnack und Deine Website inklusiver machen – und wo Du sie über­prüf­en kannst, zeige ich Dir im Video.

Accessibility für Links: So machst Du Links auch optisch für alle zugänglich

Accessibility für Links: Warum Farbe allein nicht reicht. Tipps für erkennbare, nutzbare Links. Aus meiner Reihe Barrierefreiheit auf der Website.

Barrierefreie Formulare: Wie Du Labels und Platzhalter richtig einsetzt

Website Accessibility. Wie Du Deine Formulare inklusiv & zugänglich gestalten kannst und worauf Du dabei achten solltest, erkläre ich Dir in diesem Blogbeitrag.

Accessibility Tipps für Video und Audio Inhalte auf Deiner Website

Accessibility Tipps für Video und Audio: So machst Du Deine Inhalte barrierefrei, inklusiv und SEO-stark. Aus meiner Reihe Barrierefreiheit auf der Website.