onpage

Bild-Alt-Text

MetricSpot prüft, wie viele deiner `<img>`-Tags ein nicht-leeres alt-Attribut haben. Fehlende Alts bedeuten: blinde Nutzer hören nichts und Google sieht nichts.

Was diese Prüfung macht

Zählt <img>-Elemente und wie viele davon ein nicht-leeres alt-Attribut haben. Reportet das Verhältnis.

Warum es wichtig ist

Alt-Text dient drei Zielgruppen:

  • Screenreader lesen den Alt-Text blinden und sehbehinderten Nutzern vor. Ohne Alt hört der Nutzer „Bild” oder den Dateinamen — nutzlos. Das ist außerdem in der EU seit dem Barrierefreiheitsgesetz (Juni 2025) Pflicht.
  • Google Bilder rankt Bilder unter anderem nach Alt-Text. Ein gut geschriebenes Alt ist eines der stärksten Signale für Sichtbarkeit in der Bildersuche.
  • KI-Crawler können Bildinhalte (noch) nicht zuverlässig erkennen. Sie verlassen sich auf den Alt-Text, um zu wissen, was das Bild zeigt.

Es gibt noch eine vierte Zielgruppe: wenn ein Bild nicht lädt, sieht dein Nutzer den Alt-Text statt eines kaputten Bild-Icons.

Wie du es behebst

Ergänze für jedes inhaltlich relevante Bild ein beschreibendes alt:

<img src="/hero.webp" alt="MetricSpot-Audit-Bericht mit Score 87/100 und Modul-Aufschlüsselung" />

Regeln:

  • Beschreibe, was im Bild ist, nicht „Bild von”. Screenreader sagen „Bild” sowieso schon an.
  • Sei spezifisch. alt="Bericht" ist nutzlos. alt="MetricSpot-PDF-Bericht mit Score 87" ist nützlich.
  • Verzichte auf Keyword-Stuffing. Schreib nicht alt="SEO-Audit SEO-Tool SEO-Bericht". Google straft das ab und Screenreader-Nutzer hassen es.
  • Bei dekorativen Bildern nutze alt="" (leer, nicht fehlend). Screenreader überspringen leere Alts. Gilt für Hintergrundmuster, Divider-Icons usw.

Framework-Helfer:

  • Next.js <Image>: alt ist eine Pflicht-Prop.
  • MDX/Markdown: Der Alt steht zwischen den eckigen Klammern — ![das ist der Alt](bild.jpg).

Häufig gestellte Fragen

Was ist mit Logos?

Logos, die gleichzeitig Links sind (z. B. Logo im Header, das auf die Startseite verlinkt), sollten das Ziel beschreiben: alt="MetricSpot Startseite" oder alt="MetricSpot". Eigenständige Logos im Footer können alt="MetricSpot-Logo" nutzen.

Soll ich Alt zu CSS-Hintergrundbildern hinzufügen?

CSS-Hintergrundbilder sind für Screenreader nicht zugänglich. Wenn das Bild Information transportiert, nutze ein <img> mit Alt. Ist es rein dekorativ, ist ein CSS-Hintergrund okay.

Ist das title-Attribut ein Ersatz?

Nein. title erscheint als Tooltip beim Hover, wird aber von den meisten Screenreadern und vielen Touch-Geräten ignoriert. Nutze immer alt.

Quellen

Zuletzt aktualisiert 2026-05-11