Wie teste ich meine Alt-Texte am besten?

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

Was passiert, wenn ich die BFSG-Deadline verpasse?

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.

WCAG Guide - AutoAlt.ai

Q: Kann KI Alt-Texte automatisch generieren?

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.

Q: Darf ich das Alt-Attribut einfach weglassen?

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!

Q: Was ist der Unterschied zwischen Alt und Title?

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.

Q: Muss ich ARIA für normale Bilder nutzen?

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.

Q: Wie viele Bilder kann AutoAlt.ai verarbeiten?

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.

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?

❌ Fehlender Alt-Text

"Grafik. IMG_8920.jpg..."

🔊 Klicken zum Abspielen

✅ Korrekter Alt-Text

"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

♿

1. Barrierefreiheit

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.

📈

2. SEO & Traffic

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.

🔄

3. Fallback & UX

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="">

⚠️ Häufiger Fehler: Alt-Attribut weglassen

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

✅ Wer ist betroffen?

• 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

❌ Wer ist NICHT betroffen?

• 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

⚠️ Strafen bei Verstößen nach EU-Land:

100.000 €

🇩🇪 Deutschland

75.000 €

🇫🇷 Frankreich

50.000 €

🇳🇱 Niederlande

40.000 €

🇦🇹 Österreich

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.

📊 ADA-Klagen: Die Zahlen

4.500+

ADA-Klagen gegen Websites (2024)

$25.000+

Durchschnittliche Vergleichskosten

+15%

Anstieg gegenüber Vorjahr

📋 Fallbeispiel: Deutscher Möbelhändler

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.

Option A: Vergleich

$35.000 sofort + $5.000 Anwaltskosten

Option B: Gerichtsverfahren

$100.000+ potenzielle Kosten

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.

⚠️ Vorsicht: "ADA Mills"

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

Ist es Deko?

Hintergründe, Trennlinien, visuelle Effekte, Schmuckelemente

alt=""

Leeres Attribut = Screenreader ignoriert

Ist es ein Link/Button?

Klickbare Icons, Logo-Links, Social Buttons, Thumbnails

alt="Funktion/Ziel"

Beschreibe WAS passiert, nicht WIE es aussieht

Trägt es Information?

Produktfotos, Illustrationen, Portraits, Screenshots

alt="Beschreibung"

Beschreibe WAS zu sehen ist + WARUM relevant

4.1

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.

4.2

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

⚠️ KRITISCH: Leer ≠ Fehlend!

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.

4.3

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>

4.4

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.

4.5

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.

❌ SEO Spam (Riskant & Nutzlos)

alt="iPhone 15 Hülle case cover kaufen billig handyhülle günstig online shop beste qualität"

🤖 Google: Spam-Signal → potenzielle Abstrafung

♿ Screenreader: Unverständlicher Wortbrei

⚖️ Compliance: WCAG-Verstoß (nicht gleichwertig)

✅ The Sweet Spot (SEO + A11y)

alt="Schwarze Lederhülle für iPhone 15 Pro mit Kartenfach, Seitenansicht"

🤖 Google: Versteht Produkt + Kontext natürlich

♿ Screenreader: Klare, hilfreiche Beschreibung

⚖️ Compliance: WCAG-konform ✓

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:

[Farbe/Material] + [Produktname] + [Marke] + [Ansicht/Detail] + [optional: Zielgruppe]

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:

👗 Fashion & Bekleidung

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"

📱 Elektronik & Tech

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"

🛋️ Möbel & Einrichtung

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"

💄 Kosmetik & Beauty

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"

🍕 Food & Getränke

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"

⚽ Sport & Outdoor

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"

🚫 Was Sie UNBEDINGT vermeiden sollten:

❌



																					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:

📸 Mehrere Produktansichten

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"

🎨 Farbvarianten-Thumbnails

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)"

⭐ Bewertungssterne

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:

📐 Inline SVG Icons

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 Background Images

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 (Font Awesome etc.)

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>

📱 Responsive Images (srcset)

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">

🖼️ Picture Element (Art Direction)

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>

