Hören Sie den Unterschied
Bevor wir in die Theorie einsteigen, machen wir ein Experiment. Simulieren Sie, wie ein Screenreader (z.B. JAWS, NVDA oder VoiceOver) Ihre Bilder wahrnimmt. Klicken Sie auf die Karten, um den Unterschied zu hören. Stellen Sie sich vor, Sie sind blind und navigieren durch einen Online-Shop – was würden Sie verstehen?
"Grafik. IMG_8920.jpg..."
🔊 Klicken zum Abspielen"Roter Laufschuh Nike Air Max..."
🔊 Klicken zum Abspielen💡 Erkenntnis: Ohne Alt-Text hört ein blinder Nutzer nur „IMG_8920.jpg“ – keinerlei Information über das Produkt. Mit einem guten Alt-Text weiß er sofort: roter Nike Laufschuh, Seitenansicht. Der Unterschied zwischen einem Kauf und einem frustrierten Abbruch.
Was sind Alt-Texte und warum sind sie wichtig?
Alt-Texte (auch: Alternativtexte, Alt-Attribute oder Alt-Tags) sind kurze Textbeschreibungen, die im HTML-Code eines Bildes hinterlegt werden. Sie wurden bereits 1995 mit HTML 2.0 eingeführt und sind seitdem ein fundamentaler Bestandteil des Webs. Doch ihre Bedeutung hat sich über die Jahre dramatisch verändert – von einem netten Extra zu einer rechtlichen Pflicht und einem kritischen SEO-Faktor.
Die drei Säulen der Alt-Text-Relevanz
Weltweit leben über 285 Millionen Menschen mit Sehbehinderungen, davon etwa 39 Millionen vollständig blind. In Deutschland sind es rund 1,2 Millionen Menschen. Diese Nutzer verwenden Screenreader – Software wie JAWS, NVDA oder VoiceOver –, die den Bildschirminhalt vorlesen. Ohne Alt-Text bleibt ein Bild für sie komplett unsichtbar. Der Screenreader liest dann entweder gar nichts oder den Dateinamen vor – „IMG_8920.jpg“ ist keine hilfreiche Information.
Google kann Bilder nicht „sehen“ wie Menschen. Der Googlebot verlässt sich auf Alt-Texte, Dateinamen und umgebenden Text, um Bilder zu verstehen und zu indexieren. Studien zeigen: Über 22% des E-Commerce-Traffics stammen aus der Google Bildersuche. Bei visuell getriebenen Branchen wie Mode, Möbel oder Elektronik kann dieser Anteil noch höher sein. Jedes Produktbild ohne optimierten Alt-Text ist verschenktes Ranking-Potenzial.
Wenn ein Bild nicht lädt – sei es durch langsame Verbindung, Serverfehler oder Bildblocker – wird der Alt-Text angezeigt. So bleibt die Seite auch ohne Bilder verständlich und nutzbar. In Zeiten von Mobile-First und variablen Netzwerkqualitäten ist das wichtiger denn je. Außerdem hilft es Nutzern mit Datensparmodus, die Bilder bewusst deaktiviert haben.
Die Anatomie eines Alt-Textes
Der Alt-Text wird im HTML so eingefügt:
<img src="produkt.jpg" alt="Rote Sneaker von Nike, Modell Air Max 90, Seitenansicht">Das alt-Attribut ist ein Pflichtattribut für jedes <img>-Tag nach HTML5-Standard. Es gibt nur eine Ausnahme: Bei rein dekorativen Bildern darf (und soll) das Attribut leer sein – aber es muss trotzdem vorhanden sein:
<img src="dekoration.jpg" alt="">Viele Entwickler lassen das Alt-Attribut komplett weg: <img src="bild.jpg">. Das ist falsch! Ohne Attribut liest der Screenreader den Dateinamen vor. Mit leerem Attribut (alt="") ignoriert er das Bild komplett – das ist das gewünschte Verhalten bei Dekoration.
Warum dieser Guide?
Das Internet ist voll von Alt-Text-Ratgebern. Die meisten sind entweder zu oberflächlich („Beschreibe das Bild!“) oder zu technisch (W3C-Spezifikationen mit hunderten Seiten). Dieser Guide schließt die Lücke und richtet sich an vier Zielgruppen:
- Marketing-Manager: Verstehen Sie, warum Alt-Texte SEO UND Compliance gleichzeitig lösen – und wie Sie das Ihrem Chef verkaufen
- Entwickler: Konkrete Code-Snippets für ARIA, SVG, CSS-Backgrounds, Icon Fonts und komplexe Widgets
- Shop-Betreiber: 30+ Beispiele für Produktbilder, Kategorieseiten, Banner und Hero-Images
- Compliance-Beauftragte: Alles zu BFSG, EAA, ADA, WCAG 2.2 und den drohenden Strafen
Am Ende dieses Guides werden Sie nicht nur wissen, was ein guter Alt-Text ist, sondern auch warum er so ist – und wie Sie Tausende von Bildern effizient optimieren können.
Rechtliche Grundlagen: BFSG, EAA & ADA
Barrierefreiheit ist kein Trend und keine „nice to have“ Feature – sie ist gesetzliche Pflicht. Seit dem 28. Juni 2025 müssen Online-Shops in der EU barrierefrei sein. In den USA drohen Klagen mit durchschnittlich $25.000+ Vergleichskosten. Hier sind die wichtigsten Regelungen im Detail:
BFSG / European Accessibility Act (EAA)
Verbindlich seit 28. Juni 2025 in allen 27 EU-Staaten
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act (EAA), einer EU-Richtlinie aus dem Jahr 2019. Nach einer Übergangsfrist von sechs Jahren ist das Gesetz seit dem 28. Juni 2025 vollständig in Kraft und wird in allen 27 EU-Mitgliedstaaten durchgesetzt.
Das BFSG verpflichtet Unternehmen, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten. Technisch verweist es auf die europäische Norm EN 301 549, die wiederum auf den internationalen Standard WCAG 2.1 Level AA aufbaut. Für Bilder ist das Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt) relevant – genau das Thema dieses Guides.
Was genau fordert das Gesetz für Bilder?
WCAG 1.1.1 Level A ist eine der grundlegendsten Anforderungen: „Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem gleichwertigen Zweck dient.“ In der Praxis bedeutet das:
- Jedes informative Bild braucht einen beschreibenden Alt-Text
- Jedes funktionale Bild (Link, Button) braucht einen Alt-Text, der die Funktion beschreibt
- Dekorative Bilder brauchen ein leeres Alt-Attribut (
alt="") - Komplexe Bilder (Diagramme, Infografiken) brauchen erweiterte Beschreibungen
- • Online-Shops (B2C) – egal ob eigener Shop oder Marktplatz
- • Dienstleistungswebsites – Banken, Versicherungen, Telekommunikation
- • E-Books und E-Reader
- • Buchungs- und Check-in-Systeme im Verkehr
- • Bankautomaten und Selbstbedienungsterminals
- • Kleinstunternehmen – weniger als 10 Mitarbeiter UND weniger als 2 Mio. € Jahresumsatz (beide Kriterien müssen erfüllt sein)
- • Reine B2B-Plattformen – nur wenn ausschließlich Geschäftskunden
- • Unverhältnismäßige Belastung – muss im Einzelfall nachgewiesen werden
Zusätzliche Risiken:
• Wettbewerbsrechtliche Abmahnungen: Konkurrenten können abmahnen – typisch 3.000-5.000 € pro Fall plus Anwaltskosten
• Grenzüberschreitende Durchsetzung: EU-weite Marktüberwachung ermöglicht Beschwerden aus anderen Ländern
• Wiederholungstäter: Bei wiederholten Verstößen drohen höhere Strafen und Verkaufsverbote
Americans with Disabilities Act (ADA)
Seit 1990 in Kraft – gilt auch für internationale Unternehmen
Der Americans with Disabilities Act (ADA) ist das US-amerikanische Pendant zum EAA – allerdings ist er bereits seit 1990 in Kraft. Ursprünglich für physische Barrierefreiheit (Rampen, Aufzüge) konzipiert, haben US-Gerichte den ADA konsequent auf Websites ausgedehnt. Der Durchbruch kam 2017 mit dem Fall Gil v. Winn-Dixie, seitdem ist klar: Websites gelten als „Orte der öffentlichen Unterbringung“ (places of public accommodation).
Wichtig für deutsche Unternehmen: Der ADA gilt auch für ausländische Unternehmen, die Produkte oder Dienstleistungen an US-Kunden verkaufen. Wenn Ihr Shop in den USA erreichbar ist und US-Kunden bedient, sind Sie potenziell haftbar.
Ein mittelständischer deutscher Online-Shop für Designer-Möbel verkauft auch in die USA. Im Frühjahr 2024 erhält er eine „Demand Letter“ (Abmahnung) von einer spezialisierten US-Kanzlei. Der Vorwurf: 3.200 Produktbilder ohne Alt-Text, dazu fehlerhafte Formularbeschriftungen und mangelnde Tastaturnavigation.
Der Shop entscheidet sich für den Vergleich und optimiert anschließend alle Bilder mit AutoAlt.ai – Gesamtkosten der Optimierung: ca. 800 €. Hätte er das vorher gemacht, wäre ihm der gesamte Ärger erspart geblieben.
In den USA haben sich spezialisierte Anwaltskanzleien – sogenannte „ADA Mills“ oder „Serial Filers“ – auf Barrierefreiheitsklagen spezialisiert. Sie scannen systematisch Websites nach Verstößen und verschicken massenhaft Abmahnungen. Die Top-10-Kläger waren 2024 für über 30% aller ADA-Klagen verantwortlich. Für sie ist es ein Geschäftsmodell – für Shopbetreiber ein teures Problem.
WCAG 2.2 – Der technische Standard im Detail
Veröffentlicht Oktober 2023 – der Maßstab für Compliance
Die Web Content Accessibility Guidelines (WCAG) werden vom World Wide Web Consortium (W3C) entwickelt und sind der weltweit anerkannte technische Standard für digitale Barrierefreiheit. Sowohl das europäische BFSG/EAA als auch der amerikanische ADA referenzieren WCAG als Maßstab.
WCAG 1.1.1 – Nicht-Text-Inhalt (Level A): „Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem gleichwertigen Zweck dient, mit Ausnahme der unten aufgelisteten Situationen.“
Die 7 Bildkategorien nach WCAG
WCAG unterscheidet sieben Arten von Nicht-Text-Inhalten, die jeweils unterschiedliche Behandlung erfordern:
1. Informative Bilder
Vermitteln Informationen → beschreibender Alt-Text
2. Dekorative Bilder
Rein visuell → leeres alt=""
3. Funktionale Bilder
Links/Buttons → Funktion beschreiben
4. Bilder von Text
Text als Grafik → vollständigen Text wiedergeben
5. Komplexe Bilder
Diagramme → Kurztext + Langbeschreibung
6. Bildgruppen
Mehrere = 1 Info → ein Bild beschreiben, Rest leer
7. Imagemaps
Klickbare Bereiche → jeder Bereich braucht eigenen Alt-Text
💡 Gut zu wissen: WCAG 2.2 (Oktober 2023) hat neue Kriterien eingeführt (z.B. 2.4.11 Focus Not Obscured, 3.3.7 Redundant Entry), aber das Kriterium 1.1.1 für Bilder ist unverändert geblieben. Wenn Ihre Alt-Texte WCAG 2.1 AA erfüllen, erfüllen sie auch WCAG 2.2.
Die 7 Bildtypen nach WCAG – im Detail
Das W3C unterscheidet 7 Bildkategorien – jede erfordert einen anderen Alt-Text-Ansatz. Der erste Schritt ist immer: Welcher Typ ist mein Bild? Nutzen Sie den folgenden Entscheidungsbaum:
🎯 Der 3-Sekunden-Entscheider
Hintergründe, Trennlinien, visuelle Effekte, Schmuckelemente
Leeres Attribut = Screenreader ignoriert
Klickbare Icons, Logo-Links, Social Buttons, Thumbnails
Beschreibe WAS passiert, nicht WIE es aussieht
Produktfotos, Illustrationen, Portraits, Screenshots
Beschreibe WAS zu sehen ist + WARUM relevant
Informative Bilder
Definition: Informative Bilder vermitteln Informationen, die im umgebenden Text nicht (vollständig) enthalten sind. Sie sind der häufigste Bildtyp in Online-Shops und auf Content-Seiten.
Die goldene Regel: Beschreiben Sie, WAS auf dem Bild zu sehen ist und WARUM es im Kontext relevant ist. Stellen Sie sich vor, Sie beschreiben das Bild jemandem am Telefon.
Beispiele nach Kontext:
📦 Produktbild im E-Commerce:
❌ Schlecht
alt="Schuh"
Zu unspezifisch – welcher Schuh?
✅ Gut
alt="Roter Nike Air Max Laufschuh für Herren, Seitenansicht"
Farbe + Marke + Modell + Zielgruppe + Perspektive
📰 Nachrichtenbild:
❌ Schlecht
alt="Bundeskanzler"
Welcher Bundeskanzler? Was tut er?
✅ Gut
alt="Bundeskanzler Scholz spricht bei Pressekonferenz im Kanzleramt, Juni 2025"
Person + Aktion + Ort + Zeit
👤 Teamportrait:
❌ Schlecht
alt="Foto"
Völlig nichtssagend
✅ Gut
alt="Maria Schmidt, Head of Marketing, lächelnd im Büro"
Name + Rolle + Beschreibung
💡 Optimale Länge: 50-150 Zeichen. Kurz genug, um nicht zu nerven (Screenreader lesen alles am Stück), lang genug, um aussagekräftig zu sein. Bei komplexeren Bildern: kurzer Alt-Text + ausführliche Beschreibung im Fließtext.
Dekorative Bilder
Definition: Dekorative Bilder sind rein visuell und tragen keine inhaltliche Information bei. Sie sind „Augen-Zucker“ – angenehm anzusehen, aber für das Verständnis der Seite nicht notwendig.
Die goldene Regel: Dekorative Bilder MÜSSEN ein leeres Alt-Attribut haben: alt="". Damit weiß der Screenreader, dass er das Bild ignorieren soll.
Typische dekorative Bilder:
- Hintergrundmuster und Texturen
- Trennlinien und visuelle Abgrenzer
- Dekorative Icons neben Text (wenn der Text die Info enthält)
- Stimmungsbilder ohne inhaltlichen Bezug
- Schatteneffekte und visuelle Verzierungen
Der häufigste Fehler: Das Alt-Attribut komplett weglassen. Das ist nicht dasselbe wie ein leeres Attribut!
❌ <img src="deko.jpg">
Screenreader liest: "Grafik. deko.jpg"
Nutzer hört sinnlosen Dateinamen – verwirrend!
✅ <img src="deko.jpg" alt="">
Screenreader: (ignoriert das Bild komplett)
Nutzer wird nicht gestört – perfekt!
🤔 Faustregel: Stellen Sie sich vor, Sie entfernen das Bild komplett. Wenn die Seite danach denselben Informationsgehalt hat und genauso verständlich ist → das Bild ist dekorativ. Wenn etwas fehlt → es ist informativ und braucht einen Alt-Text.
Funktionale Bilder
Definition: Funktionale Bilder lösen eine Aktion aus – sie sind Links, Buttons oder andere klickbare Elemente. Das Bild selbst ist der interaktive Auslöser.
Die goldene Regel: Beschreiben Sie die FUNKTION oder das ZIEL, nicht das Aussehen! Ein blinder Nutzer muss wissen, was passiert, wenn er klickt – nicht, wie das Icon aussieht.
🔍 Such-Icon:
❌ alt="Lupe"
Beschreibt nur das Aussehen
✅ alt="Suche"
Beschreibt die Funktion
🏠 Logo als Startseiten-Link:
❌ alt="Logo"
Sagt nicht, wohin der Link führt
✅ alt="AutoAlt.ai – Zur Startseite"
Marke + Ziel des Links
📱 Social Media Icons:
❌ alt="Blaues F"
Beschreibt nur das Icon
✅ alt="AutoAlt.ai auf Facebook"
Marke + Plattform = Ziel
🛒 Warenkorb-Icon:
❌ alt="Einkaufswagen"
Beschreibt nur das Symbol
✅ alt="Warenkorb (3 Artikel)"
Funktion + dynamische Info
💡 Sonderfall: Bild + Text im gleichen Link
Wenn ein Link sowohl ein Bild als auch Text enthält, kann das Bild oft alt="" bekommen – der Text beschreibt ja bereits das Ziel. Beispiel:
<a href="/kontakt">
<img src="mail-icon.png" alt="">
Kontakt
</a>Bilder von Text
Definition: Bilder, die Text als Grafik darstellen – typischerweise Logos, Banner mit Textbotschaften, typografische Elemente oder Screenshots von Text.
Die goldene Regel: Der Alt-Text muss den KOMPLETTEN sichtbaren Text enthalten. Wenn das Bild „SALE -50%“ zeigt, muss der Alt-Text genau das sagen.
Warum sind Text-Bilder problematisch?
WCAG empfiehlt, Text-Bilder zu vermeiden, wann immer möglich. Echter HTML-Text mit CSS-Styling hat mehrere Vorteile:
- Skalierbar: Nutzer können die Schriftgröße anpassen
- Kopierbar: Text kann markiert und kopiert werden
- Übersetzbar: Browser-Übersetzung funktioniert
- Schneller: Weniger Daten zu laden
- Responsiv: Passt sich automatisch an
🏷️ Beispiel: Sale-Banner
Das Bild zeigt: "SALE -50% auf alles!"
❌ alt="Sale Banner"
alt="SALE -50% auf alles!"
✅ Der eigentliche Text fehlt!
Exakt der sichtbare Text
🎨 Beispiel: Logo mit Firmenname
Das Logo zeigt: "AutoAlt.ai" mit Untertitel "KI Alt-Text Generator"
❌ alt="Logo"
alt="AutoAlt.ai – KI Alt-Text Generator"
✅ Markenname fehlt komplett
Vollständiger sichtbarer Text
💡 Tipp: Prüfen Sie bei jedem Text-Bild: Könnte ich das als echten HTML-Text mit CSS umsetzen? Oft ist das mit modernem CSS (Webfonts, Flexbox, Animationen) möglich und besser für alle Nutzer.
Komplexe Bilder
Definition: Komplexe Bilder enthalten Informationen, die sich nicht in 125 Zeichen zusammenfassen lassen – typischerweise Diagramme, Infografiken, Karten, Organigramme oder technische Zeichnungen.
Die Lösung: Eine Kombination aus kurzem Alt-Text und ausführlicher Beschreibung an anderer Stelle.
Drei Methoden für komplexe Bilder:
Methode 1: Beschreibung im Fließtext
Der Alt-Text verweist auf die Beschreibung darunter:
<img src="chart.png"
alt="Balkendiagramm: Umsatzentwicklung 2020-2024. Beschreibung folgt.">
<p>Das Diagramm zeigt den Umsatz von 1,2 Mio. € (2020)
bis 3,8 Mio. € (2024), ein Wachstum von 217%.</p>Methode 2: Daten in einer Tabelle
Ideal für Diagramme mit konkreten Zahlen:
<img src="chart.png"
alt="Balkendiagramm: Umsatzentwicklung. Details in Tabelle unten.">
<table>
<tr><th>Jahr</th><th>Umsatz</th></tr>
<tr><td>2020</td><td>1,2 Mio. €</td></tr>
<tr><td>2024</td><td>3,8 Mio. €</td></tr>
</table>Methode 3: aria-describedby
Technisch sauberste Lösung mit ARIA:
<img src="chart.png"
alt="Balkendiagramm: Umsatzentwicklung 2020-2024"
aria-describedby="chart-desc">
<div id="chart-desc" class="sr-only">
Das Diagramm zeigt fünf Balken für die Jahre 2020 bis 2024.
Der Umsatz stieg von 1,2 Millionen Euro im Jahr 2020 auf
3,8 Millionen Euro im Jahr 2024...
</div>💡 Alt-Text-Formel für komplexe Bilder:
[Bildtyp] + [Thema/Titel] + [Verweis auf Details]
Beispiel: „Kreisdiagramm: Marktanteile der Browser 2024. Details in der Tabelle darunter.“
SEO vs. Barrierefreiheit: Der Mythos vom Keyword-Stuffing
Seit Jahren predigen SEO-Agenturen: „Packe deine Keywords in den Alt-Tag!“. Das führt zu Alt-Texten wie: „Laufschuh billig kaufen Nike Adidas Puma bester Preis Online-Shop“. Das ist nicht nur für Screenreader-Nutzer eine Qual – es ist auch schlecht für SEO.
Warum Keyword-Stuffing in Alt-Texten schadet
Google ist längst klüger als primitive Keyword-Zählung. Der Algorithmus erkennt unnatürliche Texte und wertet sie als Spam-Signal. Schlimmer noch: Übermäßig optimierte Alt-Texte können zu einer manuellen Abstrafung führen. Und für Screenreader-Nutzer ist es schlicht unbenutzbar – sie hören einen sinnlosen Wortbrei statt einer hilfreichen Beschreibung.
alt="iPhone 15 Hülle case cover kaufen billig handyhülle günstig online shop beste qualität"
alt="Schwarze Lederhülle für iPhone 15 Pro mit Kartenfach, Seitenansicht"
Die Wahrheit: Gute Alt-Texte sind automatisch SEO-freundlich
Wenn Sie ein Bild natürlich und präzise beschreiben, sind die relevanten Keywords automatisch enthalten. „Roter Nike Air Max Laufschuh für Herren, Seitenansicht“ enthält: „rot“, „Nike“, „Air Max“, „Laufschuh“, „Herren“ – ohne Spam. Google versteht den Kontext, der Screenreader-Nutzer versteht das Produkt, und WCAG ist erfüllt. Win-Win-Win.
💡 Die Formel für SEO-freundliche, barrierefreie Alt-Texte:
Beschreibe das Bild so, wie du es einem Freund am Telefon beschreiben würdest. Natürlich, präzise, ohne Wiederholungen. Die Keywords kommen von selbst.
Was Google wirklich über Alt-Texte sagt
John Mueller, Googles Search Advocate, hat es mehrfach klargestellt: „Alt text should be useful for users who can’t see the image. That’s the primary purpose. If it’s useful for accessibility, it will also be useful for search.“ Google optimiert für Nutzer – und Barrierefreiheit ist Nutzerfreundlichkeit.
„The best SEO alt text is one that accurately describes the image in a way that’s helpful for someone who can’t see it. Don’t stuff keywords. Don’t over-optimize. Just describe the image.“ – John Mueller, Google
E-Commerce Best Practices: 30+ Beispiele
Produktbilder sind der Hauptgrund, warum Kunden kaufen. Und über 22% des E-Commerce-Traffics kommen aus der Google Bildersuche. Hier sind konkrete Formeln und Beispiele für jede Branche:
🎯 Die universelle Alt-Text-Formel für Produktbilder:
Diese Formel funktioniert für 90% aller Produktbilder. Sie enthält natürlich die wichtigsten Suchbegriffe und ist gleichzeitig eine klare Beschreibung für Screenreader-Nutzer.
Beispiele nach Branche:
alt="Blaues Herren-Poloshirt von Lacoste, klassischer Schnitt, Frontalansicht"
alt="Schwarze Leder-Sneaker Nike Air Force 1 Low, Seitenansicht"
alt="Rote Abendtasche mit Goldkette von Michael Kors, Detailansicht Verschluss"
alt="Beige Trenchcoat für Damen von Burberry, Ganzkörperansicht am Model"
alt="Apple iPhone 15 Pro in Titan Schwarz, 256GB, Rückseite mit Kamera"
alt="Sony WH-1000XM5 Kopfhörer in Silber, zusammengeklappt mit Transportetui"
alt="Samsung 65 Zoll OLED TV auf Standfuß, Frontalansicht mit Naturmotiv"
alt="MacBook Pro 16 Zoll M3 Max, geöffnet auf Schreibtisch, zeigt macOS Desktop"
alt="Graues 3-Sitzer-Sofa IKEA Söderhamn mit Stoffbezug, Frontalansicht im Wohnzimmer"
alt="Esstisch aus massiver Eiche mit 6 schwarzen Stühlen, Draufsicht"
alt="Weiße Vitrine im Landhausstil mit Glastüren, Detailansicht Griffe"
alt="Ergonomischer Bürostuhl von Herman Miller in Schwarz, Seitenansicht Mechanik"
alt="Chanel No. 5 Eau de Parfum 100ml Flakon mit goldenem Verschluss"
alt="Roter Lippenstift MAC Ruby Woo, geöffnet mit sichtbarer Farbe"
alt="Anti-Aging Serum von La Mer, 30ml Pipettenflasche, Produktfoto"
alt="Lidschattenpalette Urban Decay Naked 3, geöffnet mit 12 Rosétönen"
alt="Bio-Olivenöl extra vergine 500ml in dunkelgrüner Glasflasche"
alt="Handgemachte Schokoladentrüffel in Geschenkbox, 12 Stück sortiert"
alt="Espresso-Kaffeebohnen von Lavazza, 1kg Packung, Arabica-Blend"
alt="Craft Beer IPA von BrewDog Punk, 330ml Dose, bernsteinfarbenes Bier"
alt="Yoga-Matte in Lavendel, 6mm dick, rutschfest, aufgerollt"
alt="Trekking-Rucksack Deuter 40L in Blau-Grau, Frontalansicht mit Fächern"
alt="Herren-Laufschuhe Asics Gel-Kayano 30, neongelb, Seitenansicht"
alt="Camping-Zelt für 4 Personen, aufgebaut in grüner Natur, Eingang offen"
alt="Produkt"
Zu generisch – welches Produkt?
alt="SKU-12345-BLK-XL"
Interne Codes sind für Nutzer nutzlos
alt="Bild von Schuh"
"Bild von" ist redundant – Screenreader sagt bereits "Grafik"
alt="Schuh kaufen billig günstig online shop"
Keyword-Stuffing = Spam
alt="DSC_0001.jpg"
Dateinamen sind keine Beschreibungen
(kein alt-Attribut)
Screenreader liest dann den Dateinamen
Spezialfälle im E-Commerce:
Bei Galerien mit mehreren Bildern desselben Produkts: Jedes Bild beschreibt die spezifische Ansicht.
alt="Nike Air Max 270, Seitenansicht links"
alt="Nike Air Max 270, Sohle von unten"
alt="Nike Air Max 270, Detailansicht Fersenpolster"
Kleine Farb-Thumbnails in der Produktauswahl brauchen die Farbe im Alt-Text:
alt="Farbe auswählen: Rot"
alt="Farbe auswählen: Blau"
alt="Farbe auswählen: Schwarz (ausgewählt)"
Sterne-Bilder für Bewertungen müssen die tatsächliche Bewertung kommunizieren:
alt="Bewertung: 4 von 5 Sternen"
Developer Cheat Sheet: ARIA, SVG & mehr
Für Frontend-Entwickler gibt es mehr als nur alt="". Moderne Websites nutzen SVGs, Icon Fonts, CSS-Backgrounds und komplexe Widgets. Hier sind die Techniken für jeden Fall:
SVGs haben kein alt-Attribut. Nutzen Sie role="img" und aria-label oder ein <title>-Element:
<svg role="img" aria-label="Suche">
<title>Suche</title>
<path d="..."></path>
</svg>Für dekorative SVGs: aria-hidden="true"
CSS-Hintergrundbilder sind für Screenreader unsichtbar. Wenn das Bild Information trägt, nutzen Sie ARIA:
<div
role="img"
aria-label="Teamfoto unserer 12 Mitarbeiter"
class="hero-background">
</div>Für rein dekorative Hintergründe: nichts tun (Standard)
Icon Fonts werden oft als Buchstaben vorgelesen. Verstecken Sie sie mit aria-hidden:
<!-- Mit sichtbarem Text -->
<button>
<i class="fa fa-search" aria-hidden="true"></i>
Suche
</button>
<!-- Nur Icon -->
<button aria-label="Suche">
<i class="fa fa-search" aria-hidden="true"></i>
</button>Ein Alt-Text gilt für alle srcset-Varianten – es ist dasselbe Bild in verschiedenen Größen:
<img
srcset="shoe-400.jpg 400w,
shoe-800.jpg 800w,
shoe-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="shoe-800.jpg"
alt="Roter Nike Air Max, Seitenansicht">Bei unterschiedlichen Bildausschnitten für verschiedene Viewports gehört der Alt-Text zum <img>:
<picture>
<source media="(min-width: 800px)"
srcset="hero-wide.jpg">
<source media="(min-width: 400px)"
srcset="hero-medium.jpg">
<img src="hero-small.jpg"
alt="Berglandschaft bei Sonnenaufgang">
</picture>Bei Bildern mit Bildunterschrift: Alt-Text + Figcaption ergänzen sich:
<figure>
<img src="team.jpg"
alt="Unser 12-köpfiges Team vor dem Bürogebäude">
<figcaption>
Das AutoAlt.ai-Team beim Sommerfest 2024
</figcaption>
</figure>Alt-Text beschreibt WAS zu sehen ist, Figcaption gibt Kontext.
Nutzen Sie native HTML-Elemente, wann immer möglich. ARIA ist der Fallback für Fälle, in denen HTML nicht ausreicht. Ein <button> braucht kein role="button".
Häufige Patterns:
<a href="/produkt/nike-air-max">
<img src="shoe.jpg"
alt="Nike Air Max 270 in Rot – Produktdetails anzeigen">
</a>Alt-Text enthält Produktname UND Linkziel.
<button type="submit">
<img src="cart-icon.png" alt="In den Warenkorb">
</button>
<!-- Oder besser mit SVG: -->
<button type="submit" aria-label="In den Warenkorb">
<svg aria-hidden="true">...</svg>
</button><img src="chart.png"
alt="Umsatzentwicklung 2020-2024 als Balkendiagramm"
aria-describedby="chart-description">
<div id="chart-description" class="sr-only">
Das Diagramm zeigt den jährlichen Umsatz:
2020: 1,2 Mio €, 2021: 1,8 Mio €, 2022: 2,4 Mio €,
2023: 3,1 Mio €, 2024: 3,8 Mio €.
Durchschnittliches Wachstum: 33% pro Jahr.
</div>.sr-only = visuell versteckt, aber für Screenreader zugänglich.
Tools & Testing: So prüfen Sie Ihre Alt-Texte
Theorie ist gut, aber Sie müssen Ihre Website auch testen. Hier sind die besten Tools – von kostenlos bis Enterprise:
Kostenlos und sofort verfügbar:
- • Chrome: F12 → Lighthouse → Accessibility
- • Firefox: F12 → Accessibility Tab
- • Edge: F12 → Issues → Accessibility
Findet fehlende Alt-Attribute automatisch.
Der ultimative Test – hören Sie selbst:
- • NVDA (Windows, kostenlos)
- • VoiceOver (Mac/iOS, eingebaut)
- • JAWS (Windows, kommerziell)
- • TalkBack (Android, eingebaut)
Tipp: Schließen Sie die Augen und navigieren Sie nur mit Tastatur.
Für große Websites und Shops:
- • WAVE (wave.webaim.org) – kostenlos
- • axe DevTools – Browser-Extension
- • Siteimprove – Enterprise
- • AutoAlt.ai Bulk Scan – KI-gestützt
AutoAlt.ai generiert auch gleich die Alt-Texte.
💡 Testing-Strategie:
1. Automatisiert scannen (WAVE/axe) für schnelle Übersicht → 2. Stichproben mit Screenreader für Qualitätscheck → 3. Regelmäßige Audits bei Content-Updates
Wissenstest: Haben Sie aufgepasst?
Fragen:
Ein Bild dient als Button für die Suchfunktion (Lupe-Icon). Welcher Alt-Text ist korrekt?
Die ultimative Alt-Text-Checkliste
Klicken Sie die Punkte an, um sie abzuhaken. Nutzen Sie diese Liste bei jedem Content-Update:
Keine Lust auf manuelle Arbeit?
Lassen Sie unsere KI Ihren gesamten Shop in Minuten scannen und Alt-Texte generieren.
Häufige Fragen (FAQ)
Es gibt keine harte technische Grenze im HTML-Standard, aber praktische Grenzen existieren: Screenreader „atmen“ nicht – sie lesen den gesamten Alt-Text am Stück vor. Bei sehr langen Texten verlieren Nutzer den Faden. Die Empfehlung liegt bei 50 bis 150 Zeichen für normale Bilder. Bei komplexen Bildern (Diagramme, Infografiken) nutzen Sie einen kurzen Alt-Text von ca. 125 Zeichen plus eine ausführliche Beschreibung im Fließtext oder via aria-describedby.
Ja, und zwar sehr gut! Moderne KI-Modelle wie die von AutoAlt.ai nutzen Computer Vision, um Bildinhalte zu erkennen: Objekte, Farben, Text im Bild, Personen und mehr. Die KI generiert dann WCAG-konforme, SEO-optimierte Alt-Texte in über 25 Sprachen. Das spart bei großen Katalogen hunderte Stunden manueller Arbeit. Die Qualität ist heute vergleichbar mit manuell geschriebenen Texten – oft sogar konsistenter, weil die KI keine „schlechten Tage“ hat.
Nein, niemals! Wenn das Alt-Attribut komplett fehlt (<img src="bild.jpg">), liest der Screenreader den Dateinamen vor – „IMG_8920.jpg“ ist keine hilfreiche Information. Bei dekorativen Bildern muss das Attribut leer sein: alt="". Das signalisiert dem Screenreader explizit: „Ignoriere dieses Bild, es ist nicht relevant.“ Leeres Attribut ≠ fehlendes Attribut!
Alt ist für Screenreader und wird vorgelesen – es ist Pflicht für Barrierefreiheit. Title ist ein Tooltip, der beim Hover mit der Maus erscheint – es ist optional und nicht barrierefrei, da Tastaturnutzer und Touchscreen-Nutzer ihn nicht sehen können. Nutzen Sie Title niemals als Ersatz für Alt! Das Title-Attribut kann zusätzliche Informationen liefern, aber nur als Ergänzung, nicht als Ersatz.
Nein. Für normale <img>-Tags reicht das alt-Attribut vollkommen aus – das ist der native, semantisch korrekte Weg. ARIA (Accessible Rich Internet Applications) ist für Fälle gedacht, in denen HTML nicht ausreicht: SVGs ohne natives Alt, CSS-Hintergrundbilder mit Inhalt, Icon Fonts, oder komplexe Widgets. Grundregel: „No ARIA is better than bad ARIA“ – nutzen Sie ARIA nur, wenn Sie es wirklich brauchen.
Eine Kombination aus automatisierten und manuellen Tests ist ideal:
- Automatisierter Scan: WAVE (wave.webaim.org), axe DevTools oder Chrome Lighthouse finden fehlende Alt-Attribute schnell
- Screenreader-Test: Installieren Sie NVDA (kostenlos) oder nutzen Sie VoiceOver (Mac). Navigieren Sie mit geschlossenen Augen durch Ihre Seite
- Stichproben: Prüfen Sie, ob die Alt-Texte das Bild wirklich beschreiben oder nur generisch sind
- Regelmäßige Audits: Bei jedem Content-Update die neuen Bilder prüfen
Die Deadline war der 28. Juni 2025 – wir sind also bereits im „Enforcement“-Modus. Mögliche Konsequenzen:
- Bußgelder: Bis zu 100.000 € in Deutschland, je nach Bundesland und Schwere
- Abmahnungen: Wettbewerber können abmahnen – typisch 3.000-5.000 € pro Fall
- Verkaufsverbote: Bei schweren Verstößen können Produkte vom Markt genommen werden
- Reputationsschaden: Öffentliche Beschwerden schaden dem Markenimage
Mit AutoAlt.ai können Sie auch große Kataloge schnell compliant machen – oft innerhalb weniger Stunden.
Unbegrenzt. Wir haben Kunden mit über 100.000 Produktbildern. Der Bulk-Scan läuft im Hintergrund auf unseren Servern – Sie können die Seite schließen und bekommen eine E-Mail, wenn er fertig ist. Typische Verarbeitungszeit: 2-3 Sekunden pro Bild. Ein Katalog mit 10.000 Bildern ist in etwa 6-8 Stunden fertig. Bei Eile bieten wir Priority Processing mit schnellerer Verarbeitung.
„Schuh kaufen billig günstig online shop Nike Adidas“ ist Spam und wird von Google bestraft. Beschreiben Sie natürlich: „Roter Nike Air Max Laufschuh“.
„Produktbild“ für 500 Bilder ist nicht hilfreich. Jedes Bild braucht eine individuelle, spezifische Beschreibung.
Hintergründe, Trennlinien und Schmuckelemente brauchen alt="" (leer), nicht eine Beschreibung. Sonst nerven Sie Screenreader-Nutzer.
„Lupe“ sagt nicht, was passiert. „Suche“ schon. Bei funktionalen Bildern beschreiben Sie die Aktion, nicht das Aussehen.
Screenreader lesen alles am Stück. Ein 500-Zeichen-Alt-Text ist eine Qual. Halten Sie sich an 50-150 Zeichen, bei komplexen Bildern nutzen Sie Langbeschreibungen separat.
Derselbe Schuh braucht auf der Produktseite einen anderen Alt-Text als in einem Blogartikel über Lauftraining. Der Kontext bestimmt, welche Details relevant sind.
Alt-Texte sind kein Einmal-Projekt. Jedes neue Bild braucht einen Alt-Text. Integrieren Sie die Prüfung in Ihren Content-Workflow – oder automatisieren Sie mit AutoAlt.ai.
Die Zukunft von Alt-Texten: KI, WCAG 3.0 und Visual Search
Alt-Texte sind kein statisches Thema. Drei große Entwicklungen werden die nächsten Jahre prägen:
KI-generierte Alt-Texte werden Standard
Die Qualität von Computer Vision hat einen Wendepunkt erreicht. Moderne Modelle wie GPT-4 Vision, Claude 3 und Gemini können Bilder nicht nur erkennen, sondern verstehen: Kontext, Stimmung, Marken, Details. Die KI-generierten Alt-Texte sind heute oft besser als hastig manuell geschriebene.
Der Trend geht klar zur Automatisierung: Alt-Texte werden beim Upload generiert, beim CMS-Import ergänzt, per API in Echtzeit erstellt. Manuelle Alt-Text-Pflege wird zum Auslaufmodell – zumindest für die Masse. Für besonders wichtige Bilder (Hero Images, Kampagnen) bleibt die menschliche Feinabstimmung relevant.
Prognose 2027: 80% aller E-Commerce-Alt-Texte werden KI-gestützt erstellt oder geprüft werden.
WCAG 3.0 bringt neue Bewertungsmethoden
WCAG 3.0 (noch in Entwicklung) wird das Bewertungsmodell grundlegend ändern. Statt „Bestanden/Nicht bestanden“ kommt ein Scoring-System von 0-4. Das bedeutet: Nicht nur ob ein Alt-Text existiert, sondern wie gut er ist, wird bewertet.
Ein generisches „Produktbild“ würde dann vielleicht Score 1 bekommen, ein detaillierter, kontextbezogener Alt-Text Score 4. Für Compliance wird wahrscheinlich ein Minimum-Score erforderlich sein.
Was das bedeutet: Die Zeiten, in denen „irgendetwas“ als Alt-Text reichte, sind gezählt. Qualität wird messbar und verpflichtend.
Visual Search verändert SEO
Google Lens, Pinterest Lens, Bing Visual Search – immer mehr Nutzer suchen mit Bildern statt mit Text. Ein Nutzer fotografiert einen Schuh auf der Straße und will wissen, wo er ihn kaufen kann. Die Suchmaschine findet Ihr Produktbild – aber nur, wenn sie versteht, was darauf zu sehen ist.
Hier kommen Alt-Texte ins Spiel: Sie helfen der Suchmaschine, den semantischen Kontext zu verstehen. „Roter Nike Air Max 270“ ist ein Match für visuelle Suchen nach roten Sneakern. „IMG_4521.jpg“ ist unsichtbar.
Der Trend: Alt-Texte werden zum kritischen Faktor für Visual Search Discovery. Shops ohne optimierte Alt-Texte werden in der visuellen Suche unsichtbar.
Alt-Texte sind keine lästige Pflicht, sondern eine strategische Investition. Sie zahlen dreifach: Compliance (Strafen vermeiden), SEO (Traffic gewinnen), UX (alle Nutzer erreichen). Die Kosten sinken durch KI-Automatisierung, der Nutzen steigt durch Visual Search und strengere Regularien. Je früher Sie starten, desto besser.
Branchenspezifische Alt-Text-Strategien
Verschiedene Branchen haben unterschiedliche Anforderungen an Alt-Texte. Hier sind detaillierte Strategien für die wichtigsten E-Commerce-Segmente:
Fashion & Textilien
Die visuellste Branche im E-Commerce
Fashion lebt von Bildern. Nutzer müssen Farben, Schnitte, Materialien und Details verstehen, ohne das Produkt anfassen zu können. Alt-Texte sind hier besonders wichtig, weil sie diese sensorischen Informationen in Worte übersetzen.
Die Fashion-Formel:
[Farbe] + [Material] + [Produkttyp] + [Marke] + [Schnitt/Stil] + [Ansicht]
Beispiel Oberbekleidung:
alt="Dunkelblauer Wollmantel von Max Mara, wadenlang, zweireihig, am Model Frontalansicht"
Beispiel Accessoire:
alt="Goldene Armbanduhr Cartier Santos, quadratisches Zifferblatt, Lederarmband braun"
- • Nutzen Sie präzise Farbnamen: „Burgunderrot“ statt „Rot“, „Champagner“ statt „Beige“
- • Bei gemusterten Stoffen: „Marineblaues Streifenhemd mit weißen Nadelstreifen“
- • Materialien erwähnen: Seide, Kaschmir, Baumwolle, Leder – das interessiert Käufer
- • Bei Prints: „Florales Muster mit rosa Rosen auf cremefarbenem Grund“
Elektronik & Technik
Spezifikationen und Features im Fokus
Bei Elektronik wollen Nutzer technische Details verstehen. Alt-Texte sollten Modellnummern, Farben und sichtbare Features enthalten. Anders als bei Fashion geht es weniger um Ästhetik und mehr um Funktion.
Die Elektronik-Formel:
[Marke] + [Produktname/Modell] + [Farbe/Variante] + [sichtbares Feature] + [Ansicht]
Beispiel Smartphone:
alt="Samsung Galaxy S24 Ultra in Titanium Black, Rückseite mit Quad-Kamera-System sichtbar"
Beispiel Computer:
alt="Dell XPS 15 Laptop geöffnet, OLED-Display zeigt Windows-Desktop, Tastatur mit Hintergrundbeleuchtung"
- • Modellnummern nur, wenn sie branchenüblich sind (z.B. „RTX 4090“, „M3 Max“)
- • Bei Anschlüssen: Beschreiben, was sichtbar ist („USB-C und HDMI-Ports an der Seite“)
- • Maßstab vermitteln, wenn hilfreich („kompaktes Format, passt in eine Hand“)
- • Bei Zubehör den Hauptanwendungsfall nennen („Lightning-auf-USB-C-Kabel für iPhone-Ladung“)
Food & Getränke
Appetit anregen durch Worte
Bei Lebensmitteln geht es darum, den Appetit anzuregen und gleichzeitig wichtige Produktinformationen zu liefern. Alt-Texte sollten Textur, Farbe und Präsentation beschreiben, aber auch praktische Details wie Packungsgröße enthalten.
Beispiel Wein:
alt="Rotwein Château Margaux 2018, dunkelrote Farbe in Dekanter, Bordeaux-Flasche daneben"
Beispiel Süßwaren:
alt="Belgische Pralinen-Auswahl, 24 Stück in Goldverpackung, verschiedene Schokoladensorten sichtbar"
- • Texturen beschreiben: „knusprig“, „cremig“, „saftig“ – das weckt Appetit
- • Allergene nicht im Alt-Text – die gehören in strukturierte Produktdaten
- • Packungsgröße angeben: „500g Beutel“, „6er-Pack“, „0,75l Flasche“
- • Bei Fertiggerichten: Das fertige Ergebnis beschreiben, nicht die Verpackung
B2B & Industrie
Technische Präzision für Fachpublikum
B2B-Käufer sind Experten in ihrem Bereich. Sie erwarten technische Präzision und branchenübliche Terminologie. Alt-Texte dürfen hier fachsprachlicher sein als im B2C-Bereich.
Beispiel Maschinenbau:
alt="CNC-Fräsmaschine DMG MORI NLX 2500, 5-Achs-Bearbeitung, Arbeitsraum geöffnet mit Werkzeugwechsler"
Beispiel Bürobedarf:
lt="Bürodrehstuhl Steelcase Leap V2, Vollausstattung mit Lordosenstütze, Mesh-Rücken schwarz"
- • Fachbegriffe verwenden, wenn die Zielgruppe sie kennt
- • Modellnummern und Typenbezeichnungen vollständig angeben
- • Bei technischen Zeichnungen: Maßstab und dargestellte Perspektive nennen
- • Zertifizierungen nur im Alt-Text, wenn sie auf dem Bild sichtbar sind (z.B. CE-Zeichen)
Internationale Alt-Texte: Mehrsprachige Shops
Wenn Ihr Shop mehrere Sprachen unterstützt, brauchen Sie auch Alt-Texte in jeder Sprache. Hier sind die wichtigsten Überlegungen:
- Hreflang-Tags: Jede Sprachversion braucht eigene Alt-Texte in der jeweiligen Sprache
- Kulturelle Unterschiede: Farben haben unterschiedliche Bedeutungen (Weiß = Trauer in Asien)
- Markenübersetzung: Manche Marken haben lokale Namen oder Schreibweisen
- Maßeinheiten: EU = metrisch, USA/UK = imperial (Inches, Ounces)
- Nicht wörtlich übersetzen: „Blue running shoe“ → nicht nur „Blauer Laufschuh“, sondern lokale Begriffe nutzen
- Lokale Keywords recherchieren: Deutsche suchen nach „Sneaker“, Österreicher nach „Turnschuh“
- Schuhgrößen konvertieren: EU 42 = US 9 = UK 8
- KI nutzen: AutoAlt.ai generiert Alt-Texte in 25+ Sprachen automatisch
🇩🇪 Deutsch:
alt="Roter Nike Air Max Laufschuh für Herren, Größe 42, Seitenansicht"
🇬🇧 Englisch:
alt="Red Nike Air Max men's running shoe, size 9 US, side view"
🇫🇷 Französisch:
alt="Chaussure de course Nike Air Max rouge pour homme, pointure 42, vue latérale"
🇪🇸 Spanisch:
alt="Zapatilla de running Nike Air Max roja para hombre, talla 42, vista lateral"
Alt-Texte in verschiedenen CMS & Shop-Systemen
Jedes System hat seine Eigenheiten bei der Alt-Text-Pflege. Hier sind konkrete Anleitungen für die beliebtesten Plattformen:
Shopware 6
In Shopware 6 werden Alt-Texte direkt im Media Manager gepflegt. Der Weg: Administration → Inhalte → Medien → Bild auswählen → „Alt-Tag“ Feld. Bei Produktbildern können Sie auch im Produkt unter „Medien“ den Alt-Text hinterlegen.
Besonderheit: Shopware unterstützt mehrsprachige Alt-Texte. Wechseln Sie die Sprache oben rechts und pflegen Sie für jede Sprache einen separaten Alt-Text.
Automatisierung: Das AutoAlt.ai Shopware Plugin synchronisiert sich mit Ihrem Produktkatalog und generiert Alt-Texte automatisch beim Produkt-Import oder auf Knopfdruck für bestehende Bilder.
Pro-Tipp: Nutzen Sie die „Massenbearbeitung“ in Shopware, um Alt-Texte für mehrere Bilder gleichzeitig zu pflegen. Für wirklich große Kataloge (1.000+ Bilder) ist die API-Integration von AutoAlt.ai effizienter.
WordPress & WooCommerce
WordPress macht es relativ einfach: Medien → Bibliothek → Bild anklicken → „Alt-Text“ Feld rechts. Der Alt-Text wird dann überall verwendet, wo dieses Bild eingebunden wird.
Bei WooCommerce-Produkten: Produkt bearbeiten → Produktbild oder Galerie → Bild anklicken → Alt-Text pflegen. Achtung: Das Standard-Verhalten von WooCommerce ist, den Produkttitel als Alt-Text zu verwenden, wenn kein expliziter Alt-Text gesetzt ist. Das ist besser als nichts, aber nicht optimal.
Plugin-Empfehlung: Das AutoAlt.ai WordPress Plugin integriert sich nahtlos in den Gutenberg-Editor und die Mediathek. Es analysiert hochgeladene Bilder in Echtzeit und schlägt Alt-Texte vor, die Sie mit einem Klick übernehmen können.
Wichtig: WordPress unterscheidet zwischen Alt-Text (für Screenreader) und Titel (für Tooltip/Hover). Fokussieren Sie sich auf den Alt-Text – der Titel ist für Barrierefreiheit weniger relevant.
Shopify
Shopify hat die Alt-Text-Pflege gut integriert: Produkte → Produkt bearbeiten → Mediensektion → Bild anklicken → „Alt-Text bearbeiten“. Shopify zeigt sogar einen Hinweis an, wenn Alt-Texte fehlen.
Bulk-Bearbeitung: Über die Shopify-Exporte (CSV) können Sie Alt-Texte massenweise bearbeiten. Exportieren Sie Produkte, fügen Sie die Spalte „Image Alt Text“ hinzu, importieren Sie zurück. Bei großen Katalogen ist das effizienter als die manuelle Pflege im Admin.
Apps: Im Shopify App Store gibt es diverse Alt-Text-Apps. Achten Sie auf Bewertungen und DSGVO-Konformität – nicht alle Apps verarbeiten Ihre Bilder datenschutzkonform.
Magento / Adobe Commerce
Magento ist Enterprise-Software und entsprechend komplex. Alt-Texte werden unter Catalog → Products → Produkt bearbeiten → Images and Videos gepflegt. Jedes Bild hat ein „Alt Text“-Feld in seinen Eigenschaften.
Mehrsprachigkeit: Magento unterstützt Store Views. Wechseln Sie zum gewünschten Store View, um sprachspezifische Alt-Texte zu pflegen. Die Standard-Alt-Texte werden vom Default Store View vererbt.
Für Entwickler: Magento nutzt das label-Attribut in der Datenbank (Tabelle catalog_product_entity_media_gallery_value). Dieses Feld wird als Alt-Text im Frontend ausgegeben. Über die REST API können Sie Alt-Texte programmatisch setzen.
Alt-Texte in Ihren Content-Workflow integrieren
Alt-Texte sollten kein Nachgedanke sein, sondern Teil Ihres regulären Content-Prozesses. Hier sind bewährte Strategien für verschiedene Team-Setups:
Die Herausforderung: Jeder macht alles – Fotografie, Content, Shop-Pflege. Alt-Texte werden oft vergessen.
Die Lösung:
- Checklist bei jedem Produktupload: „Alt-Text gepflegt?“
- Wöchentlicher 15-Minuten-Check: Neue Bilder ohne Alt-Text identifizieren
- AutoAlt.ai Free Tier nutzen: 50 Bilder/Monat kostenlos
Die Herausforderung: Content-Team erstellt Texte, aber nicht die Bilder. Verantwortlichkeiten sind unklar.
Die Lösung:
- Klare Zuständigkeit definieren: Wer Bilder hochlädt, pflegt Alt-Texte
- Style Guide für Alt-Texte erstellen (basierend auf diesem Guide)
- Monatliches Audit: Report mit fehlenden/schlechten Alt-Texten
Die Herausforderung: Komplexe Prozesse, viele Beteiligte, internationale Märkte, strenge Compliance-Anforderungen.
Die Lösung:
1. Automatisierung
API-Integration von AutoAlt.ai in PIM-System. Alt-Texte werden automatisch bei Produkt-Import generiert.
2. Qualitätssicherung
Review-Workflow: KI generiert, Mensch prüft stichprobenartig. Feedback verbessert die KI kontinuierlich.
3. Compliance-Dashboard
Echtzeit-Übersicht: Wie viel Prozent der Bilder haben Alt-Texte? Welche Bereiche brauchen Aufmerksamkeit?
Alt-Texte sind wie Buchhaltung: Wenn Sie es laufend machen, ist es wenig Arbeit. Wenn Sie es ein Jahr aufschieben, ist es ein Riesenprojekt. Integrieren Sie Alt-Texte in Ihren täglichen Workflow, und Sie werden nie wieder einen „Alt-Text-Sprint“ brauchen.
Erfolg messen: KPIs für Alt-Text-Optimierung
Wie wissen Sie, ob Ihre Alt-Text-Optimierung funktioniert? Hier sind die wichtigsten Metriken, die Sie tracken sollten:
Prozent der Bilder mit Alt-Text. Ziel: 100% für informative Bilder.
100%
Zielwert
Traffic aus Google Images. In GA4: Akquisition → Traffic-Akquisition → Filter "google images".
+20-30%
Typischer Uplift
Lighthouse Accessibility Score. Fehlende Alt-Texte senken ihn deutlich.
95+
Zielwert
Sinkender Image-Traffic
Könnte auf schlechte oder fehlende Alt-Texte hinweisen – oder auf ein Indexierungsproblem.
Accessibility-Beschwerden
Wenn Nutzer sich beschweren, dass sie Bilder nicht verstehen, ist es höchste Zeit zu handeln.
Hohe Absprungrate bei Image-Traffic
Nutzer kommen über Bildersuche, finden aber nicht, was sie erwartet haben. Alt-Text passt nicht zum Bild?
Lighthouse-Score unter 90
Zeit für ein Accessibility-Audit. Fehlende Alt-Texte sind oft ein schnell behebbares Problem.
Rechtliche Checkliste: Sind Sie BFSG-ready?
Das BFSG ist seit dem 28. Juni 2025 in Kraft. Nutzen Sie diese Checkliste, um Ihren Compliance-Status zu prüfen – nicht nur für Alt-Texte, sondern für die gesamte Website:
Navigation & Bedienung:
- □ Vollständige Tastaturnavigation möglich
- □ Fokus-Indicator sichtbar
- □ Skip-Links vorhanden
- □ Konsistente Navigation
Inhalte & Struktur:
- □ Semantische Überschriften (h1-h6)
- □ Aussagekräftige Linktexte
- □ Formulare korrekt beschriftet
- □ Fehlermeldungen verständlich
Multimedia:
- □ Videos haben Untertitel
- □ Audio-Inhalte haben Transkripte
- □ Kein automatisches Abspielen
- □ Medien pausierbar
Design & Kontraste:
- □ Mindestkontrast 4.5:1 für Text
- □ Responsive Design
- □ Zoom bis 200% ohne Funktionsverlust
- □ Keine reine Farbkodierung
Das BFSG ist seit dem 28. Juni 2025 vollständig in Kraft. Die Marktüberwachungsbehörden können jetzt aktiv werden. Die Konsequenzen sind real:
- Bußgelder: Bis zu 100.000 € in Deutschland, gestaffelt nach Schwere und Unternehmensgröße
- Wettbewerbsrechtliche Abmahnungen: Konkurrenten können Sie abmahnen – Kosten: 3.000-5.000 € pro Fall plus Anwaltsgebühren
- Öffentliche Beschwerdeverfahren: Betroffene können sich bei der Marktüberwachung beschweren, die dann prüft
- Verkaufsverbote: Bei schweren oder wiederholten Verstößen können Produkte vom Markt genommen werden
- Reputationsschaden: Negative Presse und Social-Media-Kritik schaden langfristig
Die gute Nachricht: Alt-Texte zu optimieren ist eines der einfachsten und schnellsten Dinge, die Sie für Compliance tun können. Mit AutoAlt.ai geht es in Stunden, nicht Wochen.
Weiterführende Ressourcen
Sie wollen noch tiefer einsteigen? Hier sind die besten Ressourcen zum Thema Alt-Texte, WCAG und Barrierefreiheit:
- W3C: Images Tutorial – Das offizielle Tutorial vom W3C mit allen Details zu Bildtypen und Alt-Texten
- WCAG 2.2 Spezifikation – Der komplette technische Standard (für Fortgeschrittene)
- EN 301 549 – Die europäische Norm, auf die das BFSG verweist
- WAVE Web Accessibility Evaluator – Kostenloser Online-Test für Ihre Website
- axe DevTools – Browser-Extension für Entwickler, sehr detailliert
- NVDA Screenreader – Kostenloser Screenreader für Windows zum Selbsttest
- WebAIM – Exzellente Artikel und Ressourcen zur Web-Barrierefreiheit
- The A11Y Project – Community-Ressourcen und Best Practices, gut aufbereitet
- Barrierefreies Webdesign – Deutsche Ressourcen speziell für den DACH-Markt
Teilen Sie ihn mit Ihrem Team! Je mehr Menschen Alt-Texte verstehen, desto besser wird das Web für alle.
TL;DR – Die wichtigsten Punkte
Sie haben es bis hierher geschafft? Respekt! Hier die Kernaussagen auf einen Blick:
Alt-Texte sind Pflicht – rechtlich (BFSG, ADA) und praktisch (SEO, UX). Keine Option.
Bildtyp bestimmt Strategie – Informativ → beschreiben, Dekorativ → leer, Funktional → Aktion.
50-150 Zeichen – kurz genug zum Zuhören, lang genug für Information.
Kein Keyword-Stuffing – natürliche Beschreibungen sind besser für SEO UND Barrierefreiheit.
Formel für Produkte: [Farbe/Material] + [Produkt] + [Marke] + [Ansicht]
Leer ≠ Fehlend – alt="" ist NICHT dasselbe wie kein Attribut.
KI macht es einfach – AutoAlt.ai generiert tausende Alt-Texte in Stunden statt Wochen.
Bereit, Ihre Alt-Texte zu optimieren?
Registrieren