Gute Alt-Texte schreiben zu können, gehört zu den am meisten unterschätzten Fähigkeiten in jedem Content-Team. Zugleich gehört es zu den am häufigsten falsch gemachten. Ein automatischer Test sagt Ihnen zuverlässig, ob ein Alt-Text fehlt. Ob er etwas taugt, sagt Ihnen keine Software, sondern nur ein Mensch. Genau dort liegt das Problem. Denn viele Bilder haben zwar einen Alt-Text, aber einen nutzlosen. In diesem Ratgeber zeige ich Ihnen aus der Audit-Praxis, wie Sie es richtig machen. Sie bekommen eine einfache Entscheidungslogik nach Bildtyp, klare Formulierungsregeln und viele Gut-und-Schlecht-Beispiele. Dazu kommen die Fehler, die ich immer wieder sehe. Am Ende treffen Sie für jedes Bild auf Ihrer Seite in Sekunden die richtige Entscheidung.

Was ist ein Alt-Text – und warum entscheidet er über Zugang?

Ein Alt-Text (Alternativtext) ist die textliche Beschreibung eines Bildes. Ein Screenreader liest sie anstelle des Bildes vor. Für blinde und stark sehbehinderte Menschen ist er die einzige Möglichkeit, den Inhalt eines Bildes zu erfassen. Das zugehörige Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt) der WCAG verlangt für jeden Nicht-Text-Inhalt eine sinnvolle Textalternative. Es ist damit eines der grundlegendsten Kriterien überhaupt.

Der Nutzen reicht über Screenreader hinaus. Lädt ein Bild nicht, zeigt der Browser den Alt-Text an. Auch Suchmaschinen werten ihn aus, um zu verstehen, was ein Bild zeigt. Guter Alt-Text ist damit zugleich ein SEO-Faktor, wie ich im Ratgeber zu Barrierefreiheit und SEO ausführe. Wie ein Alt-Text im Alltag klingt, wenn der Screenreader ihn vorliest, zeige ich anhand echter Nutzererfahrungen mit Screenreadern.

Die schlechte Nachricht vorweg: Es gibt nicht den einen richtigen Alt-Text für ein Bild. Derselbe Schuh braucht auf der Kategorieseite eine andere Beschreibung als im Magazin-Artikel. Der richtige Alt-Text hängt immer vom Zweck ab, den das Bild an genau dieser Stelle erfüllt. Deshalb beginnt jede gute Entscheidung mit einer Frage.

Die wichtigste Frage zuerst: Welche Art von Bild ist es?

Bevor Sie auch nur ein Wort schreiben, ordnen Sie das Bild einem von vier Typen zu. Das bestimmt die gesamte Vorgehensweise. Ist es dekorativ, informativ, funktional oder komplex? Diese vier Fälle decken praktisch jedes Bild im Web ab. Und jeder wird grundlegend anders behandelt.

Diese Einordnung klingt simpel. Tatsächlich ist sie aber der Punkt, an dem die meisten Fehler entstehen. Denn Bilder bekommen pauschal „irgendeinen“ Alt-Text, ohne dass jemand den Typ bestimmt hat. Gehen wir die vier Fälle einzeln durch.

Dekorative Bilder: warum leerer Alt-Text Pflicht ist

Dekorative Bilder tragen keine Information, die zum Verständnis nötig ist. Beispiele sind eine Trennlinie, ein Zierornament oder ein rein atmosphärisches Hintergrundbild. Für sie ist der richtige Alt-Text ein leerer Alt-Text: alt="". Damit weiß der Screenreader, dass er das Bild bewusst überspringen darf. So stört es den Lesefluss nicht.

Hier liegt einer der wichtigsten und am wenigsten bekannten Unterschiede überhaupt. Ein leerer Alt-Text ist nicht dasselbe wie ein fehlender. Schreiben Sie alt="", schweigt der Screenreader. Lassen Sie das Attribut dagegen ganz weg, behilft sich das Programm oft mit dem Dateinamen. Dann liest es dem Nutzer „I-M-G unterstrich 4 5 9 2 Punkt J-P-G“ vor. Ein fehlendes Alt-Attribut ist also schlimmer als ein leeres, weil es aktiv Lärm erzeugt.

