Alt-Texte richtig schreiben: Regeln, Beispiele und ehrliche KI-Hilfe

Fehlende Alternativtexte gehören zu den Verstößen, die jede Prüfsoftware in Sekunden findet. Genau deshalb stehen sie in automatischen Prüfberichten regelmäßig ganz oben: in den Scans der Marktüberwachungsbehörde genauso wie in den Prüfberichten, die Abmahnschreiben beiliegen. Die gute Nachricht: Kaum ein Verstoß lässt sich so schnell beheben, und die Regeln für gute Alt-Texte passen auf eine Karteikarte. Dieser Ratgeber zeigt sie mit konkreten Gut/Schlecht-Beispielen, erklärt den Kontext-Test, an dem die meisten Alt-Texte scheitern, und ordnet ehrlich ein, wobei KI-Werkzeuge helfen und wo sie danebenliegen. Den ersten Entwurf für ein konkretes Bild können Sie direkt hier erzeugen.

Warum Alt-Texte zuerst auffallen

Die Grundlage steht in den WCAG 2.2: Erfolgskriterium 1.1.1 „Nicht-Text-Inhalte“ verlangt für jedes Bild eine Textalternative, die demselben Zweck dient wie das Bild selbst. Das Kriterium liegt auf Stufe A, der untersten der drei Konformitätsstufen. Wer es verfehlt, verfehlt damit jede WCAG-Konformität, egal wie sauber der Rest der Website gebaut ist.

Dazu kommt die Durchsetzung. Ob ein Bild ein alt-Attribut hat, ist maschinell trivial feststellbar. Die Marktüberwachungsstelle MLBF nutzt für ihre Vorprüfungen automatisierte Scans, und auch die WCAG-Prüfberichte, die seit 2025 manchen Abmahnungen beiliegen, führen genau solche maschinell erkennbaren Funde auf. Für Angebote im Anwendungsbereich des BFSG sind Alt-Texte damit der sichtbarste Teil der Pflicht: der Verstoß, der zuerst auffällt, und der, der sich am wenigsten wegdiskutieren lässt.

Technisch ist der Alt-Text ein Attribut am img-Element im HTML. Ein Screenreader liest ihn an der Stelle vor, an der Sehende das Bild sehen. Fehlt das Attribut, greifen viele Screenreader ersatzweise zum Dateinamen, und aus dem Produktfoto wird ein vorgelesenes „IMG_4032.jpg“. Wer das einmal in einer Screenreader-Demo gehört hat, vergisst es nicht mehr.

Von guten Alt-Texten profitieren übrigens nicht nur blinde Nutzer. Der Text erscheint auch, wenn ein Bild nicht lädt, etwa im Zug mit schwacher Verbindung, er macht Bildinhalte für Suchmaschinen lesbar, und Braillezeilen geben ihn als tastbaren Text aus. Die Textalternative ist die Form von Information, die noch funktioniert, wenn alles andere ausfällt.

Die Grundregeln: gute Alt-Texte in sieben Punkten

Die maßgebliche Referenz ist das Bild-Tutorial der Web Accessibility Initiative des W3C. Seine Kernregeln lassen sich in sieben Punkten zusammenfassen:

• Funktion vor Aussehen: Beschreiben Sie, was das Bild an dieser Stelle leistet, nicht jedes sichtbare Detail. Bei einem Lupen-Icon im Suchfeld ist „Suchen“ richtig, nicht „Lupe auf grauem Grund“.
• Kurz und präzise: Ein prägnanter Satz als Faustregel. Was länger braucht, gehört als Beschreibung in den umgebenden Text, nicht ins alt-Attribut.
• „Bild von“ und „Foto von“ weglassen: Der Screenreader kündigt Bilder ohnehin als Grafik an. „Foto von einem roten Sneaker“ verschenkt die ersten drei Wörter.
• Verlinkte Bilder beschreiben das Linkziel: Führt das Logo zur Startseite, lautet der Alt-Text „Zur Startseite“, nicht „Logo“. Das Ziel zählt, nicht das Motiv.
• Dekorative Bilder bekommen einen leeren Alt-Text: alt="" sorgt dafür, dass Screenreader das Bild vollständig überspringen. Wie Sie die Abgrenzung treffen, steht weiter unten.
• Dateinamen sind keine Alt-Texte: „header-final-v3.jpg“ hilft niemandem, auch nicht in der Bildersuche.
• Komplexe Grafiken brauchen mehr: Ein Diagramm bekommt einen kurzen Alt-Text mit der Kernaussage plus eine ausführliche Beschreibung im umliegenden Text oder als Datentabelle.

