Alt-Texte vorhanden
Alt-Texte machen Bilder semantisch und zugänglich.
Das Thema dieser Seite: Fehlende Alt-Texte verhindern, dass Suchmaschinen und Screenreader den Bildinhalt korrekt verstehen.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check analysiert alle <img>-Elemente und zählt, wie viele Bilder
ohne Alt-Text ausgeliefert werden. Bewertet wird die Quote fehlender Alt-Texte.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Alle informativen Bilder mit Alt | Bildinhalt ist semantisch beschrieben | OK |
| Einzelne Alt-Texte fehlen | Teilweise unklare Bildbedeutung | Warnung |
| Viele Bilder ohne Alt | Zugänglichkeit und Relevanz leiden | Kritisch |
Kontext & Problemraum
Der Check ist besonders wichtig bei Produktseiten, Magazinen und Landingpages mit vielen Bildern, weil dort Alt-Texte sowohl für SEO als auch für Barrierefreiheit zählen.
| Situation | Symptom | Risiko |
|---|---|---|
| Shop mit vielen Produktbildern | Alt-Attribute fehlen oder sind leer | Weniger Relevanz in Bildersuche |
| CMS liefert Bilder automatisch aus | Default-Alt wie "Bild" | Qualitätsverlust und UX-Probleme |
| Marketing-Visuals | Keine Beschreibung | Screenreader können Inhalt nicht erfassen |
Entscheidungslogik
Konkrete Wenn-Dann-Regeln für den Einsatz von Alt-Texten.
| Wenn | Dann | Empfehlung |
|---|---|---|
| Bild trägt Inhalt | Alt-Text benötigt | Präzise Beschreibung des Bildinhalts |
| Bild ist rein dekorativ | Alt-Text leer | alt="" und ggf. aria-hidden="true" |
| Produktbilder | Alt-Text mit Produktinfo | Produktname + relevantes Merkmal |
| Icons als SVG | Semantik im SVG | Siehe SVG zugänglich |
Erklärende Details
Alt-Texte werden genutzt, wenn Bilder nicht geladen werden oder Screenreader aktiv sind. Sie sollten eindeutig sein und den Kontext der Seite berücksichtigen.
Beispiel für informatives Bild
<img src="/img/espresso-maschine.jpg" alt="Edelstahl-Espressomaschine mit Milchaufschäumer" width="640" height="480" />Beispiel für dekoratives Bild
<img src="/img/wellenlinie.svg" alt="" aria-hidden="true" />Risiken, Grenzen & Einschränkungen
| Risiko | Folge | Gegenmaßnahme |
|---|---|---|
| Alt-Text mit Keywords überladen | Spam-Signal, schlechtere UX | Nur beschreiben, was sichtbar ist |
| Alt-Text für rein dekorative Assets | Screenreader wird unnötig laut | Leeren Alt-Text setzen |
| Dynamische Bilder ohne Alt | Fehlerhafte Abdeckung | Alt-Logik im Template hinterlegen |
Interne Vernetzung
Verwandte Checks: Saubere Dateinamen, Bilder nicht zu groß, SVG zugänglich.