Alt-Text

Der Alt-Text (Alternativtext) ist die textliche Entsprechung eines Bildes, hinterlegt im alt-Attribut des HTML-Elements <img>. Er wird von Screen-Readern vorgelesen, erscheint, wenn eine Grafik nicht geladen werden kann, und wird von Suchmaschinen ausgewertet. Er ist damit die einzige Stelle, an der ein Bild für Software überhaupt Bedeutung bekommt.

Der Alt-Text ist außerdem das erste Erfolgskriterium der Barrierefreiheitsnormen überhaupt: WCAG 2.1 und 2.2 führen ihn unter 1.1.1 „Nicht-Text-Inhalt" auf Konformitätsstufe A. Wer die niedrigste Stufe verfehlt, erfüllt weder AA noch die darauf aufbauenden gesetzlichen Anforderungen.

Was ein Alt-Text leisten muss

Die entscheidende Frage beim Schreiben ist nicht „Was ist auf dem Bild zu sehen?", sondern „Welche Information geht verloren, wenn das Bild fehlt?". Beides fällt nur bei rein illustrativen Fotos zusammen. Bei einem Button mit Lupensymbol ist die relevante Information nicht „Lupe", sondern „Suche öffnen".

Daraus folgt die praktisch wichtigste Unterscheidung, die das Images Tutorial der W3C Web Accessibility Initiative systematisch aufschlüsselt: Der richtige Alt-Text hängt von der Funktion des Bildes ab, nicht von seinem Motiv. Dasselbe Produktfoto braucht in der Galerie einen anderen Alternativtext als im Warenkorb-Thumbnail.

Die Bildtypen und ihre Behandlung

Ein Detail wird dabei regelmäßig falsch gemacht: Ein fehlendes alt-Attribut ist nicht dasselbe wie ein leeres. Fehlt das Attribut ganz, behandeln Screen-Reader das Bild als möglicherweise bedeutsam und lesen im Zweifel den Dateinamen vor, also „D S C unterstrich 0 4 7 1 Punkt J P G". Ein bewusst leeres alt="" weist die Software an, das Bild zu überspringen. Für dekorative Grafiken ist das leere Attribut die richtige Lösung, nicht die Auslassung.

Alt-Text und die Normen

Die Anforderung steht in den WCAG an zwei Stellen. Erfolgskriterium 1.1.1 Nicht-Text-Inhalt (Stufe A) verlangt für jeden Nicht-Text-Inhalt eine Alternative, die denselben Zweck erfüllt, und nennt ausdrücklich Sonderfälle: Bedienelemente beschreiben ihren Zweck, Tests und CAPTCHAs brauchen eine identifizierende Beschreibung und eine alternative Ausgabeform, rein dekorative Inhalte werden für assistive Technik unsichtbar gemacht. Erfolgskriterium 1.4.5 Bilder eines Textes (Stufe AA) geht einen Schritt weiter und verlangt, Text möglichst gar nicht erst als Grafik auszuliefern. Nachzulesen ist beides in den Web Content Accessibility Guidelines 2.2 des W3C.

Über die harmonisierte Norm EN 301 549 wandern diese Kriterien in den europäischen Rechtsrahmen und über das BFSG in die Pflichten deutscher B2C-Shops. Das macht den Alt-Text zu einem der wenigen Punkte, die zugleich rechtlich verbindlich, technisch trivial und in der Fläche unerledigt sind. Genau deshalb steht er in den Trefferlisten automatisierter Prüfwerkzeuge fast immer ganz oben: Fehlende Alternativtexte sind maschinell eindeutig feststellbar, anders als etwa die Frage, ob eine Fokusreihenfolge sinnvoll ist.

Realbeispiel: Produktbilder in Shopware 6

In Shopware 6 wird der Alternativtext am Medienobjekt gepflegt, nicht am Produkt. Im Administrationsbereich trägt jede Datei unter Inhalte → Medien die Felder Titel und Alternativtext; dieselben Felder erscheinen in der Produktpflege unter Kataloge → Produkte → Medien. Im Storefront-Template steht der Wert als media.alt zur Verfügung.

