„Ich sehe nichts. Was steht da?“ – Diese Frage stellt sich für viele blinde oder sehbehinderte Nutzer:innen täglich beim Surfen im Netz. Wenn Websites Bilder enthalten, aber keine oder schlecht geschriebene Alt-Texte, bleiben die Inhalte im Dunkeln. Dabei ist der Aufwand, das zu ändern, gering – und der Nutzen groß. Alt-Attribute, also alternative Texte, für Bilder sind einfache, aber entscheidende Bausteine digitaler Barrierefreiheit. In diesem Beitrag erfährst du, wie du sie sinnvoll einsetzt und gut formulierst.
Was ist ein Alt-Attribut?
Ein Alt-Attribut ist ein Text, der als Ersatz für ein Bild angezeigt oder vorgelesen wird, wenn das Bild nicht geladen wird – oder von einem Screenreader erkannt wird. Es wird im HTML-Code mit alt=“…“ eingefügt.
Beispiel: <img src=“katze.jpg“ alt=“Eine schwarze Katze liegt auf einem Bücherregal.“>
Barrierefreiheit ist dabei nicht der einzige Nutzen:
- Suchmaschinen erfassen Alt-Texte, weshalb sie sich positiv auf das SEO-Ranking auswirken können.
- Nutzer:innen mit schlechter Internetverbindung oder deaktivierten Bildern bekommen trotzdem Infos.
- Werden Bilder aufgrund von technischen Problemen nicht angezeigt, hilft der Alt-Text beim Verständnis.
Was macht ein gutes Alt-Attribut für Bilder aus?
Ein gutes Alt-Attribut beschreibt, was auf dem Bild zu sehen und für den Kontext der Seite wichtig ist. Der Text ist weder zu knapp noch ausschweifend. Er ersetzt das Bild – nicht mehr und nicht weniger.
Grundregeln, um gute Alt-Texte zu schreiben:
- Beschreibe das Wesentliche.
Frage dich: Warum ist das Bild da? Was sollen Nutzer:innen dadurch erfahren? - Bleib sachlich.
Keine Interpretation, keine Meinungen. Es geht um Information, nicht um Stimmung. - Vermeide „Bild von“ oder „Foto zeigt“.
Das ist redundant – der Screenreader sagt ohnehin, dass es ein Bild ist. - Passe den Detailgrad an.
Ein Produktfoto braucht andere Infos als ein Symbolbild. - Bleib kurz, sei aber nicht kryptisch.
Ziel: ca. 80–125 Zeichen. Lieber klar als komplett.
Praktische Beispiele für sinnvolle Alt-Attribute für Bilder
| Bildinhalt | Nicht barrierefrei (Beispiel) | Barrierefrei (Besseres Beispiel) |
| Mann im Rollstuhl vor Aufzug | „Mann“ | „Mann im Rollstuhl wartet vor einem Aufzug mit Rampe.“ |
| Symbolbild von Zahnrädern | „Bild von Zahnrädern“ | „Symbolbild für Teamarbeit oder Prozessoptimierung.“ |
| Infografik zu CO₂-Ausstoß | Kein Alt-Text | „Infografik: CO₂-Ausstoß im Verkehrssektor 2024 höher als im Vorjahr.“ |
| Firmenlogo | „Logo“ oder kein Alt-Text | „Logo der Firma Müller: weißer Schriftzug auf blauem Grund.“ |
| Dekoratives Blumenmuster im Hintergrund | „Blumenmuster“ | alt=““ (dekorativ, für Screenreader ausblenden) |
| Frau hält Smartphone in der Küche | „Frau“ | „Junge Frau tippt in einer modernen Küche auf ihr Smartphone.“ |
| Diagramm mit Umsatzzahlen | „Diagramm“ | „Liniendiagramm zeigt Umsatzanstieg von 20 % im Jahr 2024.“ |
| Button mit Lupe (Suchsymbol) | „Suchsymbol“ | alt=“Suche“ (oder aria-label=“Suche“, je nach Kontext) |
| Symbolbild „Hände reichen sich“ | „Zwei Hände“ | „Symbolbild für Kooperation oder Unterstützung.“ |
Typische Fehler beim Schreiben von Alt-Attributen für Bilder vermeiden
- Zu vage oder zu allgemein: „Szene in der Natur“ – was für eine Szene?
- Text auf Bildern nicht übertragen: Wenn auf dem Bild Text steht, der wichtig ist (z. B. in einem Diagramm), muss er in den Alt-Text.
- Nicht jedes Bild braucht einen Alt-Text: Zierelemente bekommen alt=““, sonst stören sie beim Vorlesen.
Ein kleiner Workflow für die Praxis
- Bild einfügen: Was zeigt es? Was ist der Zweck auf der Seite?
- Relevanz prüfen: Ist es informativ oder dekorativ?
- Kurzbeschreibung formulieren: Klar, direkt, kontextbezogen.
- Textlänge checken: Nicht zu lang, nicht zu knapp.
- Im CMS prüfen: Wird der Alt-Text richtig übernommen?
Alt-Attribute für Bilder: Kleine Texte, große Wirkung
Alt-Texte sind mehr als nur Pflichtübung – sie sind ein Zeichen für Inklusion, Qualität und Respekt gegenüber allen Nutzer:innen. Wer mitdenkt, schreibt besser. Und wer besser schreibt, macht das Netz für alle zugänglicher.
Noch ein Merksatz zum Schluss:
Alt-Attribute für Bilder sind wie ein kurzer Klappentext – klar, relevant und genau auf den Punkt.
✅ Checkliste: Gute Alt-Texte schreiben