In der Praxis bedeutet das: Auch dekorative Bilder brauchen eine bewusste Entscheidung. „Kein Alt-Text nötig“ heißt nicht „Attribut weglassen“, sondern „Attribut leer setzen“. Manche versehen dekorative Grafiken hingegen mit Beschreibungen wie alt="dekoratives Element". Das macht es schlimmer, denn das ist genau die überflüssige Ansage, die man vermeiden wollte.

Informative Bilder: Bedeutung statt Pixel beschreiben

Informative Bilder transportieren Inhalt, den der Nutzer sonst verpassen würde. Und genau diese Bedeutung gehört in den Alt-Text, nicht eine wörtliche Bildbeschreibung. Die Leitfrage lautet: Was würde ein sehender Nutzer aus diesem Bild mitnehmen? Genau das, knapp formuliert, ist Ihr Alt-Text.

Ein Beispiel macht den Unterschied deutlich. Ein Foto zeigt einen Hund, der am Strand einen Stock apportiert. Schlecht: alt="Bild" oder alt="Hund" – zu nichtssagend. Gut: alt="Golden Retriever apportiert einen Stock am Strand", wenn diese Details zur Aussage gehören. Steht das Bild dagegen in einem Artikel über Wassersport, kann der relevante Aspekt ein ganz anderer sein. Der Kontext entscheidet also, was wichtig ist.

Drei Regeln helfen bei der Formulierung. Erstens: Beginnen Sie nicht mit „Bild von“ oder „Foto, das zeigt“. Der Screenreader sagt ohnehin schon „Grafik“ an, und das davor zu wiederholen ist doppelt. Zweitens: Halten Sie sich kurz. Etwa 125 Zeichen sind ein guter Richtwert, denn sehr lange Alt-Texte werden von manchen Programmen abgeschnitten. Drittens: Verzichten Sie auf Keyword-Stuffing. Ein Alt-Text voller Suchbegriffe verstößt gegen 1.1.1, nervt den Nutzer und schadet Ihrem SEO mehr, als er nützt.

Zwei weitere Beispiele zeigen, wie stark der Kontext zählt. Ein Foto des Geschäftsführers auf der Über-uns-Seite braucht meist nur alt="Porträt von [Name]". Wie die Person im Detail aussieht, ist für die Aussage selten relevant. Dasselbe Foto in einem Presseartikel über eine Auszeichnung könnte dagegen die Situation beschreiben: alt="[Name] nimmt den Innovationspreis 2026 entgegen". Und ein Diagramm-Ausschnitt, der im Fließtext eine Aussage belegt, braucht den Kernbefund im Alt-Text. Ein Beispiel ist alt="Conversion steigt nach Relaunch um 18 Prozent", nicht eine Beschreibung der Balkenfarben. Die Leitfrage bleibt bei jedem Bild dieselbe: Was trägt es zur Aussage genau dieser Seite bei?

Funktionale Bilder: die Aktion beschreiben, nicht das Bild

Ist ein Bild zugleich ein Link oder eine Schaltfläche, beschreibt der Alt-Text das Ziel oder die Aktion. Das Aussehen bleibt außen vor. Was der Nutzer wissen muss, ist nicht, wie der Knopf aussieht. Vielmehr zählt, was passiert, wenn er ihn auslöst.

Das klassische Beispiel ist das Firmenlogo in der Kopfzeile, das zur Startseite verlinkt. Schlecht: alt="Logo" – das beschreibt das Bild, nicht die Funktion. Gut: alt="Startseite IFDB", denn das ist es, was der Link tut. Genauso ist es bei einem Lupen-Icon, das die Suche öffnet: nicht alt="Lupe", sondern alt="Suche". Und bei einem Papierkorb-Symbol, das einen Eintrag löscht: alt="Eintrag löschen".

Dieser Fall überschneidet sich eng mit der Frage nach barrierefreien Bedienelementen insgesamt. Reine Icon-Buttons ohne zugänglichen Namen sind eine der häufigsten Barrieren überhaupt, gerade in Online-Shops. Wie sich das konkret auswirkt, zeige ich im Ratgeber zum barrierefreien Online-Shop. Die Regel bleibt dieselbe: Funktion vor Aussehen.

