Ein Bild sagt mehr als tausend Worte, heißt es. Für Menschen, die es nicht sehen, sagt es erst einmal gar nichts. Dafür gibt es den Alt-Text, eine kurze Beschreibung, die an die Stelle des Bildes tritt.
Er gehört zu den einfachsten Dingen, die du für eine barrierefreie Website tun kannst. Trotzdem fehlt er auf vielen Seiten oder ist so geschrieben, dass er nicht hilft. Die jährliche Auswertung WebAIM Million, die die Startseiten der eine Million meistbesuchten Websites prüft, zählt fehlende Alternativtexte seit Jahren zu den häufigsten Fehlern.
Was ein Alt-Text ist
Der Alt-Text, auch Alternativtext genannt, steht im Code im Attribut alt eines Bildes. Auf der Seite ist er normalerweise nicht zu sehen. Er wird aber genutzt, wenn das Bild nicht ankommt:
- Screenreader lesen ihn Menschen vor, die blind sind oder schlecht sehen.
- Lädt ein Bild nicht, zeigt der Browser an seiner Stelle den Alt-Text.
- Suchmaschinen nutzen ihn als Hinweis darauf, was das Bild zeigt.
Die Richtlinien für barrierefreie Webinhalte, kurz WCAG, verlangen für jedes Bild, das Inhalt transportiert, eine Textalternative. Das ist eines der grundlegendsten Kriterien überhaupt.
<img src="team.jpg" alt="Anna und Jonas stehen lachend vor dem Ladenlokal in der Bamberger Altstadt">Was einen guten Alt-Text ausmacht
Die wichtigste Frage ist nicht, was auf dem Bild zu sehen ist, sondern was es an dieser Stelle aussagen soll. Dasselbe Foto kann auf zwei Seiten zwei verschiedene Alt-Texte brauchen.
Ein Porträt auf der Über-mich-Seite soll zeigen, wer hinter dem Angebot steht. Im Blogbeitrag über Fotoshootings geht es vielleicht um das Licht oder den Hintergrund. Der Alt-Text richtet sich danach.
Ein paar Regeln helfen beim Schreiben:
- Kurz und konkret. Ein bis zwei Sätze reichen fast immer.
- Kein „Bild von“ oder „Foto von“. Screenreader sagen ohnehin an, dass ein Bild folgt.
- Das Wichtigste zuerst. Wer zuhört, entscheidet nach den ersten Wörtern, ob er weiter zuhört.
- Text im Bild abschreiben. Steht auf einer Grafik ein Satz, gehört genau dieser Satz in den Alt-Text.
- Keine Wiederholung. Steht direkt unter dem Bild eine Bildunterschrift mit demselben Inhalt, muss der Alt-Text sie nicht wiederholen.
Beispiele für bessere Alt-Texte
Das gleiche Foto, drei Varianten:
- Schwach: „Frau“
- Zu viel: „Bild von einer Frau mit braunen Haaren, roter Bluse und Ohrringen, die an einem Holztisch sitzt, auf dem eine Tasse und ein Laptop stehen“
- Passend für die Über-mich-Seite: „Steuerberaterin Lisa Berger im Gespräch mit einer Mandantin in ihrem Büro“
Die dritte Variante beschreibt nicht jedes Detail. Sie sagt, was das Bild auf der Seite leisten soll, nämlich zeigen, wer die Person ist und wie die Zusammenarbeit aussieht.
Wann ein Bild keinen Alt-Text braucht
Nicht jedes Bild hat einen Inhalt. Hintergründe, Schmuckelemente oder ein Foto, das nur die Stimmung unterstreicht, sind dekorativ. Würde man sie beschreiben, müssten Menschen mit Screenreader sich durch lauter unnötige Ansagen hören.
Dekorative Bilder bekommen deshalb einen leeren Alt-Text. Wichtig ist, dass das Attribut trotzdem da ist. Fehlt es ganz, lesen viele Screenreader stattdessen den Dateinamen vor.
<!-- leer, aber vorhanden: der Screenreader überspringt das Bild -->
<img src="welle-hintergrund.svg" alt="">
<!-- fehlt ganz: der Screenreader liest womöglich "welle-hintergrund.svg" vor -->
<img src="welle-hintergrund.svg">Eine einfache Probe: Stell dir vor, das Bild wäre weg. Fehlt dann eine Information, braucht es einen Alt-Text. Fehlt nichts, ist es dekorativ.
Logos, Icons und verlinkte Bilder
Ist ein Bild ein Link oder ein Button, beschreibt der Alt-Text nicht das Aussehen, sondern das Ziel oder die Funktion. Das häufigste Beispiel ist das Logo oben links, das zur Startseite führt.
<a href="/">
<img src="logo.svg" alt="Startseite Berger Steuerberatung">
</a>„Logo“ allein sagt nicht, was beim Klick passiert. „Startseite Berger Steuerberatung“ schon.
Ähnlich ist es bei Icons, etwa einer Lupe für die Suche oder einem X zum Schließen. Sind sie als Bild eingebunden, bekommen sie einen Alt-Text wie „Suche“ oder „Schließen“. Sind sie als SVG direkt in einem Button, ist ein aria-label meist der bessere Weg. Wie das geht, steht im Beitrag aria-label richtig einsetzen.
Diagramme und Infografiken
Bei komplexen Bildern reicht ein Satz nicht. Ein Diagramm über die Entwicklung deiner Anfragen lässt sich nicht in zehn Wörtern beschreiben, ohne dass Informationen verloren gehen.
Hier hilft eine Aufteilung. Der Alt-Text sagt kurz, was das Diagramm zeigt und was die Kernaussage ist. Die Zahlen stehen ausführlich im Text daneben oder in einer Tabelle darunter. Davon profitieren alle Besucher, nicht nur die mit Screenreader.
<img src="anfragen-2026.png" alt="Balkendiagramm der Anfragen pro Monat 2026, von 12 im Januar auf 31 im September gestiegen">Alt-Text und SEO
Google nutzt den Alt-Text zusammen mit dem Inhalt der Seite, um zu verstehen, was ein Bild zeigt. Das hilft vor allem in der Google-Bildersuche. In seinen Empfehlungen für Bilder rät Google zu Alt-Texten, die nützliche Informationen enthalten und das Bild im Zusammenhang der Seite beschreiben.
Genauso deutlich warnt Google davor, Alt-Texte mit Keywords zu füllen. „Webdesign Bamberg Website erstellen lassen Bamberg Webdesigner“ ist für niemanden hilfreich und kann als Spam gewertet werden. Wenn das Keyword natürlich zum Bild passt, darf es hinein. Mehr nicht.
Für die Ladezeit spielt der Alt-Text keine Rolle, die Größe der Bilddatei dagegen schon. Wie du Bilder klein bekommst, ohne dass man es sieht, steht im Beitrag über Bilder komprimieren mit WebP und AVIF.
Wo du den Alt-Text einträgst
In den gängigen Systemen musst du keinen Code schreiben:
- WordPress: In der Mediathek gibt es beim Bild das Feld „Alternativer Text“.
- Webflow: In den Einstellungen des Bildes und in der Asset-Verwaltung. Dort kannst du ein Bild auch als dekorativ markieren.
- Sanity: Bei jedem Bild gibt es ein Feld für den Alt-Text, oft als Pflichtfeld eingerichtet.
- Wix und Squarespace: In den Bildeinstellungen unter Alt-Text oder Bildbeschreibung.
Achte darauf, ob dein System den Alt-Text aus der Mediathek übernimmt oder ob du ihn bei jeder Verwendung neu setzen kannst. Weil dasselbe Bild an verschiedenen Stellen Unterschiedliches aussagen kann, ist die zweite Variante besser.
Alt-Texte mit KI schreiben
Es gibt viele Werkzeuge, die Alt-Texte automatisch erzeugen. Für eine Mediathek mit hunderten Bildern ohne jede Beschreibung ist das ein brauchbarer Anfang. Die Vorschläge beschreiben aber nur, was zu sehen ist. Ob das Bild dekorativ ist, ob es ein Link ist oder was es auf der Seite aussagen soll, weiß die KI nicht.
Nimm die Vorschläge deshalb als Entwurf. Kürze sie, ergänze Namen und Zusammenhang und lösche sie bei dekorativen Bildern ganz.
So prüfst du deine Alt-Texte
Browser-Erweiterungen wie axe DevTools oder WAVE zeigen dir, welchen Bildern das alt-Attribut fehlt. Ob ein vorhandener Alt-Text gut ist, können sie nicht beurteilen. Dafür hilft nur selbst lesen oder zuhören.
Am meisten lernst du, wenn du dir deine Seite einmal mit einem Screenreader vorlesen lässt. Wie das in fünf Minuten geht, steht im Beitrag Website mit Screenreader testen. Eine Übersicht über weitere Punkte findest du in der Checkliste zur barrierefreien Website.
Kurz zusammengefasst
Ein guter Alt-Text beschreibt in wenigen Worten, was ein Bild an dieser Stelle aussagt. Dekorative Bilder bekommen einen leeren Alt-Text, verlinkte Bilder beschreiben ihr Ziel. Wer so schreibt, hilft Menschen mit Screenreader, Besuchern mit schlechter Verbindung und nebenbei auch Google.
Bei den Websites, die ich baue, ist der Alt-Text bei jedem Bild ein eigenes Feld, das du beim Einpflegen direkt ausfüllst. Wenn du wissen willst, ob das für deine Website gilt und was das Barrierefreiheitsstärkungsgesetz damit zu tun hat, lies den Ratgeber zum BFSG.
Titelbild: Foto von WANGYIFAN2024 über Wikimedia Commons, Lizenz CC0 (öffnet in neuem Tab).
