Alt-Text

Wofür der Alt-Text zuerst da ist

Ein Screenreader sieht nichts. Er liest vor, was im alt-Attribut steht — und wenn dort nichts steht, liest er im schlechtesten Fall den Dateinamen vor. Für blinde und sehbehinderte Nutzer entscheidet dieses eine Attribut darüber, ob eine Produktabbildung, ein Ablaufdiagramm oder eine Schaltfläche verständlich bleibt oder als Rauschen durchfällt. Genau deshalb steht der Alternativtext in den Web Content Accessibility Guidelines gleich an erster Stelle (Kriterium 1.1.1, Konformitätsstufe A).

Erst danach kommt die Bildersuche. Google kann den Inhalt eines Fotos zwar maschinell einschätzen, verlässt sich bei der Einordnung aber weiterhin stark auf Alt-Text, Dateiname und den Text rund um das Bild.

Und ein dritter Fall, den man leicht übersieht: Lädt das Bild nicht — langsame Verbindung, falscher Pfad, blockierte Ressource —, zeigt der Browser den Alt-Text anstelle der Grafik an.

Ein rechtlicher Hinweis, ohne Rechtsberatung zu sein: Das Barrierefreiheitsstärkungsgesetz verpflichtet seit Juni 2025 bestimmte Anbieter digitaler Dienstleistungen und Onlineshops zu barrierefreien Angeboten, mit Ausnahmen für Kleinstunternehmen. Ob Sie betroffen sind, klärt im Zweifel eine Rechtsberatung (Stand September 2026).

Wann alt="" richtig ist

Entscheidend ist eine einzige Frage: Trägt das Bild Information, die nicht ohnehin im Text steht?

<!-- Informationstragend: beschreiben, was zu sehen ist -->
<img src="/dachsanierung.webp" width="1200" height="800"
     alt="Neu eingedecktes Satteldach mit anthrazitfarbenen Tonziegeln">

<!-- Dekorativ (Trennlinie, Farbverlauf, Stimmungsbild ohne Aussage):
     leeres Attribut, damit Screenreader es überspringen -->
<img src="/deko-welle.svg" alt="">

<!-- Bild als Link: die Funktion beschreiben, nicht das Aussehen -->
<a href="/"><img src="/logo.svg" alt="nova.02:media — zur Startseite"></a>

<!-- Bild mit Text darauf: der Text gehört in den Alt-Text -->
<img src="/gutschein.png" alt="Aktion: 10 Prozent auf alle Pakete bis 31. Oktober">

Der Unterschied zwischen einem leeren und einem fehlenden Attribut ist keine Haarspalterei. alt="" ist eine klare Ansage: „Hier gibt es nichts zu hören.” Ein Bild ganz ohne alt lässt das Hilfsmittel raten. Und Bilder, die per CSS als Hintergrund eingebunden sind, haben gar keinen Alt-Text — was Information trägt, gehört als <img> ins HTML.

Gute Alt-Texte schreiben

Fünf Regeln reichen aus:

1. Beschreiben Sie, was zu sehen ist, nicht, was Sie ranken möchten.
2. Kein „Bild von” oder „Grafik zeigt” — Screenreader kündigen das Element ohnehin als Grafik an.
3. Text im Bild wörtlich übernehmen. Alles andere ist für Screenreader ein Informationsverlust.
4. Kontext schlägt Vollständigkeit. Dasselbe Foto braucht auf einer Referenzseite eine andere Beschreibung als im Blog.
5. Keine Aufzählung von Suchbegriffen. Aneinandergereihte Keywords sind für Nutzer unbrauchbar und gelten als Spam.

Was Bilder-SEO zusätzlich braucht

Der Alt-Text allein macht kein Bild sichtbar. Dazu gehören:

• Sprechende Dateinamen — dachsanierung-strausberg.webp statt DSC00231.JPG.
• Moderne Formate und passende Maße. WebP oder AVIF statt unkomprimierter JPEGs, und keine 4.000-Pixel-Datei für eine 600 Pixel breite Fläche.
• width und height im Markup, damit beim Laden nichts verspringt — siehe Core Web Vitals.
• Umgebungstext, der zum Bild passt. Bildunterschrift und Absatz davor sind für die Einordnung mindestens so wichtig wie das Attribut selbst.
• Bilder in der Sitemap oder im Seiteninhalt erreichbar — was nur per Skript nachgeladen wird, findet die Bildersuche schlechter.

Wie diese Punkte zusammenspielen, steht ausführlich im Beitrag Bildoptimierung für SEO und Ladezeit und im Eintrag OnPage-Optimierung.

Praktisch gehen Sie am schnellsten vor, wenn Sie nicht die gesamte Mediathek abarbeiten, sondern bei den Seiten anfangen, über die Anfragen kommen: Startseite, Leistungsseiten, Referenzen. Welche das sind und wo die größten Lücken liegen, zeigt ein SEO-Audit — bei neuen Projekten ist sauberes Markup ohnehin Teil des Webdesigns.