Alt-Texte für Bilder: Bildbeschreibungen richtig setzen
Bilder ohne alt-Text sind für Screenreader und die Google-Bildersuche unsichtbar. So setzen Sie aussagekräftige Alt-Texte — und wann alt="" richtig ist.
Inhaltsverzeichnis
Einem oder mehreren Bildern auf Ihrer Website fehlt eine Bildbeschreibung. Vorlese-Software und Suchmaschinen können deren Inhalt dann nicht erfassen. EverAudit prüft jedes Bild-Element gegen WCAG 1.1.1 (Non-text Content) und meldet fehlende Alternativtexte als kritischen Befund.
Was ist das Problem?#
Jedes <img>-, <object>-, <svg role="img">- oder <input type="image">-Element braucht eine Textalternative, damit Screenreader seinen Inhalt vermitteln können. Fehlt sie komplett, liest ein Screenreader oft nur den Dateinamen vor — etwa „img-2847.jpg" statt einer sinnvollen Beschreibung. Das betrifft nicht nur Hero-Bilder und Produktfotos, sondern auch als Bild ausgezeichnete SVG-Icons, eingebettete Objekte und bildbasierte Formular-Buttons.
Wichtig ist die Unterscheidung: Nicht jedes Bild braucht einen beschreibenden Text. Rein dekorative Bilder — ein Hintergrundmuster, ein wiederholtes Trenner-Icon ohne eigene Information — sollen bewusst mit alt="" markiert werden, damit Screenreader sie überspringen, statt sie unnötig anzukündigen.
Warum prüft EverAudit das?#
Fehlende Alt-Texte sind einer der häufigsten und am längsten bekannten Barrierefreiheits-Fehler — und einer der am direktesten wirksamen, weil ein einziges fehlendes Attribut ein ganzes Bild für einen Teil der Besucher unsichtbar macht. EverAudit stuft image-alt als prio1-Befund ein und bündelt viele gleichartige Funde zu einem übersichtlichen Sammel-Ticket, damit Sie nicht Dutzende Einzelbefunde für dieselbe Bildergalerie abarbeiten müssen.
Welche Auswirkung hat das?#
Blinde Besucher erfahren nicht, was auf den Bildern zu sehen ist — bei einem Produktfoto, einem Diagramm mit Daten oder einer Anleitungsgrafik geht damit relevante Information verloren. In der Google-Bildersuche verschenken Sie zudem Sichtbarkeit: Ohne Alt-Text kann Google den Bildinhalt nicht zuordnen und zeigt es seltener in Bildersuchergebnissen. Bei dekorativen Bildern ohne alt="" wird umgekehrt unnötiger „Lärm" vorgelesen, der vom eigentlichen Inhalt ablenkt.
Wie beheben Sie fehlende Alt-Texte?#
Unterscheiden Sie zunächst informative von dekorativen Bildern:
<!-- informatives Bild: fehlt der Alt-Text -->
<img src="produkt-stuhl-blau.jpg">
<!-- korrigiert: beschreibend, ohne Füllwörter -->
<img src="produkt-stuhl-blau.jpg" alt="Blauer Bürostuhl mit Netzrücken und Armlehnen">
<!-- dekoratives Bild: bewusst leer -->
<img src="trenner-linie.svg" alt="">Für SVG-Grafiken mit role="img":
<!-- fehlt: Titel für die Grafik -->
<svg role="img" viewBox="0 0 24 24">…</svg>
<!-- korrigiert: title als erstes Kind -->
<svg role="img" viewBox="0 0 24 24">
<title>Diagramm: Umsatzverlauf steigend</title>
…
</svg>Konkretes Vorgehen:
- Bild-Typ klassifizieren — informativ (braucht Text), funktional (beschreibt die Funktion, z. B. bei verlinkten Bildern), oder dekorativ (
alt=""). - Kurz und konkret beschreiben — was ist zu sehen, welche Information vermittelt es? Kein „Bild von …", das sagen Screenreader ohnehin schon.
- Redundanz vermeiden — wiederholt der Alt-Text nur benachbarten Text, reicht
alt=""oder eine ergänzende Formulierung. - CMS-Feld pflegen — die meisten CMS bieten ein eigenes Alt-Text-Feld je Bild; dieses konsequent befüllen statt leer zu lassen, ist der nachhaltigste Fix.
- SVG- und Objekt-Fälle separat behandeln — dort braucht es
<title>bzw.aria-label, keinalt-Attribut.
Selbst ausprobieren#
Alt-Text formulieren
Formulieren Sie einen Alt-Text für dieses Beispielbild — die Prüfung gibt sofort Rückmeldung.
Beispielszene, Stichworte: Person, Schreibtisch, Laptop, Schreibtischlampe.
Noch kein Alt-Text
Kein Alt-Text: Screenreader lesen dann den Dateinamen vor oder überspringen das Bild. Beschreiben Sie in einem kurzen Satz, was zu sehen ist.
Beispiel für einen guten Alt-Text
„Person sitzt an einem Schreibtisch und arbeitet an einem Laptop, daneben leuchtet eine Schreibtischlampe." — konkret, knapp und ohne einleitende Floskel.
Fazit#
Fehlende Alt-Texte sind einer der folgenreichsten, aber auch am einfachsten zu behebenden Barrierefreiheits-Fehler: Ein kurzer, konkreter Text pro Bild — oder ein bewusstes alt="" bei rein dekorativen Bildern — macht Ihre Inhalte für Screenreader zugänglich und für die Bildersuche auffindbar.
Häufige Fragen
Braucht wirklich jedes Bild einen alt-Text?
Jedes <img>-Element braucht ein alt-Attribut — aber nicht jedes muss beschreibenden Text enthalten. Informative Bilder bekommen einen Text, der ihren Inhalt beschreibt; rein dekorative Bilder bekommen ein leeres alt="", damit Screenreader sie bewusst überspringen.
Was ist ein guter Alt-Text?
Ein guter Alt-Text beschreibt kurz und konkret, was auf dem Bild zu sehen ist und welche Information es im Kontext vermittelt — meist ein halber bis ganzer Satz. Vermeiden Sie Füllwörter wie „Bild von“ oder „Foto zeigt“, die Screenreader ohnehin schon als Bild ankündigen.
Was ist der Unterschied zwischen image-alt und svg-img-alt?
image-alt betrifft klassische <img>-Elemente ohne Alternativtext. svg-img-alt betrifft eingebettete <svg>-Grafiken mit role="img", die stattdessen ein <title>-Element oder ein aria-label brauchen — die Technik unterscheidet sich, das Ziel ist dasselbe.
Verbessert ein guter Alt-Text auch mein Suchmaschinen-Ranking?
Alt-Texte helfen Suchmaschinen, den Bildinhalt zu verstehen, und sind ein direkter Rankingfaktor für die Google-Bildersuche. Für die klassische Websuche sind sie ein unterstützendes, kein dominantes Signal — aber ein sinnvoller Baustein sauberer On-Page-SEO.
EverAudit Redaktion
Fachredaktion für Web-Qualität, Barrierefreiheit und DSGVO. Wir prüfen jeden Ratgeber gegen die Kriterien unserer Audit-Engine.