Alternativtexte: was hineingehört und was nicht

Ein Screenreader liest vor, was im Quelltext steht. Bei einem Bild ohne Alternativtext bleibt ihm oft nur der Dateiname, und "I M G Unterstrich 4 4 7 1 Punkt J P G" bringt niemanden näher an den Esszimmerstuhl, den du verkaufen willst. Der Alternativtext ist die Textfassung eines Bildes. Er ersetzt das Bild, er beschriftet es nicht.

Wie oft er fehlt, haben wir selbst gemessen. Auf 16,7 Prozent der 14.984 geprüften Seiten fehlen Alternativtexte. Bei Shopware-Shops sind es 33 Prozent, also genau dort, wo Produktfotos den Kauf auslösen sollen. Jede sechste Seite im Durchschnitt, jede dritte im Shop, das ist kein Randthema. Die Ursache ist meistens banal: Produktbilder wandern per CSV-Import oder Lieferantenfeed ins System, das alt-Feld bleibt dabei leer, und danach öffnet niemand 800 Artikel einzeln nach.

Zwei Sorten Bilder, eine Frage

Deck das Bild in Gedanken mit einem grauen Rechteck ab und lies den Absatz drumherum noch einmal. Verlierst du dabei eine Information, die sonst nirgends im Text steht? Dann trägt das Bild Inhalt und braucht einen Alternativtext. Bleibt der Absatz vollständig verständlich, ist das Bild Dekoration und bekommt ein leeres alt-Attribut.

Die Regel hat eine Kante, die man kennen sollte. Dasselbe Foto kann an einer Stelle Inhalt tragen und an der nächsten reine Deko sein. Deine Werkstatt auf der Seite "Über uns" ist Stimmung. Dieselbe Werkstatt im Beitrag "So entsteht unsere Schublade" ist Beleg für das, was du im Text behauptest. Du entscheidest also nie über das Bild an sich, sondern über die Stelle, an der es steht.

Leer ist eine Antwort, fehlend ist eine Lücke

Viele halten alt="" für schlampig und lassen das Attribut lieber ganz weg. Genau umgekehrt wird ein Schuh draus. Ein leeres alt-Attribut ist eine ausdrückliche Ansage an die Vorlesesoftware, dass hier keine Information steckt und das Bild übersprungen werden kann. Der Screenreader tut das dann auch und stört den Lesefluss nicht.

Fehlt das Attribut dagegen komplett, weiß die Software nur, dass da ein Bild ist, und hat keine Ahnung, ob es zählt. Also improvisiert sie und liest den Dateinamen oder Teile der Bild-URL vor. Bei zwölf Deko-Grafiken auf einer Seite hörst du dann zwölf Mal Buchstabensalat. Das leere alt ist eine Entscheidung, das fehlende alt ist eine offene Frage.

Vier Bilder aus dem Alltag

Das Produktfoto

Mit alt="Stuhl" kauft niemand ein, obwohl das Feld gefüllt ist und jede Prüfsoftware zufrieden wäre. Trag stattdessen ein, was für die Kaufentscheidung zählt, also Modell, Material, Farbe und Form. Für das Hauptbild ergibt das alt="Esszimmerstuhl Nora, geölte Eiche, Sitzfläche mit anthrazitfarbenem Stoff". Was direkt daneben im Fließtext steht, kannst du weglassen. Zeigt ein zweites Foto denselben Stuhl von hinten, gehört genau dieser Unterschied hinein, etwa alt="Rückansicht, sichtbare Zapfenverbindung an der Lehne".

Das Logo in der Kopfzeile

Ein alt="Logo" beschreibt die Dateiart und nicht den Inhalt. Wenn das Logo wie üblich auf die Startseite verlinkt, ist es keine Abbildung mehr, sondern eine Schaltfläche, und dann gehört das Ziel hinein, etwa alt="Möbelwerkstatt Hartmann, zur Startseite". Die Bildmarke selbst brauchst du nicht zu beschreiben. Dass ein stilisierter Hobel neben dem Schriftzug sitzt, hilft beim Navigieren niemandem.

Das Balkendiagramm

Ein alt="Diagramm Umsatzentwicklung" ist eine Überschrift und keine Information. Ein Diagramm existiert wegen seiner Aussage, und die gehört in den Text, also etwa alt="Balkendiagramm: Umsatz steigt von 120.000 Euro (2023) über 180.000 Euro (2024) auf 260.000 Euro (2025)". Wird deine Zahlenreihe zu lang für einen Satz, schreib die Kernaussage ins alt und stell die vollständigen Werte als Aufzählung unter das Bild. Davon haben auch die Leute etwas, die das Diagramm sehen.

Das Stimmungsbild über dem Kontaktformular

Ein unscharfes Foto von lachenden Menschen am Schreibtisch steht dort zur Auflockerung. Hier schadet jede Beschreibung, auch eine gute. alt="Team lacht im Büro" zwingt jemanden, sich eine Information anzuhören, die er nicht braucht, während er eigentlich zum Formular will. Richtig ist an dieser Stelle alt="", damit die Vorlesesoftware weiterspringt.

So sieht das im Quelltext aus

