Alternativtext: Gute Alt-Texte für Bilder schreiben
Also called: Alt-Text, Alt-Attribut, Bildbeschreibung, Textalternative
Definition
Ein Alternativtext ist eine kurze Textbeschreibung eines Bildes im alt-Attribut. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.
Ein Alternativtext ist die kurze Beschreibung eines Bildes im alt-Attribut des HTML-Codes. Screenreader lesen ihn blinden und sehbehinderten Menschen vor, der Browser zeigt ihn an, wenn ein Bild nicht lädt, und Suchmaschinen erkennen daran, was ein Bild zeigt. Ohne Alt-Text bleibt jede Information, die nur im Bild steckt, für viele Menschen unsichtbar.
Was es bedeutet
Bilder transportieren oft genau das, worauf es ankommt: das Produkt im Shop, die Grafik mit den Öffnungszeiten, den Button mit Lupen-Symbol. Fehlt die Textalternative, überspringt ein Screenreader das Bild oder liest den Dateinamen vor. Bei verlinkten Bildern verliert zudem der Link seine Bedeutung.
WCAG 1.1.1 Nicht-Text-Inhalt ist ein Kriterium der Stufe A in WCAG 2.2 und damit Grundlage für Gesetze wie das Barrierefreiheitsstärkungsgesetz. Jeder Nicht-Text-Inhalt braucht eine Textalternative, die denselben Zweck erfüllt. Für einige Inhalte gelten Ausnahmen:
| Bildart | Was der Alternativtext leisten muss |
|---|---|
| Informatives Bild | Das beschreiben, was im Kontext wichtig ist |
| Bild als Link oder Button | Ziel des Links bzw. Funktion des Buttons nennen |
| Dekoratives Bild | Leeres Attribut alt="", damit Screenreader es überspringen |
| Diagramm, Karte, Infografik | Kurze Zusammenfassung, Details im Text daneben |
| Bild mit Text | Den Text im Bild wiedergeben |
| CAPTCHA, Test, Video | Mindestens benennen, worum es sich handelt |
Praxisbeispiele
Ein guter Alternativtext beschreibt den Zweck, nicht jedes Detail. Was zählt, hängt vom Kontext ab: Dasselbe Foto braucht im Onlineshop eine andere Beschreibung als im Teamporträt.
<!-- Informativ: beschreibt, was wichtig ist -->
<img src="schuh.jpg" alt="Roter Laufschuh mit weißer Sohle, Seitenansicht">
<!-- Als Link: nennt das Ziel -->
<a href="/"><img src="logo.svg" alt="Startseite Bäckerei Huber"></a>
<!-- Dekorativ: wird übersprungen -->
<img src="welle.svg" alt="">Kurz und konkret beschreiben, was im Kontext zählt – meist reicht ein klarer Satz. Text aus dem Bild übernehmen. Bei verlinkten Bildern das Ziel nennen. Längere Erklärungen in den sichtbaren Text daneben stellen.
Mit „Bild von …“ beginnen (der Screenreader sagt „Bild“ ohnehin an), Dateinamen oder Keyword-Listen eintragen oder das Attribut ganz weglassen.
So prüfen Sie Alternativtexte
- Code ansehen – Rechtsklick auf das Bild, Untersuchen, und das
alt-Attribut im Quelltext prüfen. - Ganze Seite scannen – ein automatischer Scanner findet fehlende Attribute auf der gesamten Seite.
- Inhalt bewerten – passt die Beschreibung zum Kontext? Das erkennt kein Scanner – hier ist Ihr Urteil gefragt.
- Anhören – die Seite mit VoiceOver oder NVDA vorlesen lassen. Ergibt alles Sinn, auch ohne die Bilder zu sehen?
Fehlt bei einem verlinkten Icon der Alt-Text, entsteht ein leerer Link; in einer Schaltfläche ein leerer Button. Prüfen Sie diese Stellen daher besonders sorgfältig.
Häufige Fragen
Wie lang sollte ein Alternativtext sein?
So kurz wie möglich, so lang wie nötig – meist ein klarer Satz. Ausführliche Informationen, etwa zu einem Diagramm, gehören in den sichtbaren Text rund um das Bild.
Brauchen dekorative Bilder einen Alternativtext?
Sie brauchen ein leeres Attribut: alt="". So überspringt der Screenreader das Bild. Wörter wie „Abstandhalter“ oder „Bild“ wertet das W3C als Fehler.
Ist das title-Attribut dasselbe wie ein Alt-Text?
Nein. Viele Screenreader ignorieren title, und auf Touch-Geräten ist es nicht sichtbar. Der Alternativtext gehört immer ins alt-Attribut.
Wie finde ich Bilder ohne Alternativtext auf meiner Website?
Am schnellsten mit dem kostenlosen WCAG-Scanner: Er prüft Ihre Startseite und listet Bilder ohne Textalternative auf.
Kann allyWay fehlende Alternativtexte automatisch beheben?
Ja. Die KI von allyWay sieht sich Ihre Bilder an und schreibt Alternativtexte, die beschreiben, was tatsächlich zu sehen ist – und setzt sie auf allen Seiten ein. Die automatischen Korrekturen laufen über das allyWay-Skript, Ihr CMS, Theme und Ihre Dateien bleiben unverändert, und jede Korrektur wird protokolliert. Kostenlos starten und fehlende Alt-Texte auf Ihrer Website ergänzen lassen.
Related terms
Fehlendes Alt-Attribut: Fehler erklärt und behoben
Ein fehlendes Alt-Attribut bedeutet, dass ein img-Element (oder ein Bild-Button bzw. Bereich einer Imagemap) gar kein alt-Attribut hat. Assistive Technologien wissen dann nicht, ob das Bild wichtig oder dekorativ ist, und lesen unter Umständen den Dateinamen vor.
Read definition: Fehlendes Alt-Attribut: Fehler erklärt und behobenLeerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenFarbkontrast: WCAG-Kontrastverhältnis einfach erklärt
Farbkontrast ist der Helligkeitsunterschied zwischen Text oder Bedienelementen und ihrem Hintergrund, angegeben als Verhältnis von 1:1 bis 21:1. Die WCAG verlangen mindestens 4,5:1 für normalen und 3:1 für großen Text.
Read definition: Farbkontrast: WCAG-Kontrastverhältnis einfach erklärt