Komplexe Bilder: Diagramme und Infografiken

Bei komplexen Bildern wie Diagrammen, Infografiken oder detailreichen Karten reicht ein kurzer Alt-Text nicht aus. Sie brauchen einen kurzen Alt-Text plus eine ausführliche Beschreibung in der Nähe. Der Fehler, der mir hier am häufigsten begegnet, ist der Versuch, ein ganzes Säulendiagramm in ein einziges Alt-Attribut zu pressen. Das Ergebnis ist ein endloser, unzuhörbarer Wortschwall.

Besser ist eine Zweiteilung. Der Alt-Text benennt knapp, worum es geht: alt="Säulendiagramm: Umsatz pro Quartal 2025". Die eigentlichen Daten gehören dann an eine Stelle, die alle Nutzer erreichen. Idealerweise stehen sie als echte Datentabelle direkt darunter, alternativ als beschreibender Text. Eine Tabelle hat zudem einen Vorteil: Auch sehende Nutzer können die genauen Werte ablesen, statt sie aus dem Diagramm zu schätzen.

Für Karten und schematische Darstellungen gilt dasselbe Prinzip. Was ist die Kernaussage, und wo finden Nutzer die vollständige Information in zugänglicher Form? Eine Anfahrtskarte etwa braucht weniger eine Beschreibung der Straßenführung. Wichtiger sind die Adresse und eine textliche Wegbeschreibung daneben.

Ein vollständiges Beispiel zeigt das Zusammenspiel. Unter dem Umsatzdiagramm steht eine schlichte Datentabelle mit zwei Spalten, „Quartal“ und „Umsatz in Euro“, sowie vier Zeilen für Q1 bis Q4. Der Alt-Text des Diagramms lautet knapp alt="Umsatz pro Quartal 2025, Details in der Tabelle darunter". So bekommt jeder Nutzer denselben Inhalt. Das Diagramm dient dem schnellen Überblick, die Tabelle liefert die genauen Werte. Genau diese Kombination ist der Goldstandard für datenlastige Grafiken.

So hängen Sie lange Bildbeschreibungen technisch an

Bei komplexen Bildern stellt sich die Frage, wie die ausführliche Beschreibung technisch mit dem Bild verbunden wird. Dafür gibt es zwei saubere Wege. Der einfachste nutzt eine sichtbare Bildunterschrift im figure-Element mit zugehöriger figcaption. Diese Unterschrift steht für alle da und liegt zugleich im Zugänglichkeitsbaum. Der Alt-Text benennt dann nur knapp das Bild, die figcaption trägt die Details.

Soll die Beschreibung nicht sichtbar sein, hilft das Attribut aria-describedby. Sie geben dem beschreibenden Textblock eine id und verweisen vom Bild mit aria-describedby="diagramm-daten" darauf. Der Screenreader liest dann erst den Alt-Text und danach den verknüpften Block. Das alte longdesc-Attribut brauchen Sie dagegen nicht mehr, denn moderne Screenreader unterstützen es kaum noch. Und für rein dekorative Bilder gibt es neben alt="" zwei gleichwertige Alternativen: role="presentation" oder aria-hidden="true". Beide nehmen das Bild ebenfalls aus der Ansage.

alt, title oder aria-label – was wann gilt

In der Praxis verwechseln viele das Alt-Attribut mit title oder aria-label. Die Unterscheidung ist aber wichtig, denn nur eine Variante ist verlässlich. Für Bilder gilt: Das alt-Attribut ist immer die erste Wahl. Es wird von allen Screenreadern und auch von Suchmaschinen ausgewertet. Das title-Attribut dagegen erzeugt nur einen Tooltip bei Mausnutzung. Tastatur- und Touch-Nutzer sehen ihn nie, und viele Screenreader ignorieren ihn. Verlassen Sie sich also nie auf title als Ersatz für einen Alt-Text.