Wie das in der Praxis aussieht, zeigt die Tabelle. Die fünf Fälle decken die häufigsten Bildtypen ab, vom Produktfoto bis zum Diagramm:

Das Muster hinter allen fünf Zeilen: Der gute Alt-Text beantwortet die Frage, was ein sehender Besucher an dieser Stelle aus dem Bild mitnimmt. Nicht mehr und nicht weniger. Deshalb gibt es auch keine Alt-Text-Datenbank zum Nachschlagen: Die Antwort hängt an der Seite, nicht am Bild.

Der Kontext-Test: dasselbe Foto, drei richtige Alt-Texte

Der häufigste Denkfehler beim Schreiben ist die Annahme, ein Bild habe eine feste, objektive Beschreibung. Hat es nicht. Das W3C-Tutorial macht den Kontext ausdrücklich zum entscheidenden Kriterium: Dasselbe Foto braucht je nach Seite einen anderen Alt-Text, manchmal auch gar keinen.

Nehmen Sie ein Foto: eine Frau mit Headset an einem Schreibtisch. Auf der Kontaktseite eines Kundendiensts ist es reine Illustration, der Alt-Text bleibt leer. Im Blogartikel über die neue Support-Leiterin ist dasselbe Foto informativ: „Anna Berger, Leiterin des Kundendiensts, an ihrem Arbeitsplatz“. Und als klickbare Kachel, die zum Support-Formular führt, beschreibt der Alt-Text das Ziel: „Zum Support-Formular“. Drei Seiten, drei richtige Antworten, ein Bild.

Daraus folgt auch der beste Zeitpunkt zum Schreiben: der Moment des Einpflegens. Wer das Bild gerade ausgewählt hat, weiß noch, warum es auf die Seite soll. Wochen später, beim Aufräumen der Mediathek, ist genau dieses Wissen verschwunden, und das Nachtragen dauert doppelt so lang.

Dekorativ oder informativ? So entscheiden Sie

Dekorative Bilder bekommen einen leeren Alt-Text: alt="". Das ist keine Nachlässigkeit, sondern die korrekte Auszeichnung. Der Screenreader überspringt das Bild dann vollständig, und niemand verliert Zeit mit Belanglosem. Wichtig ist der Unterschied zum fehlenden Attribut: Ohne alt-Attribut kündigen viele Screenreader das Bild trotzdem an, oft mit dem Dateinamen. Leer heißt ausdrücklich leer, nicht weggelassen.

• Ist das Bild verlinkt oder löst es eine Aktion aus? Dann braucht es immer einen Alt-Text, der das Ziel benennt.
• Zeigt das Bild Text, etwa ein Banner mit Rabattcode? Dann gehört der komplette Text in den Alt-Text.
• Würde beim Entfernen des Bildes Information fehlen? Dann ist es informativ und braucht eine Beschreibung.
• Steht die Aussage des Bildes bereits vollständig im umgebenden Text? Dann ist das Bild meist dekorativ.
• Ist es ein Stimmungsfoto, ein Muster, ein Trenner ohne eigene Aussage? Leerer Alt-Text, fertig.

Alt-Texte im Onlineshop: wo es ums Geld geht

In Onlineshops sind Alt-Texte doppelt relevant. Rechtlich, weil B2C-Shops als Dienstleistungen im elektronischen Geschäftsverkehr vom BFSG erfasst sind und Produktbilder ohne Alternativtexte zu den typischen Funden automatischer Prüfungen gehören. Und wirtschaftlich, weil ein blinder Kunde ohne Alt-Text schlicht nicht weiß, was er kauft: Farbe, Schnitt und Material stehen oft nur im Bild, nicht in der Produktbeschreibung.

