Jedes Mal, wenn ein Kunde mit Behinderung deinen Checkout nicht bedienen, einen Produktfilter nicht ausfüllen oder deine Produktbeschreibungen nicht lesen kann, hast du einen Verkauf verloren. Mehr als jeder vierte Erwachsene in den USA hat eine Form von Behinderung. Das ist kein kleines Marktsegment. Es ist dein Markt.
Barrierefreiheit im Web ist nicht nur eine ethische Frage. Sie ist eine rechtliche Anforderung. Der Americans with Disabilities Act (ADA) verlangt, dass Unternehmen ihre Leistungen für Menschen mit Behinderungen zugänglich machen. Das gilt auch für Onlineshops. Jedes Jahr erhalten Tausende Websites rechtliche Forderungen wegen Verstößen gegen die Barrierefreiheit, und E-Commerce-Seiten sind am häufigsten betroffen. Dieser Artikel zeigt, was Barrierefreiheit bedeutet, warum sie für deinen Shop wichtig ist, was das Gesetz verlangt und wie du sie ohne teure Spezialwerkzeuge umsetzt.
Was ist Barrierefreiheit im Web?
Barrierefreiheit im Web bedeutet, dass jeder deine Seite nutzen kann, auch Menschen mit Behinderungen. Dazu gehören Menschen, die blind sind oder schlecht sehen, gehörlos sind oder schlecht hören, motorische Einschränkungen haben, die die Nutzung einer Maus erschweren, kognitive Einschränkungen oder Lernschwierigkeiten haben oder andere Beeinträchtigungen, die beeinflussen, wie sie das Web nutzen.
Barrierefreie Websites funktionieren mit Hilfstechnologien wie Screenreadern (Software, die Text vorliest), reiner Tastaturbedienung (für Menschen, die keine Maus nutzen können) und Vergrößerungswerkzeugen. Eine barrierefreie Seite nutzt außerdem klare Sprache, ausreichenden Farbkontrast, eine saubere Überschriftenstruktur und Formularbeschriftungen, die Screenreader verstehen.
Das Grundprinzip: Deine Kunden sollen erledigen können, wofür sie gekommen sind. Sie sollen stöbern, filtern, Beschreibungen lesen, in den Warenkorb legen und den Checkout abschließen können, egal welche Hilfstechnologie oder Anpassung sie nutzen.
Was ist der ADA und warum gilt er für deinen Shop?
Der Americans with Disabilities Act (ADA) wurde 1990 verabschiedet und ist ein US-Bundesgesetz, das die Diskriminierung von Menschen mit Behinderungen verbietet. Titel III des ADA verlangt, dass alle für die Öffentlichkeit zugänglichen Unternehmen Menschen mit Behinderungen gleichen Zugang bieten. Das gilt auch für Websites und Online-Dienste. Das Gesetz sieht keine Ausnahmen für kleine Unternehmen oder Onlinehändler vor.
Dein Onlineshop gilt nach dem ADA als öffentlich zugängliche Einrichtung. Das heißt, deine Website muss barrierefrei sein. Du kannst nicht argumentieren, dein Shop sei zu klein oder zu neu oder Barrierefreiheit sei zu teuer. Das Gesetz gilt. Gerichte haben immer wieder entschieden, dass der ADA für Websites gilt, und das US-Justizministerium hat erklärt, dass Barrierefreiheit im Web eine Frage der Bürgerrechte und nicht optional ist.
WCAG 2.1 Level AA: der Standard für Barrierefreiheit
Der Standard für Barrierefreiheit im Web, der in Rechtsfällen und bei Compliance-Anforderungen genutzt wird, heißt WCAG (Web Content Accessibility Guidelines) 2.1 Level AA. Die WCAG werden vom World Wide Web Consortium (W3C) gepflegt, einer gemeinnützigen Organisation, die Standards für das Web setzt.
WCAG 2.1 Level AA enthält Richtlinien in vier Hauptbereichen:
Wahrnehmbar: Nutzer können deine Inhalte sehen oder hören
Deine Inhalte müssen so dargestellt werden, dass Kunden sie wahrnehmen können. Das heißt: Textbeschreibungen (Alt-Texte) für alle Produktbilder, Untertitel für Videos, ausreichender Farbkontrast bei Text und Buttons (mindestens 4,5:1 bei normalem Text) und keine Inhalte, die öfter als dreimal pro Sekunde blinken, da dies Anfälle auslösen kann.
Bedienbar: Nutzer können in deinem Shop navigieren und interagieren
Nutzer müssen deinen Shop allein mit der Tastatur bedienen können (ohne Maus). Links und Buttons müssen per Tastatur erreichbar sein. Formulare brauchen klare Beschriftungen, die Screenreader verstehen. Dein Shop sollte Tastaturnutzer nicht in Endlosschleifen gefangen halten oder zeitgesteuerte Interaktionen verlangen, die Nutzer nicht anpassen können. Menüpunkte und Formularfelder müssen leicht zu finden und zu nutzen sein.
Verständlich: Nutzer verstehen, was dein Shop sagt und tut
Dein Shop muss leicht verständlich sein. Nutze klare Sprache und kurze Sätze. Erkläre Fachbegriffe bei der ersten Verwendung. Ordne deine Seiten logisch mit einer sauberen Überschriftenstruktur (eine H1 pro Seite, danach H2 und H3 in der richtigen Reihenfolge). Erkläre Fehlermeldungen in Formularen klar. Gestalte deine Seite einheitlich, damit Nutzer vorhersagen können, wie Navigation und Interaktionen funktionieren.
Robust: Dein Shop funktioniert mit Hilfstechnologien
Dein Code muss korrekt geschrieben sein, damit Screenreader und andere Hilfswerkzeuge ihn verstehen. Das heißt: sauberes semantisches HTML (Buttons sind echte Button-Elemente und keine als Button gestalteten divs), eine korrekte Überschriftenhierarchie und ARIA-Labels, wo sie komplexe interaktive Elemente beschreiben müssen. Dein Shop sollte in allen Browsern und auf allen Geräten funktionieren.
Häufige Barrieren in Onlineshops
Das sind die häufigsten Probleme bei der Barrierefreiheit in E-Commerce-Shops:
Fehlende oder schlechte Alt-Texte bei Produktbildern
Viele Onlineshops haben keine Alt-Texte bei Produktbildern oder nur vage wie „Bild“ oder „Produktfoto“. Nutzer von Screenreadern können Bilder nicht sehen. Der Alt-Text muss beschreiben, was am Bild wichtig ist. Bei einem roten T-Shirt ist „rotes Baumwoll-T-Shirt mit Rundhalsausschnitt und Brusttasche“ ein guter Alt-Text, nicht „Shirt“ oder „rotes Shirt Foto“. Bei einer Varianten-Auswahl kann der Alt-Text das Farbmuster oder die Stiloption klar beschreiben. Jedes Produktbild braucht einen genauen, beschreibenden Alt-Text.
Formulare ohne korrekte Beschriftung
Wenn ein Formularfeld (E-Mail-Feld, Telefonfeld, Adressfeld) keine zugeordnete Beschriftung hat oder die Beschriftung nur ein sichtbarer Platzhaltertext ist, wissen Nutzer von Screenreadern nicht, was sie eingeben sollen. Richtig beschriftete Formulare haben unsichtbare, aber zugängliche Label-Elemente, die Screenreadern sagen, wofür jedes Feld da ist.
Keine Tastaturnavigation
Manche Seiten verlangen eine Maus zur Navigation oder zum Abschluss eines Kaufs. Nutzer, die nur die Tastatur verwenden, können Dropdown-Menüs nicht bedienen, sehen nicht, welches Element den Fokus hat, oder können Formularfelder nicht in sinnvoller Reihenfolge mit der Tabulatortaste durchgehen. Jede Funktion sollte per Tastatur erreichbar sein. Der Tastaturfokus sollte auf der Seite sichtbar sein, damit Nutzer wissen, wo sie sind.
Schlechter Farbkontrast
Hellgrauer Text auf weißem Hintergrund ist für dich vielleicht lesbar. Für Menschen mit Sehschwäche ist er es nicht. WCAG Level AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 bei normalem Text. Buttons, Links und jeder Text, den Nutzer lesen müssen, müssen diesen Standard erfüllen. Prüfe deinen Kontrast mit einem kostenlosen Kontrastprüfer.
Verwirrende Überschriftenstruktur
Nutzer von Screenreadern navigieren oft, indem sie zwischen Überschriften springen. Wenn deine Seite von H1 zu H3 zu H2 springt oder Überschriften nur zur Gestaltung nutzt, entsteht für Screenreader ein verwirrendes Erlebnis. Nutze Überschriften in logischer Reihenfolge, um deine Seite zu gliedern. Eine H1 pro Seite, dann H2 für Hauptabschnitte und H3 für Unterabschnitte. Überspringe nie Überschriftenebenen.
Buttons und Links ohne klaren Zweck
Ein Button mit der Aufschrift „Hier klicken“ sagt Nutzern von Screenreadern nichts darüber, was der Klick bewirkt. Nutze beschreibende Button-Texte: „In den Warenkorb“, „Bewertungen ansehen“, „Zur Kasse“. Wenn du einen Button mit Icon brauchst, ergänze Text oder ein ARIA-Label, das die Aktion beschreibt. Jedes interaktive Element braucht eine klare, beschreibende Beschriftung.
Nicht zugängliche Dropdown-Menüs und Filter
Produktfilter, Kategorie-Dropdowns und Sortieroptionen, die nur mit der Maus funktionieren, sind häufige Barrieren. Tastaturnutzer müssen sie genauso bedienen können. Komplexe interaktive Komponenten brauchen ARIA-Rollen und Tastaturunterstützung, damit sie mit Hilfstechnologien funktionieren.
So machst du deinen Shop barrierefrei
Für Barrierefreiheit musst du keinen teuren Berater engagieren oder Spezialsoftware kaufen. Beginne mit den Grundlagen:
1. Schreibe Alt-Texte für alle Produktbilder
Das ist die wirkungsvollste einzelne Änderung. Gehe deine Produkte durch und schreibe für jedes Bild einen beschreibenden Alt-Text. Beschreibe das Produkt, seine Farbe, sein Material, seinen Zustand und seine besonderen Merkmale. Teste deine Alt-Texte, indem du sie laut liest. Versteht jemand, der das Bild nicht sehen kann, das Produkt? Wenn nicht, verbessere ihn.
2. Sorge dafür, dass alle Formulare richtig beschriftet sind
Jedes Formularfeld muss in deinem Code ein zugeordnetes Label-Element haben. Verlasse dich nicht auf Platzhaltertext. Entferne den Platzhaltertext, sobald das Feld den Fokus hat, oder behalte ihn, ergänze aber ein echtes Label. Gruppiere Checkboxen und Radio-Buttons und beschrifte sie klar. Fehlermeldungen in Formularen sollten konkret sein und genau sagen, was zu korrigieren ist.
3. Stelle sicher, dass die Tastaturnavigation funktioniert
Teste deinen ganzen Shop nur mit der Tastatur. Drücke die Tabulatortaste, um zu navigieren. Erreichst du jeden Button, jeden Link und jedes Formular? Siehst du, wo der Fokus liegt? Ist die Tab-Reihenfolge logisch (von links nach rechts, von oben nach unten)? Wenn Tastaturnutzer hängen bleiben oder etwas nicht erreichen, behebe das. Die meisten Barrieren sind Tastaturbarrieren.
4. Prüfe und verbessere den Farbkontrast
Nutze einen kostenlosen Kontrastprüfer für deine Produktseite, Buttons, Links und Formularbeschriftungen. Stelle sicher, dass Text einen Kontrast von 4,5:1 bei normalem Text und 3:1 bei großem Text (18 pt oder größer) erreicht. Verlasse dich nicht allein auf Farbe, um Informationen zu vermitteln (z. B. „rote Artikel sind im Angebot“). Ergänze Textlabels oder Icons, die die Bedeutung stützen.
5. Korrigiere deine Überschriftenstruktur
Prüfe den Aufbau deiner Seite. Du solltest eine H1 haben (den Haupttitel der Seite), dann H2 für Hauptabschnitte und H3 für Unterabschnitte. Überspringe nie Überschriftenebenen. Nutze Überschriften, um Inhalte logisch zu gliedern, nicht zur Gestaltung. Wenn du gestalteten Text brauchst, der keine echte Überschrift ist, nutze ein div und CSS, kein Überschriften-Tag.
6. Schreibe klare Link- und Button-Texte
Nutzer von Screenreadern rufen oft eine Liste aller Links einer Seite auf. Links sollten auch ohne Zusammenhang Sinn ergeben. „Mehr über Versandoptionen erfahren“ ist besser als „Mehr erfahren“. „Produktbewertungen ansehen“ ist besser als „Bewertungen lesen“. Buttons sollten ihre Aktion klar beschreiben: „In den Warenkorb“, „Zur Kasse“, „Für später merken“.
7. Teste mit Hilfstechnologie
Lade einen kostenlosen Screenreader herunter, für Windows oder nutze die eingebauten Bedienungshilfen auf Mac und iPhone. Höre dir an, wie deine Seite klingt. Kannst du einen Kauf nur mit Tastatur und Screenreader abschließen? Das ist der echte Test für Barrierefreiheit. Viele Barrieren werden offensichtlich, wenn du deinen eigenen Shop als blinder Nutzer oder nur mit der Tastatur bedienst.
Tests und Prüfungen zur Barrierefreiheit
Teste deinen Shop nach den Änderungen auf Barrierefreiheit. Beginne mit diesen Werkzeugen:
Automatische Testwerkzeuge
Kostenlose Prüfwerkzeuge, darunter Lighthouse (in Chrome eingebaut), scannen deine Seiten und markieren häufige Probleme wie fehlende Alt-Texte, geringen Kontrast und schlechte Überschriftenstruktur. Solche Werkzeuge finden vielleicht 30 % der Probleme bei der Barrierefreiheit. Sie sind also ein Anfang und nicht die ganze Antwort. Nutze sie für einen schnellen Scan, nimm aber nicht an, dass ein fehlerfreier Scan bedeutet, dass deine Seite voll barrierefrei ist.
Test mit der Tastatur
Navigiere durch deine Seite nur mit Tab, Umschalt+Tab, Enter und den Pfeiltasten. Keine Maus. Das ist der wichtigste Test. Kannst du jede Aufgabe erledigen? Bleibst du hängen? Ist der Fokus sichtbar? Ergibt die Tab-Reihenfolge Sinn? Wenn die Tastaturnavigation nicht funktioniert, erfüllt dein Shop den Standard für Barrierefreiheit nicht, egal was automatische Werkzeuge melden.
Test mit dem Screenreader
Höre deine Seite mit einem Screenreader an, unter Windows mit einem kostenlosen Programm, auf dem Mac mit dem eingebauten. Beschreibt der Screenreader Produktbilder klar? Verstehst du die Formularbeschriftungen? Ergibt die Navigation Sinn? Gibt es unerklärte Buttons oder Links? Professionelle Prüfungen zur Barrierefreiheit beauftragen oft blinde Tester, deine Seite zu nutzen, aber mit einem einfachen eigenen Screenreader-Test findest du große Probleme schon selbst.
Manuelle Code-Prüfung
Prüfe deinen HTML-Code auf sauberes semantisches Markup. Buttons sollten Button-Elemente sein, keine gestalteten divs. Links sollten Anker-Tags sein. Formularfelder brauchen Label-Elemente. Überschriften sollten h1-, h2-, h3-Tags in Reihenfolge sein, nicht h1, h3, h2. Gutes semantisches HTML ist die Grundlage der Barrierefreiheit.
So hilft dir WEMASY bei der Barrierefreiheit
Der Website-Builder von WEMASY ist mit Blick auf Barrierefreiheit gebaut. Die Plattform bietet semantische HTML-Struktur, saubere Formulare mit zugänglichen Beschriftungen, per Tastatur bedienbare Menüs und Warenkorb-Funktionen und Werkzeuge, mit denen du Alt-Texte für Bilder einfach ergänzt. Wenn du deinen Shop mit WEMASY baust, ist das zugrunde liegende HTML schon auf Barrierefreiheit ausgelegt. Du erbst keinen unzugänglichen Code von der Plattform.
Das heißt nicht, dass deine Seite automatisch voll barrierefrei ist. Du musst weiterhin gute Alt-Texte liefern, klare Sprache nutzen und mit echten Nutzern testen. Aber die Basis von WEMASY beseitigt viele häufige Barrieren, die andere E-Commerce-Plattformen plagen. Was jeder Tarif enthält, siehst du auf unserer Preisseite.
Der geschäftliche Nutzen von Barrierefreiheit
Über die rechtliche Pflicht hinaus ist Barrierefreiheit gutes Geschäft. Barrierefreie Seiten sind für alle besser nutzbar, nicht nur für Menschen mit Behinderungen. Klare Sprache, guter Kontrast, logische Struktur und Tastaturnavigation helfen älteren Nutzern, Nutzern auf Mobilgeräten, Nutzern in lauter Umgebung und Nutzern mit langsamem Internet. Eine Seite, die für Menschen mit Behinderungen zugänglich ist, ist eine bessere Seite für alle Nutzer.
Noch direkter: Jeder vierte Erwachsene in den USA hat eine Behinderung. Das sind etwa 65 Millionen Menschen. Wenn dein Shop nicht barrierefrei ist, schließt du einen riesigen Markt aus. Du lässt auch Geld liegen. Blinde und sehbehinderte Kunden geben online Milliarden aus. Sie wollen in deinem Shop kaufen. Ermögliche es ihnen.
Rechtlich ist das Risiko real. Im Jahr 2025 wurden über 5.000 Klagen wegen Barrierefreiheit von Websites eingereicht. E-Commerce-Seiten machen 70 % dieser Fälle aus. Eine Abmahnung wegen Verstößen gegen die Barrierefreiheit kostet Zeit und Anwaltsgebühren in der Verteidigung. Ein Vergleich ohne Behebung der eigentlichen Probleme lädt nur zu weiteren Forderungen ein. Am klügsten ist es, deine Seite jetzt zu korrigieren, deine Bemühungen zu dokumentieren und das Problem ganz zu vermeiden.
So fängst du an
Wenn dein Shop nicht barrierefrei ist, keine Panik. Beginne mit den wirkungsvollsten Korrekturen: Alt-Texte, Tastaturnavigation und Kontrast. Diese drei Änderungen beseitigen die meisten Barrieren. Teste mit Tastaturnavigation und einem Screenreader. Behebe die Probleme, die du findest. Dokumentiere deine Arbeit. Teste regelmäßig erneut, besonders nach Änderungen an deiner Seite. Barrierefreiheit ist kein einmaliges Projekt, sondern eine fortlaufende Praxis des inklusiven Bauens.
Häufige Fragen
Gilt der ADA wirklich für meinen kleinen Shop?
Ja. Der ADA gilt für alle öffentlich zugänglichen Unternehmen, unabhängig von der Größe. Für kleine Unternehmen gibt es keine Ausnahme. Wenn du online verkaufst, ist deine Website erfasst.
Was ist der Unterschied zwischen barrierefrei und konform?
Barrierefrei heißt, dass Menschen mit Behinderungen deine Seite tatsächlich nutzen können. Konform heißt, dass sie einen technischen Standard wie WCAG 2.1 Level AA erfüllt. Eine Seite kann den Standard technisch erfüllen und trotzdem schwer nutzbar sein, oder sie kann sehr gut nutzbar und technisch nicht perfekt sein. Das Ziel ist beides: in der Praxis barrierefrei und konform mit dem Standard.
Muss ich jemanden beauftragen, um meinen Shop barrierefrei zu machen?
Nicht unbedingt. Wenn dein Shop grundlegende Probleme hat (fehlende Alt-Texte, schlechter Kontrast, defekte Tastaturnavigation), kannst du viele davon selbst beheben. Schreibe Alt-Texte, prüfe den Kontrast mit einem kostenlosen Werkzeug, teste mit der Tastatur und einem Screenreader. Wenn deine Seite auf einer modernen Plattform mit sauberer HTML-Struktur läuft, ist die Verbesserung der Barrierefreiheit oft unkompliziert. Größere Seiten mit komplexen Funktionen profitieren womöglich von einer professionellen Prüfung, aber kleine Shops können ihre größten Barrieren oft selbst beseitigen.
Was tun, wenn ich eine Abmahnung wegen Barrierefreiheit bekomme?
Nimm sie ernst. Ignoriere sie nicht. Abmahnungen setzen meist eine Frist zur Behebung der Probleme. Arbeite mit deinem Entwickler oder dem Support deiner Plattform an den genannten Verstößen. Dokumentiere alles, was du tust. Vielleicht willst du auch einen Anwalt mit Erfahrung im Recht der Barrierefreiheit hinzuziehen. Ein Vergleich ohne Behebung der eigentlichen Probleme ist keine Lösung auf Dauer. Korrigiere die Seite.
Verlangsamt Barrierefreiheit die Ladezeiten meiner Seite?
Nein. Barrierefreiheit und Performance sind getrennte Themen. Eine Seite kann schnell und nicht barrierefrei sein oder langsam und barrierefrei. Semantisches HTML (die Code-Struktur, die für Barrierefreiheit nötig ist) ist oft leichter und schneller als schlecht geschriebener Code. Viele Verbesserungen der Barrierefreiheit, etwa eine saubere Überschriftenstruktur und klare Sprache, haben keinen Einfluss auf die Geschwindigkeit.
Deckt WCAG 2.1 Level AA alles ab, was ich für die rechtliche Konformität brauche?
WCAG 2.1 Level AA ist der Standard, auf den sich die meisten Rechtsfälle zur Barrierefreiheit beziehen. Gerichte haben ihn als Maßstab genutzt, um zu beurteilen, ob eine Website barrierefrei ist. Die Einhaltung von WCAG 2.1 Level AA ist der beste Weg, zu zeigen, dass du Barrierefreiheit ernst genommen und den rechtlichen Standard erfüllt hast.
Weiterlesen: Datenschutzerklärung, Cookie-Einwilligung und DSGVO für deinen Shop und So schützt du deine Marke und deine Produkte vor Nachahmung.