Bei Bildern, die zugleich Bedienelemente sind, gibt es eine klare Rangfolge. Hat ein Bild ein alt, genügt das. Fehlt es, greifen Screenreader der Reihe nach auf aria-labelledby, dann aria-label und zuletzt auf den Dateinamen zurück. Setzen Sie deshalb pro Element genau einen zugänglichen Namen, nicht mehrere gleichzeitig. Mehrere konkurrierende Angaben führen sonst zu doppelten oder widersprüchlichen Ansagen.

Text in Bildern und weitere Sonderfälle

Enthält ein Bild Text, muss dieser Text vollständig in den Alt-Text. Das gilt für ein Werbebanner, ein Zitat als Grafik oder ein eingebundenes Logo mit Slogan. Zeigt ein Banner „20 % Rabatt auf alle Schuhe“, lautet der Alt-Text exakt alt="20 % Rabatt auf alle Schuhe". Noch besser ist es, Text gar nicht erst als Bild einzubinden. Denn das Erfolgskriterium 1.4.5 (Bilder eines Textes) rät ausdrücklich davon ab. Solcher Text skaliert nicht, bricht nicht um und verpixelt bei Vergrößerung.

Ein paar weitere Fälle tauchen ständig auf. Bei Produktfotos beschreiben Sie die kaufrelevanten Merkmale, nicht jedes Detail. Emojis tragen oft Bedeutung und sollten eine Textentsprechung haben, sonst liest der Screenreader kryptische Codes. CAPTCHAs brauchen zwingend eine Alternative, sonst sperren sie blinde Nutzer komplett aus. Reine Hintergrundbilder per CSS tauchen für den Screenreader gar nicht auf. Das ist in Ordnung, solange sie wirklich nur dekorativ sind und keine Information transportieren.

Ein in der Tech- und Software-Branche häufiger Fall sind Screenshots. Beschreiben Sie nicht „Screenshot“, sondern was er zeigt. Ein Beispiel ist alt="Einstellungsdialog mit aktivierter Zwei-Faktor-Authentifizierung". Demonstriert der Screenshot eine Bedienung Schritt für Schritt, gehört diese Abfolge zusätzlich als Text in die Anleitung. So ist niemand allein auf das Bild angewiesen. Auch hier gilt die Grundregel des gesamten Themas: Der Alt-Text transportiert die Aussage, nicht das Medium.

Gerade bei Dokumenten lohnt zudem ein zweiter Blick, denn dort werden Alt-Texte besonders oft vergessen. Wie Sie Bilder in PDFs korrekt auszeichnen, behandle ich im Leitfaden zum barrierefreien PDF. Der Maßstab für all diese Fälle bleibt die WCAG 2.2.

Die häufigsten Fehler beim Alt-Texte schreiben

Wenn ich Seiten auf ihre Alt-Texte prüfe, wiederholen sich dieselben Muster. Diese sieben Fehler sind die häufigsten. Und alle sind leicht zu vermeiden, sobald man sie kennt:

• Das Alt-Attribut ganz weglassen, sodass der Screenreader den Dateinamen vorliest.
• Dekorative Bilder beschreiben, statt ihnen einen leeren Alt-Text zu geben.
• Mit „Bild von“ oder „Grafik, die zeigt“ beginnen – doppelte Ansage.
• Bei Logos und Icons das Aussehen statt der Funktion beschreiben.
• Ein komplettes Diagramm in ein einziges Alt-Attribut quetschen.
• Keywords stopfen, um SEO zu betreiben – das erreicht das Gegenteil.
• Den Kontext ignorieren und denselben Standard-Alt-Text überall einsetzen.

Ein Sonderfall verdient eigene Aufmerksamkeit: automatisch erzeugte Alt-Texte. KI-Werkzeuge schlagen heute Beschreibungen vor. Doch sie liefern fast immer eine wörtliche Bildbeschreibung („eine Person sitzt an einem Schreibtisch“) und verfehlen die Bedeutung im Seitenzusammenhang. Nutzen Sie solche Vorschläge gern als Rohmaterial. Aber prüfen Sie jeden einzelnen darauf, was das Bild an dieser Stelle wirklich beitragen soll.

So verankern Sie gute Alt-Texte im Team