📝 Figure & Figcaption

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.

⚠️ ARIA-Grundregel: "No ARIA is better than bad ARIA." – W3C

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:

🔗 Verlinktes Produktbild

<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.

🖱️ Bild als einziger Inhalt eines Buttons

<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>

📊 Komplexes Diagramm mit Langbeschreibung

<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:

🔧

Browser DevTools

Kostenlos und sofort verfügbar:

• Chrome: F12 → Lighthouse → Accessibility
• Firefox: F12 → Accessibility Tab
• Edge: F12 → Issues → Accessibility

Findet fehlende Alt-Attribute automatisch.

🔊

Screenreader

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.

🤖

Automatisierte Scanner

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?

Quiz

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:

✓ Jedes Bild hat ein Alt-Attribut Auch wenn es leer ist (alt=""). Kein Bild ohne Attribut! ✓ Dekorative Bilder haben alt="" Hintergründe, Trennlinien, visuelle Effekte – leer, nicht fehlend. ✓ Keine Redundanz ("Bild von...", "Foto von...") Screenreader sagt bereits "Grafik" – nicht wiederholen. ✓ Funktionale Bilder beschreiben die Funktion "Suche" statt "Lupe", "Zur Startseite" statt "Logo". ✓ Alt-Texte sind 50-150 Zeichen lang Kurz genug zum Zuhören, lang genug für Information. ✓ Kein Keyword-Stuffing Natürliche Beschreibungen, keine SEO-Spam-Listen. ✓ Komplexe Bilder haben Langbeschreibungen Diagramme, Infografiken → Kurz-Alt + ausführliche Beschreibung. ✓ SVGs und Icon Fonts sind barrierefrei role="img" + aria-label oder aria-hidden="true".

Keine Lust auf manuelle Arbeit?

Lassen Sie unsere KI Ihren gesamten Shop in Minuten scannen und Alt-Texte generieren.

Gratis Alt-Text Audit starten

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.

Keyword-Stuffing betreiben

„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“.

Alle Bilder gleich beschreiben

„Produktbild“ für 500 Bilder ist nicht hilfreich. Jedes Bild braucht eine individuelle, spezifische Beschreibung.

Dekorative Bilder beschreiben

Hintergründe, Trennlinien und Schmuckelemente brauchen alt="" (leer), nicht eine Beschreibung. Sonst nerven Sie Screenreader-Nutzer.

Bei Links das Icon statt das Ziel beschreiben

„Lupe“ sagt nicht, was passiert. „Suche“ schon. Bei funktionalen Bildern beschreiben Sie die Aktion, nicht das Aussehen.

Alt-Text zu lang machen

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.

Kontext ignorieren

Derselbe Schuh braucht auf der Produktseite einen anderen Alt-Text als in einem Blogartikel über Lauftraining. Der Kontext bestimmt, welche Details relevant sind.

Nur beim Launch prüfen

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.

🚀 Fazit: Investieren Sie jetzt

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"

🎨 Farb-Tipps für Fashion:

• 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"

🔌 Elektronik-Tipps:

• 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"

🍽️ Food-Tipps:

• 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"

🏭 B2B-Tipps:

• 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:

🌍 Was Sie beachten müssen:

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)

✅ Best Practice: Lokalisierung statt Übersetzung

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

📝 Beispiel: Dasselbe Produktbild in 4 Sprachen

🇩🇪 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:

👥 Kleine Teams (1-5 Personen)

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

🏢 Mittlere Teams (5-20 Personen)

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

🏭 Enterprise (20+ Personen)

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?

📋 Die goldene Regel für alle Team-Größen:

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:

📊

Coverage Rate

Prozent der Bilder mit Alt-Text. Ziel: 100% für informative Bilder.

100%

Zielwert

📈

Image Search Traffic

Traffic aus Google Images. In GA4: Akquisition → Traffic-Akquisition → Filter "google images".

+20-30%

Typischer Uplift

⚖️

Accessibility Score

Lighthouse Accessibility Score. Fehlende Alt-Texte senken ihn deutlich.