Der Unterschied in der Ausgabe lässt sich an einem konkreten Fall zeigen. Ein Shop führt einen Wanderschuh in fünf Farben, jede Variante mit eigenem Bild. Ohne gepflegte Alternativtexte hört ein Nutzer in der Galerie fünfmal hintereinander denselben Dateinamen oder, wenn ein Fallback greift, fünfmal denselben Produktnamen. Die Information, die den Wechsel überhaupt erst sinnvoll macht, nämlich die Farbe und die Perspektive, fehlt vollständig. Mit gepflegten Texten wird daraus „Wanderschuh Modell Trail, Farbe Graphit, Seitenansicht", „… Sohle von unten", „… Detailaufnahme Schnürung".

Ein Template-Fallback verhindert den schlimmsten Fall, ersetzt die Pflege aber nicht. Wer media.alt ?: product.translated.name setzt, sorgt dafür, dass nie ein Dateiname vorgelesen wird, produziert aber identische Alternativtexte für alle Bilder eines Produkts. Das ist ein Sicherheitsnetz, kein Zielzustand. Sinnvoll ist die Kombination: Fallback im Template, Pflegeregel für redaktionelle Arbeit, plus eine wiederkehrende Auswertung, wie viele Medienobjekte tatsächlich einen Alternativtext tragen.

Zwei Shopware-spezifische Fallstricke kommen hinzu. Erstens die Erlebniswelten: Bilder in CMS-Blöcken werden häufig über die Block-Konfiguration eingebunden, und der Alternativtext wird dort seltener gepflegt als bei Produktmedien. Zweitens die Icon-Sprites des Themes: Symbol-Buttons rendern als SVG, nicht als <img>. Ein alt-Attribut greift dort nicht; nötig sind ein <title>-Element im SVG oder ein aria-label am Button. Seit Shopware 6.7 liefert das Standard-Theme für die eigenen Symbol-Buttons entsprechende Beschriftungen mit, für eigene Icons gilt die Regel weiterhin selbst.

Alt-Text und SEO

Der Alternativtext ist einer der wenigen Hebel, die Barrierefreiheit und Sichtbarkeit gleichzeitig bedienen. Google beschreibt in der Dokumentation zu Google Bilder den Alt-Text als eine der Hauptquellen, um den Inhalt eines Bildes zu verstehen. Zwei Effekte sind dabei zu unterscheiden.

• Bildersuche. Für den E-Commerce ist die Bildersuche ein eigenständiger Einstiegskanal, besonders bei visuell geprägten Sortimenten wie Mode, Möbeln und Deko. Präzise Alternativtexte, sprechende Dateinamen und umgebender Text arbeiten hier zusammen.
• Verlinkte Bilder. Ist ein Bild in einen Link eingebettet und enthält der Link keinen Text, behandelt Google den Alt-Text als Ankertext. Bei Produktkacheln im Listing, die vollflächig verlinkt sind, ist das der Regelfall.

Daraus folgt kein Freibrief für Keyword-Stuffing. Aneinandergereihte Suchbegriffe verfehlen den Zweck des Attributs, sind für Nutzer mit Screen-Reader ärgerlich und gelten als Spam-Signal. Der brauchbare Alt-Text ist der, den ein Mensch am Telefon sagen würde, wenn er das Bild beschreibt: ein natürlicher Satzteil, in dem der relevante Begriff ohnehin vorkommt.

Typische Fehler

• „Bild von" oder „Grafik" als Einleitung. Screen-Reader kündigen den Elementtyp bereits selbst an. Die Doppelung kostet nur Zeit.
• Der Dateiname als Alt-Text. Häufig automatisch erzeugt durch Importe aus dem PIM oder aus Lieferantendaten.
• Dekoratives bekommt Text, Informatives nicht. Ein beschriebener Hintergrundverlauf und ein stummes Produktbild ist ein überraschend verbreitetes Muster.
• Größentabellen als Bild. Die klassische Falle im Modehandel. Eine Grafik mit zwölf Zeilen lässt sich nicht sinnvoll in einen Alternativtext packen; sie gehört als HTML-Tabelle in die Seite.
• Der title-Attribut-Irrtum. title erzeugt einen Maus-Tooltip und ersetzt kein alt. Auf Touchgeräten ist er praktisch unerreichbar.
• CSS-Hintergrundbilder mit Inhalt. Ein per background-image eingebundenes Banner hat kein alt. Trägt es Information, braucht es sichtbar ausgezeichneten Text.
• Fehlende Pflege im Nachschub. Der Erstbestand wird aufgeräumt, der nächste Sortimentsimport bringt wieder leere Felder. Ohne Prozess ist die Bereinigung eine Momentaufnahme.

