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.

Berücksichtige den Kontext

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

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.

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.

Beschreibe wichtige Details

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

Bei Produktbildern

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

Bei Logos

Verwende den Firmennamen als Alt-Text, z.B. alt=“Microsoft Logo“.

Bei Buttons mit Bildinhalt

Beschreibe die Funktion des Buttons, nicht das Bild selbst (z.B. alt=“Suchen“ statt alt=“Lupe“).

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

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.

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.

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.

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.

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.