Das Alt-Attribut erfüllt zwei zentrale Funktionen:
Menschen mit Sehbehinderungen nutzen Screenreader, die ihnen Webseiten-Inhalte vorlesen.
Ohne eine aussagekräftige Alt-Beschreibung bleibt der Nutzer im Dunkeln – ähnlich wie ein Radiosprecher, der plötzlich verstummt, während er ein wichtiges Ereignis beschreibt. Alt-Tags gewährleisten, dass jeder Website-Besucher die gleiche Menge an Informationen erhält.
Wenn Sie tiefer in die Anforderungen an barrierefreie Inhalte einsteigen möchten, finden Sie in unserem Beitrag „Die 7 wichtigsten WCAG-Richtlinien für barrierefreie Websites“ eine verständliche Einführung in die zentralen Standards.
Suchmaschinen wie Google sind mittlerweile in der Lage, Bilder mithilfe künstlicher Intelligenz direkt zu analysieren. Sie erkennen Inhalte wie Objekte, Farben, Texte im Bild und sogar Markenlogos.
Dennoch spielen Alt-Tags nach wie vor eine zentrale Rolle in der Suchmaschinenoptimierung. Alt-Texte liefern zusätzlichen Kontext und helfen Google dabei, den Bildinhalt besser einzuordnen – besonders für die Bildersuche.
Gute Alt-Tags zu erstellen, ist leichter, als Sie denken. Damit Ihre Bilder sowohl für Menschen als auch für Suchmaschinen optimal verständlich sind, sollten Sie folgende Punkte bei der Bildbeschreibung beachten:
Nicht nur der Alt-Attribute helfen Suchmaschinen, den Bildinhalt zu verstehen – auch der Dateiname eines Bildes spielt eine Rolle für die SEO. Standardnamen wie IMG_1234.jpg oder bild1.png liefern keinerlei Kontext. Verwenden Sie stattdessen beschreibende, keyword-relevante Dateinamen, die den Inhalt des Bildes widerspiegeln – idealerweise mit Bindestrichen zur besseren Lesbarkeit.
Beispiele:
Achten Sie darauf, keine Umlaute, Sonderzeichen oder Leerzeichen zu verwenden und relevante Keywords nicht zu überladen.
Tipp: Wenn Sie Ihre Bilder vor dem Upload benennen, sparen Sie sich später Arbeit und verbessern die Auffindbarkeit Ihrer Inhalte in der Bildersuche von Google.
Durch die konsequente Nutzung von Alt-Tags in sozialen Medien verbessern Sie die Barrierefreiheit und ermöglichen es Menschen mit Sehbeeinträchtigungen, aktiv an Online-Diskussionen teilzunehmen.
Dies trägt nicht nur zu einer inklusiveren Community bei, sondern fördert auch die Interaktion und das Engagement, da Inhalte für eine größere Nutzergruppe verständlich und zugänglich werden. Zudem verbessert sich die Sichtbarkeit in der Google Bildersuche, was langfristig die Reichweite und den Erfolg Ihrer Beiträge steigern kann.
Folgen:
Beispiel:
Produktbilder ohne Alt-Texte im Onlineshop sind für blinde Nutzer unbrauchbar und erscheinen nicht in der Google-Bildersuche.
Lösung:
Jedem relevanten Bild einen präzisen Alternativtext geben.
Folgen:
Nutzer und Suchmaschinen verstehen die Bilder nicht.
Beispiel:
Ein Fitnessbild mit dem Alt-Attribut „Sport“ bietet zu wenig Kontext.
Lösung:
Alt-Texte präzise und kontextbezogen formulieren.
Folgen:
Lösung:
Verwenden Sie natürliche, aussagekräftige Alt-Texte.
Folgen:
Beispiel:
Ein dekorativer Hintergrund benötigt keinen beschreibenden Alt-Text.
Lösung:
Bei dekorativen Bildern ein leeres Alt-Attribut nutzen (alt="").
Identifizieren Sie sämtliche relevanten Bilddateien auf Ihrer Website. Relevante Bilder sind alle, die Inhalte vermitteln, Nutzer informieren oder eine zentrale Funktion für die User Experience erfüllen. Dazu gehören:
Hinweis:
Nicht relevante Bilder sind rein dekorative Bilder ohne informativen Mehrwert, z. B. Hintergrundbilder oder Gestaltungselemente. Diese sollten mit alt="" ausgezeichnet werden, um Screenreader-Nutzer nicht zu stören.
Schreiben Sie klare, kontextspezifische Alternativtexte mit sinnvollen Keywords.
Vermeiden Sie ungenaue, generische Beschreibungen und konzentrieren Sie sich darauf, die wichtigsten Merkmale des Bildes kurz und verständlich darzustellen.
<img src="bild.jpg" alt="Beschreibung des Bildinhalts">
Nutzen Sie kostenlose Tools wie Lighthouse oder WAVE, um Ihre Umsetzung technisch zu prüfen und Fehler direkt zu korrigieren.
Weiterführende Informationen, wie Sie Alternativtexte prüfen können, finden Sie auch auf der Webseite des BIK – barrierefrei informieren und kommunizieren.
Diese Tools helfen Ihnen dabei, die Barrierefreiheit und SEO-Qualität Ihrer Bilder kontinuierlich zu verbessern.
Für eine ganzheitliche Umsetzung empfehlen wir zusätzlich unsere Checkliste für barrierefreies Webdesign, die Ihnen hilft, alle relevanten Aspekte im Blick zu behalten – nicht nur bei Bildern.