Missverständnisse

„Alt-Texte dürfen maximal 125 Zeichen lang sein." Diese Zahl steht in keiner Spezifikation. Sie geht auf das Verhalten älterer JAWS-Versionen zurück, die längere Texte in Blöcken ausgaben. Weder HTML noch die WCAG nennen eine Obergrenze. Sinnvoll ist trotzdem Kürze: Wer mehr als zwei Sätze braucht, hat ein komplexes Bild vor sich und damit einen Fall für eine ausführliche Beschreibung im Fließtext.

„Automatisch generierte Beschreibungen erledigen das." Bilderkennung liefert brauchbare Rohentwürfe und kann bei großen Altbeständen den Einstieg beschleunigen. Sie kennt aber weder Variante noch Funktion noch Kontext: Ob ein Bild verlinkt ist, welche der fünf Farben gerade gezeigt wird, ob die Grafik eine Information trägt oder nur schmückt, ergibt sich nicht aus dem Pixelinhalt. Generierte Texte gehören in eine redaktionelle Prüfung, nicht direkt in die Datenbank.

„Ein leeres Alt-Attribut ist ein Fehler." Das Gegenteil ist der Fall. Für dekorative Bilder ist alt="" die vorgesehene und korrekte Auszeichnung. Prüfwerkzeuge melden es entsprechend nicht als Verstoß.

„Das Bild ist ja daneben beschrieben." Steht die Information tatsächlich wortgleich im umgebenden Text, ist das Bild dekorativ und bekommt alt="". Der Fehler entsteht, wenn diese Annahme stimmt, das Bild aber trotzdem eine Beschreibung erhält, oder wenn sie nicht stimmt und das Bild leer ausgezeichnet wird.

Vorgehen bei Bestandsshops

Bei gewachsenen Sortimenten ist die Vollabdeckung selten in einem Schritt zu erreichen. Eine Priorisierung nach Wirkung ist praktikabler als die alphabetische Abarbeitung des Medienpools. Zuerst die Bilder im Kaufpfad, also Produktdetailseite, Listing-Kacheln, Warenkorb und Checkout. Danach die funktionalen Grafiken, also Logo, Icon-Buttons, Zahlungs- und Versandsymbole, weil ein unbenannter Button gravierender ist als ein unbeschriebenes Stimmungsbild. Anschließend Kategorie- und Kampagnenseiten. Zuletzt Archiv- und Magazininhalte.

Parallel dazu gehört die Pflicht in den Prozess: ein Pflichtfeld im PIM, eine Freigaberegel in der Redaktion, ein automatisierter Test in der Ausspielung, der eine Seite mit fehlenden Alternativtexten markiert. Der Aufwand pro Bild liegt bei wenigen Sekunden, der Aufwand für die Nachbesserung eines Bestands von mehreren zehntausend Medienobjekten dagegen im Personentage-Bereich. Diese Asymmetrie ist das eigentliche Argument dafür, die Regel früh zu verankern.

FAQ

Wie lang sollte ein Alt-Text sein? So lang wie nötig, meist ein knapper Satzteil. Eine formale Obergrenze gibt es nicht. Reicht ein Satz nicht aus, ist eine ausführliche Beschreibung im Fließtext oder eine echte Tabelle der richtige Weg.

Brauchen dekorative Bilder einen Alt-Text? Nein, sie brauchen ein leeres alt="". Das Attribut wegzulassen ist der Fehler, nicht es leer zu lassen.

Was gilt für SVG-Icons? Inline-SVG kennt kein alt. Entweder das SVG erhält ein <title>-Element und wird per role="img" als Bild ausgezeichnet, oder das umgebende interaktive Element bekommt ein aria-label.

Zählt der Alt-Text als Ranking-Faktor? Er ist ein Verständnissignal für Bildinhalte und wirkt in der Bildersuche sowie als Ankertext bei verlinkten Bildern. Als isolierter Hebel für Rankings in der Websuche taugt er nicht.

Reicht es, Alt-Texte automatisiert zu erzeugen? Für einen ersten Aufschlag bei großen Altbeständen ja, als Endzustand nein. Funktion, Variante und Kontext eines Bildes stehen nicht im Bild.