Aktualisiert: März 2026 · Lesezeit: 11 Min.
Neulich habe ich aus Neugier die 50 meistbesuchten deutschen Online-Shops durch einen Accessibility-Scanner gejagt. Ergebnis: 43 von 50 hatten fehlende oder nutzlose Alt-Texte auf ihren Produktseiten. Wir reden hier von Shops mit Millionenumsätzen. Alt-Texte wie alt="Bild", alt="product_image_01" oder — mein persönlicher Favorit — alt="TODO".
Das Kuriose daran: Gute Alt-Texte sind einer der seltenen Fälle, wo Barrierefreiheit und SEO in dieselbe Richtung zeigen. Sie helfen blinden Nutzern UND verbessern Ihre Sichtbarkeit in der Google Bildersuche. Trotzdem werden sie systematisch vernachlässigt. Warum? Vermutlich, weil sie nicht sichtbar sind. Was man nicht sieht, optimiert man nicht.
WCAG 2.1, Erfolgskriterium 1.1.1 — Nicht-Text-Inhalt (Level A): „Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem äquivalenten Zweck dient." Das ist eines der grundlegendsten Kriterien überhaupt und Teil der EN 301 549, die vom BFSG referenziert wird.
Google sagt im Wesentlichen dasselbe, nur anders formuliert. In den Search Central Docs steht: „Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image." Alt-Text ist also ein direktes Ranking-Signal für die Bildersuche und ein indirektes für die reguläre Suche.
Die gute Nachricht: Was für Screenreader gut ist, ist fast immer auch für Google gut. Es gibt nur einen Punkt, wo die Interessen auseinandergehen — dazu später mehr.
Das sind Bilder, die Informationen vermitteln: Produktfotos, Diagramme, Screenshots, Infografiken. Sie brauchen einen beschreibenden Alt-Text.
<!-- Schlecht -->
<img src="sneaker-rot.jpg" alt="Schuh">
<!-- Besser -->
<img src="sneaker-rot.jpg" alt="Nike Air Max 90 in Rot, Seitenansicht">
<!-- Für SEO optimiert UND barrierefrei -->
<img src="sneaker-rot.jpg"
alt="Nike Air Max 90 Sneaker in Rot — Seitenansicht mit sichtbarer Air-Sohle">
Merken Sie den Unterschied? „Schuh" ist nutzlos — für den blinden Nutzer und für Google. „Nike Air Max 90 in Rot, Seitenansicht" beschreibt das Bild präzise. Die dritte Variante fügt noch ein Detail hinzu, das sowohl informativen Wert hat als auch ein relevantes Keyword enthält.
Hintergrundmuster, Schmucklinien, rein dekorative Illustrationen. Die brauchen einen leeren Alt-Text — nicht keinen Alt-Text, sondern einen explizit leeren:
<!-- FALSCH: Alt-Attribut fehlt komplett -->
<img src="divider.png">
<!-- FALSCH: Sinnloser Alt-Text -->
<img src="divider.png" alt="Trennlinie">
<!-- RICHTIG: Leerer Alt-Text -->
<img src="divider.png" alt="">
<!-- NOCH BESSER: Via CSS einbinden -->
<div style="background-image: url('divider.png')" role="presentation"></div>
Warum ist alt="Trennlinie" falsch? Weil ein Screenreader dann „Bild: Trennlinie" vorliest. Für den blinden Nutzer ist das reine Störinformation — wie wenn Ihnen jemand beim Lesen ständig „hier ist ein Absatz" ins Ohr flüstert.
Bilder, die eine Funktion haben — Icons in Buttons, verlinkte Logos, Bilder in Links. Der Alt-Text beschreibt hier die Funktion, nicht das Motiv.
<!-- Schlecht: Beschreibt das Bild --> <a href="/warenkorb"> <img src="cart-icon.svg" alt="Einkaufswagen-Symbol"> </a> <!-- Gut: Beschreibt die Funktion --> <a href="/warenkorb"> <img src="cart-icon.svg" alt="Warenkorb öffnen (3 Artikel)"> </a>
Warum „Warenkorb öffnen" statt „Einkaufswagen-Symbol"? Der blinde Nutzer will wissen, was passiert, wenn er klickt — nicht, wie das Icon aussieht.
Ich habe vorhin gesagt, dass es einen Punkt gibt, wo die Interessen auseinandergehen. Hier ist er:
Keyword-Stuffing in Alt-Texten.
Für SEO wäre es verlockend, den Alt-Text mit Keywords vollzupacken:
<!-- SEO-optimiert, aber schlecht für Barrierefreiheit -->
<img src="laufschuh.jpg"
alt="Laufschuhe kaufen beste Laufschuhe 2026 günstige Laufschuhe online">
Das ist weder für Google (Keyword-Stuffing wird bestraft) noch für Screenreader-Nutzer hilfreich. Ein Screenreader liest das komplett vor. Stellen Sie sich vor, bei jedem Produktbild einen solchen Textwust zu hören.
Die goldene Regel: Ein Alt-Text sollte das Bild so beschreiben, dass ein Mensch, der es nicht sehen kann, versteht, was darauf ist und warum es dort steht. Wenn das Ziel-Keyword natürlich in diese Beschreibung passt — perfekt. Wenn nicht — zwingen Sie es nicht rein.
Online-Shops haben spezielle Herausforderungen bei Alt-Texten, die ich hier mal anhand eines konkreten Beispiels durchgehe. Ein Modeshop mit Produktbildern:
<!-- Hauptbild -->
<img src="kleid-blau-front.jpg"
alt="Sommerkleid Modell Luna in Königsblau — Frontalansicht, knielang, V-Ausschnitt">
<!-- Detailbild -->
<img src="kleid-blau-stoff.jpg"
alt="Stoffdetail des Sommerkleids Luna — Bio-Baumwolle mit feiner Webstruktur">
<!-- Modellbild -->
<img src="kleid-blau-model.jpg"
alt="Model trägt Sommerkleid Luna in Größe 38 — Körpergröße ca. 175 cm">
<!-- Farbvariante (Thumbnail) -->
<img src="kleid-rot-thumb.jpg"
alt="Sommerkleid Luna in Rot — Farbvariante auswählen">
Warum diese Detailtiefe? Weil ein blinder Nutzer genau die gleichen Kaufentscheidungs-Informationen braucht wie ein sehender. Und für Google ist jedes dieser Bilder eine Chance, in der Bildersuche für relevante Queries aufzutauchen.
Die technische Umsetzung ist einfach. Das eigentliche Problem ist der Prozess. In den meisten Unternehmen lädt irgendwer Bilder ins CMS hoch und überspringt das Alt-Text-Feld, weil Deadline.
Was in der Praxis funktioniert:
// WordPress: Alt-Text als Pflichtfeld erzwingen
add_filter('attachment_fields_to_edit', function($fields, $post) {
if (isset($fields['image_alt'])) {
$fields['image_alt']['required'] = true;
$fields['image_alt']['helps'] = 'Pflichtfeld (BFSG/WCAG 1.1.1): Beschreiben Sie, was auf dem Bild zu sehen ist.';
}
return $fields;
}, 10, 2);
alt="IMG_20240315.jpg" — passiert automatisch bei vielen CMS. Deaktivieren Sie das.alt="Bild von einem Hund" — redundant, der Screenreader sagt bereits „Bild" oder „Grafik".aria-describedby.Ein pragmatischer Check, den Sie in 10 Minuten machen können:
document.querySelectorAll('img:not([alt])').length — zeigt fehlende Alt-Attributedocument.querySelectorAll('img[alt=""]').length — zeigt leere Alt-Attribute (okay bei dekorativen Bildern)document.querySelectorAll('img[alt]').forEach(i => console.log(i.alt, i.src)) — listet alle Alt-Texte aufOder Sie nutzen ein automatisiertes Tool. Aber ehrlich: Für Alt-Texte ist die manuelle Prüfung unersetzlich. Ein Tool kann feststellen, dass ein Alt-Text vorhanden ist — aber nicht, ob er gut ist.