# Alternativtext: Gute Alt-Texte für Bilder schreiben
Source: https://allyway.ai/de/glossary/alternativtext
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](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) ist ein Kriterium der Stufe A in [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2) und damit Grundlage für Gesetze wie das [Barrierefreiheitsstärkungsgesetz](https://allyway.ai/de/regulations/bfsg). 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 |
> **Note:** > **Leer ist nicht dasselbe wie fehlend**
> `alt=""` sagt bewusst: „Dekoration, bitte überspringen.“ Fehlt das Attribut ganz, meldet jeder Scanner ein [fehlendes Alt-Attribut](https://allyway.ai/de/glossary/fehlendes-alt-attribut) – denn dann weiß niemand, ob das Bild wichtig ist.
## 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.
```html title="Beispiel"
```
**Do:** Do
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.
**Don't:** Don't
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
1. **Code ansehen** – Rechtsklick auf das Bild, *Untersuchen*, und das `alt`-Attribut im Quelltext prüfen.
2. **Ganze Seite scannen** – ein automatischer Scanner findet fehlende Attribute auf der gesamten Seite.
3. **Inhalt bewerten** – passt die Beschreibung zum Kontext? Das erkennt kein Scanner – hier ist Ihr Urteil gefragt.
4. **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](https://allyway.ai/de/glossary/leerer-link); in einer Schaltfläche ein [leerer Button](https://allyway.ai/de/glossary/leerer-button). Prüfen Sie diese Stellen daher besonders sorgfältig.
## Häufige Fragen
Q: Wie lang sollte ein Alternativtext sein?
A: 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.
Q: Brauchen dekorative Bilder einen Alternativtext?
A: Sie brauchen ein leeres Attribut: `alt=""`. So überspringt der Screenreader das Bild. Wörter wie „Abstandhalter“ oder „Bild“ wertet das W3C als Fehler.
Q: Ist das title-Attribut dasselbe wie ein Alt-Text?
A: Nein. Viele Screenreader ignorieren `title`, und auf Touch-Geräten ist es nicht sichtbar. Der Alternativtext gehört immer ins `alt`-Attribut.
Q: Wie finde ich Bilder ohne Alternativtext auf meiner Website?
A: Am schnellsten mit dem [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites): Er prüft Ihre Startseite und listet Bilder ohne Textalternative auf.
Q: Kann allyWay fehlende Alternativtexte automatisch beheben?
A: 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](https://allyway.ai/de/automatic-accessibility-fixes-for-website) laufen über das allyWay-Skript, Ihr CMS, Theme und Ihre Dateien bleiben unverändert, und jede Korrektur wird protokolliert. [Kostenlos starten](https://app.allyway.ai/register) und fehlende Alt-Texte auf Ihrer Website ergänzen lassen.