Was ist ein Alt-Text?
Stell dir vor, eine Website ist wie ein Bilderbuch – aber manche Leser können die Bilder nicht sehen. Hier kommt der Alt-Text (alternativer Text) ins Spiel. Der Alt-Text beschreibt den Inhalt eines Bildes in Worten, sodass Menschen mit Sehbeeinträchtigungen oder Suchmaschinen verstehen, was dargestellt wird. Der Alt-Text wird als Attribut innerhalb des <img>-Tags im HTML-Code verwendet und spielt eine essenzielle Rolle für Barrierefreiheit und Suchmaschinenoptimierung (SEO).
Warum ist der Alt-Text wichtig?
Ein gut geschriebener Alt-Text bietet mehrere Vorteile:
1. Barrierefreiheit (Accessibility)
Menschen mit Sehbeeinträchtigungen nutzen Screenreader, die Alt-Texte vorlesen. So erhalten sie alle relevanten Informationen zu einem Bild, die ihnen sonst verborgen blieben. Websites, die auf Barrierefreiheit achten, verbessern nicht nur die Nutzererfahrung, sondern erfüllen auch gesetzliche Vorschriften (z. B. die EU-Richtlinie für digitale Barrierefreiheit).
2. Suchmaschinenoptimierung (SEO)
Google & Co. können Bilder nicht direkt interpretieren. Alt-Texte helfen Suchmaschinen, den Inhalt eines Bildes zu verstehen und es in den richtigen Kontext zu setzen. Dadurch kann die Sichtbarkeit in der Bildersuche verbessert und gleichzeitig wird signalisiert, dass man seine Website pflegt.
3. Fehlertoleranz bei Ladeproblemen
Falls ein Bild nicht geladen werden kann (z. B. aufgrund einer langsamen Internetverbindung oder eines Serverfehlers), wird der Alt-Text als Platzhalter angezeigt. So bleibt die Information erhalten und die Nutzererfahrung wird nicht beeinträchtigt.
Wie schreibt man einen guten Alt-Text?
Ein effektiver Alt-Text sollte folgende Eigenschaften haben:
- Konkret & beschreibend: Beschreibe das Bild so präzise wie nötig, ohne unnötige Details.
- Kurz & prägnant: Ideal sind 2–10 Wörter, maximal ein kurzer Satz (bis zu 125 Zeichen, da viele Screenreader danach abschneiden).
- Keyword-optimiert (aber nicht spammy): Falls sinnvoll, integriere ein relevantes SEO-Keyword – aber nur natürlich eingebunden.
- Vermeidung von „Bild von…“ oder „Foto von…“: Suchmaschinen und Screenreader wissen bereits, dass es sich um ein Bild handelt.
Beispiele für gute und schlechte Alt-Texte
| Bild | Schlechter Alt-Text | Guter Alt-Text |
|---|---|---|
 | Hund | Schwarzer Labrador läuft über eine Wiese |
 | Schuhe Lederschuhe online günstig kaufen | Schwarze Ledersneaker mit weißen Sohlen |
Häufige Fehler beim Alt-Text
- Alt-Text weglassen: Wenn ein Bild eine wichtige Information trägt, muss es beschrieben werden.
- Zu lange Texte: Ein Alt-Text sollte nicht wie ein Absatz klingen. Halte ihn kurz und informativ.
- Keyword-Stuffing: „SEO Schuhe kaufen Sneakers Online Shop Mode Schuhe Rabatt“ – unnatürlich und schadet dem Ranking.
- Dekorative Bilder mit Alt-Text versehen: Icons oder rein ästhetische Bilder sollten ein leeres Alt-Attribut (alt=““) haben, damit Screenreader sie überspringen.
Alt-Texte sind unverzichtbar
Alt-Texte sind eine einfache, aber wirkungsvolle Möglichkeit, um sowohl die Barrierefreiheit als auch die SEO-Performance einer Website zu verbessern. Sie helfen nicht nur Menschen mit Sehbehinderungen, sondern auch Suchmaschinen, Inhalte besser zu verstehen. Indem du präzise, informative und keyword-optimierte Alt-Texte verwendest, machst du deine Website zugänglicher und erhöhst gleichzeitig deine Chancen auf bessere Platzierungen in den Suchergebnissen.
Häufige Fragen zu Alt-Texten
Nein. Für dekorative Bilder reicht ein leeres alt="", damit Screenreader sie überspringen.
Ideal sind 125 Zeichen oder weniger. Screenreader kürzen oft nach dieser Grenze.
Ja, insbesondere für die Bildersuche. Aber vermeide übermäßige Keyword-Nutzung.
Ja! Ein Logo sollte eine Beschreibung wie alt="[Firmenname] – Logo" haben.
Ein Alt-Text wird für Screenreader und SEO verwendet, während eine Bildunterschrift (<figcaption>) für alle sichtbar ist.