95+

Zielwert

📉 Warnsignale, die Sie beobachten sollten:

⚠️

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:

📋 Alt-Text & Bilder (WCAG 1.1.1)

Alle informativen Bilder haben beschreibende Alt-Texte Dekorative Bilder haben alt="" (leeres Attribut) Funktionale Bilder (Links/Buttons) beschreiben die Funktion Komplexe Bilder (Diagramme) haben Langbeschreibungen SVGs und Icon Fonts sind mit ARIA beschriftet Mehrsprachige Alt-Texte für internationale Shops

⌨️ Weitere WCAG-Kriterien (Kurzübersicht)

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

⚠️ Was passiert, wenn Sie nicht compliant sind?

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:

📚

Offizielle Standards

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

🛠️

Tools & Tester

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

📖

Blogs & Communities

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

💡 Sie haben diesen Guide hilfreich gefunden?

Teilen Sie ihn mit Ihrem Team! Je mehr Menschen Alt-Texte verstehen, desto besser wird das Web für alle.

LinkedIn teilen|X/Twitter teilen|Per E-Mail senden

★

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

WCAG Alt Text:The Definitive Guide.

Hören Sie den Unterschied

Was sind Alt-Texte und warum sind sie wichtig?

Die drei Säulen der Alt-Text-Relevanz

Die Anatomie eines Alt-Textes

Warum dieser Guide?

Rechtliche Grundlagen: BFSG, EAA & ADA

BFSG / European Accessibility Act (EAA)

Was genau fordert das Gesetz für Bilder?

Americans with Disabilities Act (ADA)

WCAG 2.2 – Der technische Standard im Detail

Die 7 Bildkategorien nach WCAG

Die 7 Bildtypen nach WCAG – im Detail

🎯 Der 3-Sekunden-Entscheider

Informative Bilder

Beispiele nach Kontext:

Dekorative Bilder

Typische dekorative Bilder:

Funktionale Bilder

Bilder von Text

Warum sind Text-Bilder problematisch?

Komplexe Bilder

Drei Methoden für komplexe Bilder:

SEO vs. Barrierefreiheit: Der Mythos vom Keyword-Stuffing

Warum Keyword-Stuffing in Alt-Texten schadet

Die Wahrheit: Gute Alt-Texte sind automatisch SEO-freundlich

Was Google wirklich über Alt-Texte sagt

E-Commerce Best Practices: 30+ Beispiele

🎯 Die universelle Alt-Text-Formel für Produktbilder:

Beispiele nach Branche:

Spezialfälle im E-Commerce:

Developer Cheat Sheet: ARIA, SVG & mehr

Häufige Patterns:

Tools & Testing: So prüfen Sie Ihre Alt-Texte

Wissenstest: Haben Sie aufgepasst?

Die ultimative Alt-Text-Checkliste

Keine Lust auf manuelle Arbeit?

Häufige Fragen (FAQ)

Die Zukunft von Alt-Texten: KI, WCAG 3.0 und Visual Search

KI-generierte Alt-Texte werden Standard

WCAG 3.0 bringt neue Bewertungsmethoden

Visual Search verändert SEO

Branchenspezifische Alt-Text-Strategien

Fashion & Textilien

Die Fashion-Formel:

Elektronik & Technik

Die Elektronik-Formel:

Food & Getränke

B2B & Industrie

Internationale Alt-Texte: Mehrsprachige Shops

Alt-Texte in verschiedenen CMS & Shop-Systemen

Shopware 6

WordPress & WooCommerce

Shopify

Magento / Adobe Commerce

Alt-Texte in Ihren Content-Workflow integrieren

Erfolg messen: KPIs für Alt-Text-Optimierung

Rechtliche Checkliste: Sind Sie BFSG-ready?

Weiterführende Ressourcen

TL;DR – Die wichtigsten Punkte

🔍 Kostenloser SEO & Compliance Check

Bilder werden analysiert...

📊 Analyseergebnisse

WCAG Alt Text:
The Definitive Guide.