Aussagekräftige Alt-Texte schreiben

Was diese Prüfung macht

Geht jedes <img>-Element der Seite durch und inspiziert das alt-Attribut. Die Prüfung fällt durch, wenn der Alt-Text eines der folgenden Muster aufweist: ein Dateiname (IMG_2837.jpg, hero-final-v2.png), ein generischer Platzhalter (Bild, image, picture, photo, img), ein einzelnes Zeichen (x, .) oder ein Anfang mit „Bild von” / „Foto von” — assistive Technologie kündigt die Rolle bereits als „Grafik” an, der Zusatz ist also überflüssiges Rauschen.

Das ist die Schwester-Prüfung zu Alt-Text für Bilder, die nur das Vorhandensein prüft. Diese Prüfung bewertet die Qualität.

Warum es wichtig ist

Schlechter Alt-Text schadet aktiv.

• Screenreader-Nutzer hören ihn statt das Bild zu sehen. „IMG Unterstrich zwei acht drei sieben Punkt Jay-Peg” ist das schlechtestmögliche Ergebnis — die assistive Technologie liest den Dateinamen Buchstabe für Buchstabe vor.
• Suchmaschinen nutzen Alt-Text als Ranking-Signal für die Bildersuche. Dateinamen als Alt verschwenden den Platz.
• KI-Extraktoren (multimodale LLMs, die eine Seite scannen) zitieren Alt-Texte bei der Beschreibung der Seite. Eine Seite, auf der jeder Bild-Alt hero.jpg heißt, wirkt für Menschen wie für KI lieblos.

Die Lösung lautet nicht „mehr Wörter hinzufügen”, sondern „das Bild im Kontext in einfacher Sprache beschreiben”.

Wie du es behebst

Öffne jedes markierte Bild und schreibe den Alt-Text so um, dass er beschreibt, was das Bild im jeweiligen Kontext vermittelt. Gleiches Bild, andere Seite, anderer Alt — das ist normal.

Dekorative Bilder (Logo-Rahmen, Trenner, Hero-Muster) — leerer Alt:

<img src="/divider.svg" alt="">

alt="" sagt Screenreadern: „überspringen; trägt keine Bedeutung”. Lass das Attribut nicht ganz weg — fehlt alt, lesen manche Reader stattdessen den Dateinamen vor.

Informative Bilder — Funktion oder Inhalt beschreiben:

<!-- Schlecht -->
<img src="/charts/q3.png" alt="chart">
<img src="/team/jane.jpg" alt="IMG_2837.jpg">
<img src="/screenshot.png" alt="Bild des Dashboards">

<!-- Gut -->
<img src="/charts/q3.png" alt="Q3-Umsatz +38 % gegenüber Q2, getrieben vom Enterprise-Tarif">
<img src="/team/jane.jpg" alt="Jane Patel, CTO">
<img src="/screenshot.png" alt="MetricSpot-Dashboard zeigt fünf bestandene Prüfungen">

Verlinkte Bilder — Linkziel beschreiben, nicht das Motiv:

<a href="/docs/">
  <img src="/icons/book.svg" alt="Dokumentation">
</a>

Komplexe Bilder (Diagramme, Infografiken) — Daten beschreiben, Details verlinken:

<img src="/q3-funnel.png" alt="Conversion-Funnel: 1000 Besuche → 230 Anmeldungen → 28 zahlende (2,8 %).">
<a href="/q3-funnel-full.txt">Vollständige Datentabelle</a>

CMS- / Framework-Muster.

• WordPress — Mediathek → Bild anklicken → Feld „Alternativer Text”. Bestehende Beiträge prüfen unter Werkzeuge → Website-Zustand → Bilder ohne Alt-Text.
• Astro / Next.js Image — <Image alt={...} /> ist auf Typ-Ebene Pflicht; TypeScript baut ohne nicht.
• React — kleine Lint-Regel (jsx-a11y/alt-text aus eslint-plugin-jsx-a11y) hinzufügen und CI bei fehlenden oder dateinamen-ähnlichen Alts brechen lassen.

Selbst auditieren. DevTools-Konsole öffnen und ausführen:

[...document.images]
  .filter(i => !i.alt || /^(image|img|picture|photo|bild|\.|x)$/i.test(i.alt.trim()) || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(i.alt))
  .map(i => i.src);

Alles im Ergebnis ist ein Junk-Alt.

Häufig gestellte Fragen

Sollte jedes Bild einen Alt-Text haben?

Ja, aber er darf bei dekorativen Bildern leer sein (alt=""). Das Attribut selbst muss vorhanden sein — Tools melden seine Abwesenheit als Verstoß.

Wie lang sollte ein Alt-Text sein?

So lang wie nötig, so kurz wie möglich. Ein Satz reicht meist; ein Diagramm braucht vielleicht zwei. Vergiss das oft zitierte „125-Zeichen-Limit” — das ist ein Screenreader-Puffer-Gerücht, keine echte Grenze.

Soll ich das Wort „Bild” mit aufnehmen?

Nein. Screenreader kündigen die Rolle bereits an („Grafik”). „Bild eines Hundes” wird zu „Grafik, Bild eines Hundes”. Schreib einfach „Golden-Retriever-Welpe kaut einen Schuh”.