Barrierefreiheit: Wie sehen korrekte Alt-Texte aus – und warum sollten alle Shops sie haben?

Ab Ende Juni 2025 greift das BFSG und fordert barrierefreie digitale Inhalte für viele Unternehmen. Aber selbst wenn ein Online-Shop nicht direkt betroffen ist, lohnt es sich, Alt-Texte konsequent zu nutzen: Sie können bei langsamer Internetverbindung helfen, die Absprungrate zu stabilisieren und somit auch die Google-Platzierung verbessern. Trotzdem vernachlässigen viele Shops diese einfache Technik.

Alt-Texte einfach erklärt: Was sie sind, wo man sie einträgt und warum sie wichtig sind

Alt-Texte (Kurzform für Alternativtexte) sind Beschreibungen von Bildern, die in den HTML-Code einer Webseite oder in spezielle Felder auf Plattformen eingetragen werden. Sie helfen, den Bildinhalt für Menschen verständlich zu machen, die das Bild nicht sehen können, z. B. blinde Nutzer, die Screenreader verwenden oder wenn das Bild nicht geladen werden kann.

Die Pflicht zur Verwendung von Alt-Texten in Bezug auf Barrierefreiheit kommt nicht direkt aus dem Barrierfreiheitsstärkungsgesetz (BFSG), sondern aus internationalen und europäischen Richtlinien, insbesondere den Web Content Accessibility Guidelines (WCAG) und der EU-Richtlinie über den barrierefreien Zugang zu Websites und mobilen Anwendungen (EU-Richtlinie 2016/2102).

Das macht einen schlechten Alt-Text aus

Bilder auf Websites sollten in inhaltstragende und dekorative Bilder unterschieden werden. Inhaltstragende Bilder enthalten wichtige Informationen und benötigen einen präzisen Alt-Text, damit Screenreader sie vorlesen können. Dekorative Bilder wie Icons, Symbole oder Muster hingegen haben keinen inhaltlichen Mehrwert und sollten mit `alt=""` versehen werden, damit sie für Screenreader-Nutzer:innen nicht störend sind. Diese Unterscheidung verbessert die Barrierefreiheit und sorgt für eine bessere Nutzererfahrung.

Aber auch bei der Bildbeschriftung selbst kann man patzen. Häufige Fehler, die Online-Shops begehen, sind folgende:

• Fehlende Alt-Texte für inhaltstragende Bilder: Ohne Text bleibt das Bild für Blinde und Sehbehinderte unsichtbar.
• Zu allgemeine Beschreibungen: alt="Kleid". So eine Beschreibung hilft wenig, denn sie ist zu vage.
• Subjektive oder unklare Aussagen: alt="Tolles Sofa für dein Wohnzimmer". Hier ist unklar, was daran toll sein soll und wie es aussieht.

So sieht ein barrierefreier Alt-Text aus

Ein guter Alt-Text sollte kurz, präzise und informativ sein, damit er den Bildinhalt klar beschreibt, ohne unnötige Details oder Werbesprache. Er hilft nicht nur Sehbehinderten, das Bild zu erfassen, sondern verbessert auch die Suchmaschinenoptimierung und die allgemeine Nutzerfreundlichkeit.

Ein guter Alt-Text sollte also:

1. präzise sein (Produktart, Farbe, Material, besondere Merkmale),
2. neutral formuliert sein (keine Werbesprache oder unnötige Adjektive) und
3. das Bild in wenigen Worten, aber vollständig beschreiben.

Beispiel für gute Alt-Texte:

• alt="Knielanges, ärmelloses Sommerkleid mit blauen und weißen Dahlien auf pastellgelbem Hintergrund, aus Baumwolle"
• alt="Samsung Galaxy S24 Ultra in mattem Schwarz mit 6,8-Zoll-Display, vier Kameras auf der Rückseite und abgerundeten Ecken vor einem weißen Hintergrund"
• alt="Modernes, graues Ecksofa für 4 Personen mit Veloursbezug, Ottomane auf der rechten Seite und verstellbaren Kopfstützen"
• alt="Werbebanner mit weißer Schrift auf rotem Hintergrund, bei dem eine Konfettikanone die Worte '20% Rabatt auf alle Schuhe, nur bis 31.03.25' und den Rabattcode 'SAVE20' ausbläst"