Praktisch heißt das: Der Alt-Text eines Produktfotos ergänzt die Produktdaten, statt sie zu wiederholen. Steht „Sneaker Modell Vento, weiß“ schon als Überschrift daneben, beschreibt der Alt-Text, was das Bild zusätzlich zeigt, etwa die Seitenansicht mit der roten Sohle. Bei fünf Galeriebildern desselben Produkts benennt jeder Alt-Text seine eigene Perspektive: Nahaufnahme der Naht, Sohle von unten, am Fuß getragen. Fünfmal derselbe Satz wäre für Screenreader-Nutzer so hilfreich wie fünfmal dasselbe Foto für Sehende.

Der SEO-Effekt ist real, aber kein Freifahrtschein: Suchmaschinen nutzen Alt-Texte, um Bilder zu verstehen, gute Alternativtexte verbessern also die Chancen in der Bildersuche. Wer aber „Sneaker kaufen günstig Sneaker Herren Sneaker weiß“ ins alt-Attribut stopft, hilft keinem Nutzer und betreibt keine Barrierefreiheit, sondern Spam im Vorleseton. Schreiben Sie den Alt-Text für Menschen. Die Suchmaschine liest mit und honoriert genau das.

Ein Wort zur Pflege: In den meisten Shopsystemen leben Alt-Texte in der Mediathek oder direkt am Produktbild, und genau dort geraten sie aus dem Blick. Machen Sie den Alternativtext zum festen Schritt im Redaktionsprozess, sonst füllt ihn niemand. Jedes neue Produktbild ohne Alt-Text ist ein künftiger Fund im nächsten Scan.

Wann KI hilft und wann sie danebenliegt

KI-Bilderkennung ist gut in dem, was Menschen ermüdet: Sie erkennt zuverlässig Objekte, formuliert einen brauchbaren ersten Satz und schafft das für 500 Produktbilder genauso schnell wie für fünf. Für einen Shop mit gewachsenem Katalog ist das der Unterschied zwischen einem Wochenendprojekt und einem Quartalsprojekt.

Was KI nicht kann, ist der Kontext. Sie sieht das Foto, aber nicht die Seite: Sie weiß nicht, ob die Frau mit dem Headset Dekoration ist, die neue Support-Leiterin oder ein Link zum Formular. Genau diesen Kontextmangel kritisiert Aktion Mensch an generalisierten, vollautomatischen Werkzeugen, und die Kritik ist berechtigt. Sie trifft übrigens auch Overlays, die fehlende Alt-Texte zur Laufzeit automatisch erraten wollen.

Der ehrliche Arbeitsablauf hat deshalb drei Schritte, und der mittlere ist nicht optional:

1. KI-Entwurf erzeugen: Bild in den Alt-Text-Generator laden, Vorschlag erhalten. Das erledigt die Objekterkennung und die erste Formulierung.
2. Gegen den Seitenkontext prüfen: Warum steht das Bild auf dieser Seite? Ist es dekorativ, informativ oder verlinkt? Passt die Beschreibung zur Funktion? Diese Fragen beantwortet ein Mensch, kein Modell.
3. Anpassen und übernehmen: Funktion ergänzen, Überflüssiges streichen, erst dann einpflegen.

Das gilt ausdrücklich auch für unseren eigenen Generator. Er liefert Entwürfe, keine fertigen Alt-Texte, und wir verkaufen ihn bewusst nicht anders. Ein Tool, das verspricht, Alt-Texte vollautomatisch und ohne menschlichen Blick zu erledigen, verspricht etwas, das nach heutigem Stand der Technik nicht funktioniert.

Häufige Fragen zu Alt-Texten

Alt-Texte sind das seltene Barrierefreiheits-Thema, bei dem Aufwand und Wirkung in einem freundlichen Verhältnis stehen: Die Regeln passen auf eine Karteikarte, die Lücken sind schnell gefunden und schnell geschlossen. Lassen Sie Ihre Website einmal scannen, arbeiten Sie die Liste mit KI-Entwurf plus Kontext-Blick ab, und prüfen Sie bei PDF-Dokumenten gleich mit. Ihre Screenreader-Nutzer merken den Unterschied beim ersten Besuch.