Gute Alt-Texte entstehen nicht durch einmalige Anstrengung, sondern durch einen festen Prozess. Sonst schleichen sich die alten Fehler mit jedem neuen Beitrag zurück. Der wirksamste Hebel ist, die Verantwortung klar zuzuweisen. Wer ein Bild hochlädt, schreibt auch seinen Alt-Text. Und zwar in der Redaktion, nicht in der IT, denn nur die Redaktion kennt den gemeinten Zweck des Bildes im jeweiligen Beitrag.

Drei Maßnahmen haben sich in der Praxis bewährt. Erstens ein knapper Styleguide mit genau den vier Bildtypen und je zwei, drei Beispielen. Mehr braucht niemand, und gerade deshalb wird er tatsächlich gelesen. Zweitens ein Pflichtfeld im Content-Management-System. Lässt sich ein Bild nicht ohne Alt-Text-Entscheidung speichern, also ohne Beschreibung oder bewusst gesetztes Leerfeld, kann der Fehler gar nicht erst entstehen. Drittens eine kurze Sichtprüfung im Redaktions-Review, bei der die Alt-Texte einmal überflogen werden.

Bei größeren Bildbeständen, etwa in gewachsenen Shops oder Archiven, lohnt ein systematischer Durchgang statt punktueller Korrektur. Genau hier setzt ein Audit an. Es deckt nicht nur die fehlenden Alt-Texte auf, sondern bewertet auch die vorhandenen. Zudem liefert es eine priorisierte Liste, mit welchen Bildern Sie den größten Effekt erzielen. Unser Tiefen-Audit Access Ready übernimmt diese Bewertung mit echten Nutzern, statt Sie mit einer reinen Fehlerzahl allein zu lassen.

Der Praxis-Test für jeden Alt-Text

Es gibt eine einfache Regel, die fast alle Zweifelsfälle löst. Ich gebe sie jedem Content-Team mit.

Aus der Praxis – der Ergänzungs-Test: Ein guter Alt-Text ergänzt das, was der umgebende Text nicht ohnehin schon sagt. Prüfen Sie deshalb bei jedem Bild: Steht die Information direkt daneben bereits im Text? Dann ist der Alt-Text oft korrekt leer. Das klassische Beispiel: Ein Produktbild steht direkt über der Überschrift „Blauer Laufschuh“. Geben Sie dem Bild jetzt den Alt-Text alt="Blauer Laufschuh" und verlinken beides zur Produktseite. Dann hört der Screenreader-Nutzer „Blauer Laufschuh, Link – Blauer Laufschuh“ zweimal hintereinander. In diesem Fall ist alt="" die bessere Wahl, weil die Überschrift die Information schon trägt. Lesen Sie im Zweifel den Satz mit eingesetztem Alt-Text laut vor. Klingt er sinnvoll und ohne Wiederholung, stimmt er. Klingt er doppelt oder hölzern, kürzen Sie.

Vom Erkennen zum Bewerten

Damit haben Sie das Werkzeug, um Alt-Texte richtig zu schreiben. Bleibt die Frage, wie Sie den Bestand auf Ihrer ganzen Seite in den Griff bekommen. Der erste Schritt ist das Aufspüren. Unser kostenloser Access Score scannt Ihre Website in Minuten und zeigt, wo Alt-Texte komplett fehlen. Das ist die Pflicht, aber eben nur der erste Teil.

Denn ein Scanner erkennt nur die Abwesenheit, nicht die Qualität. Ob alt="Bild" dort steht, wo eine echte Beschreibung hingehört, ob das Logo seine Funktion benennt, ob ein Diagramm seine Daten zugänglich macht: Das beurteilt keine Software, sondern nur ein Mensch. Andere Anbieter lassen Sie mit der grünen Scanner-Ampel allein. Wir prüfen dagegen mit echten Nutzerinnen und Nutzern assistiver Technologien, was Ihre Alt-Texte im Alltag tatsächlich leisten. Diese belastbare Bewertung samt rechtssicherem Zertifikat liefert das Tiefen-Audit Access Ready. So wird aus „ein Alt-Text ist vorhanden“ verlässlich ein „der Alt-Text funktioniert wirklich“.