Für die Integration von Alt-Texten, insbesondere bei großen Online-Shops mit zehntausenden Artikeln, gibt es verschiedene Ansätze. Viele Content-Management-Systeme (CMS) und Shop-Plattformen bieten integrierte Möglichkeiten, Alt-Texte direkt beim Hochladen von Bildern zu hinterlegen. Wer eine große Anzahl von Produktbildern verwalten muss, kann auf automatisierte Prozesse setzen, die Alt-Texte anhand von Produktinformationen generieren. Zudem gibt es Schnittstellen und Import-Funktionen, mit denen Alt-Texte aus einer zentralen Produktdatenbank übernommen werden können. Falls individuelle Lösungen nötig sind, kann auch eine eigene Entwicklung oder die Unterstützung durch Spezialisten für Barrierefreiheit sinnvoll sein.

Wo trägt man Alt-Texte ein?

Alt-Texte können an verschiedenen Stellen hinterlegt werden, je nach Kanal:

• Eigene Website oder Online-Shop: In HTML als alt="Beschreibung des Bildes" oder im CMS (z. B. WordPress, Shopify).
• Amazon und Ebay: Im Seller Central oder beim Hochladen von Produktbildern unter „Alternativtext“ oder „Bildbeschreibung“.
• Social Media: Bei Instagram, Facebook, LinkedIn und Twitter gibt es extra Felder für Alt-Texte, wenn man Bilder hochlädt.
• Google Shopping: In den Produktfeeds können Alt-Texte als Teil der Bild-Attribute mitgegeben werden.

Alt-Texte nicht nur für verpflichtete Online-Shops sinnvoll

Suchmaschinen wie Google können Bilder nicht direkt „sehen“. Alt-Texte helfen daher, sie besser zu verstehen und in der Bildersuche zu listen. Auch die User Experience kann sich durch eine aussagekräftige Bildbeschreibung verbessern. Wenn ein Bild nicht geladen wird (z. B. wegen schlechter Internetverbindung), wird stattdessen der Alt-Text angezeigt. Kurz gesagt: Ein guter Alt-Text macht Inhalte zugänglicher, suchmaschinenfreundlicher und nutzerfreundlicher. 

Alles, was man zur Barrierefreiheit wissen muss

Zur einer zugänglichen Webseite gehören jedoch nicht nur Alt-Texte, sondern noch viel mehr. 

Um herauszufinden, wer vom BFSG betroffen ist, kann das kostenlose Check-Tool von Legal Connect genutzt werden. Am Ende des Tests gibt es eine praktische Checkliste sowie einen ausführlichen Leitfaden mit häufigen Fragen und konkreten Umsetzungstipps zum Download. Jetzt testen und auf Nummer sicher gehen!

Wir haben uns dem Thema Barrierefreiheit in unserer Themenreihe bereits umfassend gewidmet:

1. Muss meine Webseite bald barrierefrei sein?
2. Wie muss der barrierefreie Online-Shop aussehen?
3. Praxis: Wie setze ich die Barrierefreiheitsanforderungen um?
4. Barrierefreier Online-Shop: Diese Hürden stellen sich im Alltag (Interview)
5. Das sind die neuen Anforderungen an barrierefreie Produkte
6. Erweiterte Rechtstexte und neue Informationspflichten
7. Was droht, wenn die Barrierefreiheitsanforderungen nicht umgesetzt werden?
8. Checkliste zur Vorbereitung auf den 28. Juni
9. FAQ zur Barrierefreiheit: Alles, was du wissen musst

Weitere Informationen rund um die Barrierefreiheit findest du auf unserer Themenseite Barrierefreiheit.

Artikelbild: http://www.depositphotos.com