<!-- vorher -->
<img src="/media/IMG_4471.jpg">
<img src="/media/logo.svg" alt="Logo">
<img src="/media/umsatz.png" alt="Diagramm">
<img src="/media/buero-blur.jpg" alt="buero-blur.jpg">

<!-- nachher -->
<img src="/media/IMG_4471.jpg"
     alt="Esszimmerstuhl Nora, geölte Eiche, Sitzfläche mit anthrazitfarbenem Stoff">
<img src="/media/logo.svg" alt="Möbelwerkstatt Hartmann, zur Startseite">
<img src="/media/umsatz.png"
     alt="Balkendiagramm: Umsatz steigt von 120.000 Euro (2023) über 180.000 Euro (2024) auf 260.000 Euro (2025)">
<img src="/media/buero-blur.jpg" alt="">

Beachte die letzte Zeile im Vorher-Block. alt="buero-blur.jpg" ist der häufigste Treffer in unseren Prüfungen, weil viele Redaktionssysteme den Dateinamen automatisch ins Feld schreiben. Ein Testwerkzeug sieht dort ein gefülltes Attribut und meldet nichts, im Ohr ist es trotzdem Müll.

Warum "Bild von" nur Zeit kostet

Screenreader kündigen ein Bild von sich aus als Grafik an, bevor sie den Alternativtext vorlesen. Schreibst du alt="Bild von einem Esszimmerstuhl", hört die Person "Grafik, Bild von einem Esszimmerstuhl". Dieselbe Information zweimal, und die eigentliche Beschreibung fängt erst nach drei überflüssigen Wörtern an. Streich also "Bild von", "Foto von", "Grafik" und "Abbildung" am Satzanfang. Bei fünfzig Produktfotos sparst du damit hundertfünfzig Wörter Vorlesezeit.

Halte dich außerdem an eine Länge, die man am Stück hören kann. Ein bis zwei Sätze reichen fast immer. Alles, was länger wird, gehört in den Fließtext, wo man vor- und zurückspringen kann.

Wenn Text im Bild steht

Rabattbanner, Preisschilder, Zitatkacheln für Instagram, PDF-Screenshots der Speisekarte: In all diesen Fällen steckt der eigentliche Inhalt als Pixel im Bild und ist damit für Vorlesesoftware, Suchmaschinen und die Übersetzungsfunktion des Browsers unsichtbar. Steht Text im Bild, gehört derselbe Text wörtlich und vollständig ins alt-Attribut.

Aus dem Banner mit "Sommeraktion, 20 Prozent auf alle Gartenmöbel" wird also genau dieser Satz im alt. Wenn das Banner zusätzlich verlinkt ist, hängst du das Ziel an, etwa "zur Aktionsseite". Und wo du die Wahl hast, bau den Text lieber gleich als echte Schrift über das Bild statt ihn hineinzurendern. Dann wächst er mit der eingestellten Schriftgröße mit, bleibt scharf und braucht kein Duplikat.

Der Test, der zwei Minuten dauert

Du brauchst dafür nichts außer dem Browser, den du gerade offen hast.

1. Öffne die Seite, die dir am meisten bringt, also die Startseite oder eine gut laufende Produktseite.
2. Drücke Strg und U, in Chrome und Firefox auf dem Mac Wahltaste, Cmd und U. Der Quelltext öffnet sich in einem neuen Tab.
3. Drücke Strg und F beziehungsweise Cmd und F und such nach <img. Der Browser zeigt dir die Trefferzahl an, das ist die Anzahl deiner Bilder im Quelltext.
4. Klick dich mit der Eingabetaste durch die Treffer und schau bei jedem nach, ob dort ein alt= steht. Wenn nicht, hast du eine Lücke gefunden.
5. Steht ein Dateiname im alt, etwa alt="DSC_0912.jpg", zählt das ebenfalls als Lücke.
6. Lies bei den gefüllten alt-Texten den Inhalt laut vor und denk dir das Bild dabei weg. Verstehst du die Stelle noch? Dann passt der Text.

Für eine typische Seite mit zwanzig Bildern dauert der Durchgang etwa neunzig Sekunden. Ein Sonderfall bleibt übrig, denn Bilder, die dein System erst per JavaScript nachlädt, stehen nicht im Quelltext. Die erwischst du, indem du im Browser mit der rechten Maustaste auf das Bild klickst und "Untersuchen" wählst.

Damit die Lücke nicht nachwächst

Der günstigste Zeitpunkt für einen Alternativtext ist der Upload. In WordPress liegt das Feld direkt neben dem Bild in der Mediathek, in Shopware im Medienmanager unter den Bilddetails, in Typo3 in den Dateimetadaten. Wer den Satz dort einmal schreibt, hat ihn überall, wo das Bild später auftaucht.

Für Bestände aus dem Import gilt ein anderer Weg. Zieh dir eine Liste deiner meistbesuchten Seiten aus der Statistik und arbeite die ersten zwanzig ab, bevor du an den langen Rest denkst. Ein Prüfwerkzeug findet die leeren Felder in Minuten. Was auf dem Foto zu sehen ist, weiß aber nur, wer das Produkt kennt, und das bist in aller Regel du.