Leitfaden · Europa
Barrierefreiheit im Onlineshop: die EAA-Checkliste des Kaufprozesses, Seite für Seite
Seit dem 28. Juni 2025 ist Barrierefreiheit im Onlineshop keine bloße gute Praxis mehr: Der European Accessibility Act verlangt, dass Websites und Apps des Onlinehandels es einem Menschen mit Behinderung ermöglichen, selbstständig zu suchen, auszuwählen, zu bestellen und zu bezahlen. Die meisten Seiten zum Thema zählen allgemeine Grundsätze auf; diese hier folgt dem Kaufprozess Seite für Seite, von der Startseite bis zur Rechnung, und nennt für jeden Schritt die Prüfungen, die Sie selbst durchführen können, das betroffene WCAG-Erfolgskriterium und die Mängel, die in Audits am häufigsten auffallen. Am Ende stehen die Liste der aufzubewahrenden Nachweise, die Fragen an Ihre Zahlungsdienstleister und ein 90-Tage-Plan für einen barrierefreien Onlineshop.
Barrierefreiheit im Onlineshop: welche Shops betroffen sind
Mit dem European Accessibility Act ist die Richtlinie (EU) 2019/882 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen gemeint. Sie erfasst Dienstleistungen im elektronischen Geschäftsverkehr, die Verbrauchern erbracht werden. Die Richtlinie definiert sie als Dienstleistungen, die im Fernabsatz über Websites und auf Mobilgeräten angebotene Dienste elektronisch und auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden. Drei Bedingungen kommen also zusammen: ein online geschlossener Vertrag, mit einem Verbraucher, über eine Website oder eine App.
Entscheidend ist nicht die Branche, sondern die Funktion der Seite. Eine reine Präsentationswebsite, die eine Marke vorstellt, ohne eine Bestellung zu ermöglichen, ist insoweit keine Dienstleistung im elektronischen Geschäftsverkehr. Sobald sie es erlaubt, etwas zu kaufen, eine Leistung zu buchen, ein Abonnement abzuschließen oder zu bezahlen, fällt sie in den Anwendungsbereich, ob sie nun Schuhe, Konzertkarten, Yogakurse oder Parkplätze verkauft. Die branchenspezifischen Einzelheiten, insbesondere für Banken und Personenverkehr, behandelt der Beitrag darüber, was die Behörden nach dem European Accessibility Act prüfen.
| Situation | Unterliegt dem EAA? | Worauf zu achten ist |
|---|---|---|
| Onlineshop, der an Privatpersonen verkauft | Ja | Der gesamte Ablauf, von der Suche bis zum Kundendienst nach dem Kauf, muss nutzbar sein |
| Mobile App für Bestellungen oder Buchungen | Ja | iOS- und Android-Apps sind ebenso erfasst wie die Website |
| Bestellplattform ausschließlich für Geschäftskunden | Nein, nicht als elektronischer Geschäftsverkehr | Prüfen Sie, ob eine Privatperson tatsächlich nicht bestellen kann: Ein bloßes optionales Feld „USt-IdNr.“ genügt nicht |
| Gemischter Shop für Privat- und Geschäftskunden | Ja, für den Ablauf für Verbraucher | Oft dient ein und derselbe Bestellprozess beiden Zielgruppen: Er muss konform gemacht werden |
| Kleinstunternehmen, das Dienstleistungen erbringt: weniger als 10 Beschäftigte und Jahresumsatz oder Jahresbilanzsumme von höchstens 2 Millionen Euro | Von der Richtlinie ausgenommen | In Belgien gilt der Ausschluss nur bis zum 28. Juni 2030; bewahren Sie die Berechnung der Schwellenwerte auf |
| Schweizer oder britisches Unternehmen, das an Verbraucher in der Union verkauft | Ja, für diese Verkäufe | Die Anforderungen gelten für jede Dienstleistung, die einem Verbraucher in der Union erbracht wird, unabhängig vom Sitz des Verkäufers |
| Präsentationswebsite ohne Onlinebestellung | Nein, nicht als elektronischer Geschäftsverkehr | Sie fällt in den Anwendungsbereich, sobald ein Buchungs- oder Zahlungsmodul hinzukommt |
In Frankreich können sich zwei Regelungen überlagern. Ein Unternehmen, dessen in Frankreich erzielter Umsatz 250 Millionen Euro übersteigt, unterliegt außerdem Artikel 47 des Gesetzes vom 11. Februar 2005: Erklärung zur Barrierefreiheit, Konformitätsvermerk auf der Startseite, mehrjähriges Schema, Bewertung nach dem RGAA. Die Einzelheiten dieser doppelten Pflicht erläutert der Beitrag über die Pflichten zur digitalen Barrierefreiheit in Frankreich. Für ein kleines oder mittleres Unternehmen besteht der erste Schritt darin, zu prüfen, ob es die Ausnahme in Anspruch nehmen kann; dabei hilft die Seite digitale Barrierefreiheit für KMU und mittelständische Unternehmen.
Eine Website oder App ist kein „Produkt“ im Sinne der Richtlinie: Es gilt keine Übergangsfrist. Ein Onlineshop, der vor dem 28. Juni 2025 online war, muss seit diesem Datum barrierefrei sein. Es bleiben nur gezielte Ausnahmen, etwa für aufgezeichnete zeitbasierte Medien und Büro-Dateiformate, die vor diesem Datum veröffentlicht wurden, sowie die Fortführung von Dienstleistungsverträgen, die vor dem 28. Juni 2025 geschlossen wurden, längstens bis zum 28. Juni 2030.
Was der EAA konkret von einem barrierefreien Onlineshop verlangt
Anhang I der Richtlinie nennt keine Norm. Er legt Ergebnisse fest. Für alle Dienstleistungen verlangt er insbesondere, dass Websites und Apps auf konsistente und angemessene Weise wahrnehmbar, bedienbar, verständlich und robust sind und dass Informationen über die Funktionsweise der Dienstleistung und ihre Barrierefreiheitsmerkmale in barrierefreier Form bereitgestellt werden. Für den elektronischen Geschäftsverkehr kommen drei eigene Anforderungen hinzu, die das luxemburgische Überwachungsamt mit Lösungsbeispielen in seinem Leitfaden zu den zusätzlichen Anforderungen an den elektronischen Geschäftsverkehr (auf Französisch) erläutert:
- Informationen zur Barrierefreiheit der zum Verkauf angebotenen Produkte und Dienstleistungen bereitstellen, wenn der verantwortliche Wirtschaftsakteur, zum Beispiel der Hersteller, sie zur Verfügung stellt;
- die Funktionen für Identifizierung, Sicherheit und Zahlung barrierefrei gestalten, wenn sie im Rahmen der Dienstleistung angeboten werden;
- Identifizierungsmethoden, elektronische Signaturen, Sicherheits- und Zahlungsdienste anbieten, die wahrnehmbar, bedienbar, verständlich und robust sind.
Die dritte Anforderung hat die weitreichendsten Folgen. Sie betrifft genau die Bausteine, die der Händler nicht selbst entwickelt: die Zahlungsseite des Zahlungsdienstleisters, die starke Kundenauthentifizierung des Karteninhabers, das Signaturmodul eines Miet- oder Kreditvertrags. Das luxemburgische Amt nennt zwei Lösungsbeispiele: eine per Sprache bedienbare Zahlungsoberfläche, mit der eine blinde Person selbstständig einkaufen kann, und Identifizierungsdialoge, die ein Screenreader vorlesen kann.
In Frankreich übersetzt Artikel D. 412-57 des französischen Verbraucherschutzgesetzbuchs (Code de la consommation) diese Anforderungen in Verhaltenspflichten des Dienstleistungserbringers: die Dienstleistung gemäß den per Verordnung festgelegten Anforderungen gestalten und erbringen, schriftlich und mündlich Informationen darüber erstellen und veröffentlichen, wie die Dienstleistung sie erfüllt, und diese aufbewahren, solange die Dienstleistung angeboten wird, Verfahren einrichten, damit die Dienstleistung konform bleibt, bei Nichtkonformität Korrekturmaßnahmen ergreifen und die Behörden informieren und schließlich auf begründetes Verlangen die Unterlagen vorlegen, die die Konformität belegen.
Um nachzuweisen, dass ein Ablauf diese Ergebnisse erreicht, stützen sich Auditorinnen und Auditoren auf die Web Content Accessibility Guidelines (WCAG) 2.2 (englische Originalfassung), seit dem 5. Oktober 2023 Empfehlung des W3C, und auf die europäische Norm EN 301 549. Noch verleiht keine Fassung dieser Norm eine Konformitätsvermutung nach dem EAA, weil keine im Amtsblatt der Union zitiert ist. In der Praxis ist die Stufe AA der WCAG 2.2 das sicherste Ziel: An ihr orientiert sich die Version 4.1.1 der Norm, die am 2. September 2026 veröffentlicht und noch nicht im Amtsblatt zitiert wurde. Die Entsprechungen zwischen WCAG, EN 301 549, RGAA und RAWeb zeigt unser Vergleich der Normen der digitalen Barrierefreiheit.
So nutzen Sie diese Checkliste zur Barrierefreiheit im Onlineshop
Die folgende Checkliste ist wie der Weg einer Kundin oder eines Kunden aufgebaut. Für jede Seite nennt sie, was zu prüfen ist, in Klammern die Nummer des entsprechenden WCAG-2.2-Erfolgskriteriums und den häufigsten Mangel. Sie ersetzt kein vollständiges Audit: Sie ermöglicht es einem Produktteam, an einem Tag die größten Barrieren zu erkennen, Korrekturen zu priorisieren und ein Audit unter guten Voraussetzungen vorzubereiten.
Für die meisten Prüfungen genügen vier Handgriffe, ganz ohne technische Kenntnisse:
- Ziehen Sie die Maus ab. Bewegen Sie sich mit der Tabulatortaste durch die Seite, mit Umschalt + Tab zurück, lösen Sie Elemente mit der Eingabetaste oder der Leertaste aus und schließen Sie mit Esc. Sie müssen jederzeit sehen, wo sich der Fokus befindet, und alles erledigen können.
- Schalten Sie einen Screenreader ein. VoiceOver auf iPhone und Mac, TalkBack auf Android, das kostenlose NVDA unter Windows. Hören Sie, was bei jeder Schaltfläche, jedem Feld und jeder Meldung angesagt wird: ein Name, eine Rolle, ein Zustand.
- Zoomen Sie auf 200 % und verkleinern Sie das Fenster dann auf 320 Pixel Breite. Der Text muss sich vergrößern, ohne abgeschnitten zu werden, und die Seite muss ohne horizontales Scrollen lesbar sein (Kriterien 1.4.4 und 1.4.10).
- Testen Sie auf einem echten Smartphone. Die Mehrheit der Bestellungen läuft über Mobilgeräte: Prüfen Sie die Größe der Touch-Ziele, komplexe Gesten und die Bildschirmausrichtung.
Halten Sie jeden Mangel mit einem Screenshot, der Adresse der Seite, dem verwendeten Browser und dem verwendeten Hilfsmittel fest. Diese Aufstellung wird Ihr erstes Dokument für die Nachverfolgung, und sie ermöglicht es der Auditorin oder dem Auditor, schnell zu prüfen, ob die gefundenen Probleme behoben wurden.
Schritt 1: Startseite, Menü und Banner
Auf der Startseite finden sich selten die gravierendsten Barrieren, aber sie enthält die Komponenten, die auf allen Seiten stören: Cookie-Banner, Pop-up für die Newsletter-Anmeldung, Hauptmenü, Werbekarussell. Ein Mangel an dieser Stelle wiederholt sich auf der gesamten Website.
- Das Cookie-Banner erhält beim Öffnen den Fokus, ist mit dem Screenreader lesbar und lässt sich per Tastatur schließen; seine Schaltflächen „Akzeptieren“ und „Ablehnen“ haben ausreichende Kontraste (2.1.1, 1.4.3). Häufiger Mangel: ein Banner, das für den Screenreader unsichtbar ist und trotzdem alle Klicks blockiert.
- Ein Sprunglink führt direkt zum Hauptinhalt (2.4.1).
- Das Mega-Menü öffnet und schließt sich per Tastatur, und jede Unterkategorie ist mit Tab oder den Pfeiltasten erreichbar; die Schaltfläche, die es öffnet, gibt ihren Zustand „erweitert“ oder „reduziert“ aus (2.1.1, 4.1.2).
- Ein automatisch laufendes Karussell lässt sich anhalten (2.2.2), und seine Pfeile tragen einen aussagekräftigen Namen, nicht nur ein Symbol.
- Das Pop-up für die Newsletter-Anmeldung erscheint nicht mitten in einer Eingabe, erhält den Fokus, schließt sich mit Esc und gibt den Fokus an die Stelle zurück, an der er war.
- Fixierte Werbebanner verdecken das fokussierte Element nicht vollständig (2.4.11), ein häufiger Mangel bei „Versandkostenfrei“-Leisten, die auf dem Smartphone am unteren Bildschirmrand kleben.
- Logo, Warenkorbsymbol und Kontosymbol haben einen zugänglichen Namen; das Warenkorbsymbol nennt außerdem die Anzahl der Artikel (1.1.1, 4.1.2).
Der Kontrast von Texten wird nach Kriterium 1.4.3 gemessen: 4,5:1 für normalen Text, 3:1 für großen Text. Durchgestrichene Preise in Hellgrau, Rechtshinweise in Kleinschrift und weiße „Neu“-Etiketten auf Pastellgrund fallen oft durch. Kriterium 1.4.11 verlangt außerdem einen Kontrast von 3:1 für die Umrandungen von Formularfeldern, wenn sie zum Erkennen der Felder dienen, und für Symbole, die zum Verständnis nötig sind.
Schritt 2: Suche, Produktlisten und Filter
Die Suche ist für Kundinnen und Kunden mit Screenreader oft der erste Schritt, weil das Durchblättern eines Katalogs Seite für Seite lange dauert. Ergebnislisten und Filter sind zudem der Ort, an dem sich schlecht ausgegebene dynamische Komponenten häufen.
- Das Suchfeld hat eine Beschriftung, nicht nur einen Platzhaltertext, der bei der Eingabe verschwindet (3.3.2).
- Vorschläge, die während des Tippens erscheinen, werden angesagt und lassen sich mit den Pfeiltasten durchgehen; die Eingabetaste startet die Suche, ohne dass man festhängt.
- Die Zahl der Ergebnisse wird nach einer Suche oder dem Setzen eines Filters angesagt, ohne den Fokus zu verschieben: Es handelt sich um eine Statusmeldung (4.1.3).
- Jeder Filter ist ein echtes Kontrollkästchen oder eine echte Schaltfläche, deren Zustand „ausgewählt“ oder „angewendet“ ausgegeben wird (4.1.2). Häufiger Mangel: anklickbare Farbtupfer, die als „Schaltfläche, Schaltfläche, Schaltfläche“ angesagt werden.
- Der Preisschieberegler mit zwei Griffen hat eine Alternative: zwei Felder „Mindestpreis“ und „Höchstpreis“ oder per Tastatur einstellbare Griffe (2.1.1, 2.5.7).
- Das Ändern der Sortierung oder eines Filters lädt die Seite nicht ohne Vorwarnung neu und schickt den Fokus nicht an den Seitenanfang zurück (3.2.2).
- In der Liste hat jede Produktkarte einen einzigen Hauptlink, dessen Text den Produktnamen enthält, statt drei identischer Links „Ansehen“ (2.4.4).
- Endloses Scrollen wird durch eine Schaltfläche „Weitere Produkte anzeigen“ ergänzt und macht die Fußzeile nicht unerreichbar, in der oft Kontakt und Allgemeine Geschäftsbedingungen stehen.
Ein einfacher Test fasst diesen Schritt zusammen: Suchen Sie mit einem Screenreader nach „weiße Sneaker“, filtern Sie nach Ihrer Schuhgröße und sortieren Sie nach aufsteigendem Preis. Wenn Sie nicht bei jedem Schritt wissen, wie viele Produkte noch angezeigt werden und welche Filter aktiv sind, ist der Ablauf nicht selbstständig nutzbar.
Schritt 3: die barrierefreie Produktseite
Auf der Produktseite fällt die Kaufentscheidung. Sie vereint Bilder, Variantenauswahl, Preise, Bewertungen und oft ein Video. Hier verlangt Anhang I auch, die Informationen zur Barrierefreiheit des verkauften Produkts bereitzustellen, wenn der Hersteller sie zur Verfügung stellt.
| Element | Was zu prüfen ist | Kriterium | Häufiger Mangel |
|---|---|---|---|
| Produktfotos | Ein nützlicher Alternativtext: Farbe, Material, auf dem Foto sichtbares Detail; nicht der Dateiname | 1.1.1 | Alle Bilder tragen denselben Text, den Produktnamen |
| Galerie und Zoom | Miniaturen per Tastatur erreichbar, Zoom ohne Maus nutzbar, aktives Bild wird angesagt | 2.1.1, 4.1.2 | Zoom nur beim Überfahren mit der Maus, per Tastatur und auf dem Smartphone unbrauchbar |
| Farben und Größen | Jedes Auswahlfeld hat einen Namen („Marineblau“, „Größe 42“) und einen ausgegebenen Auswahlzustand | 1.1.1, 4.1.2 | Farbfelder ohne Namen; nicht verfügbare Größe nur durch Ausgrauen gekennzeichnet |
| Verfügbarkeit | Der Lagerbestand wird als Text angegeben, nicht nur durch einen grünen oder roten Punkt | 1.4.1 | „Auf Lager“ allein durch eine Farbe signalisiert |
| Preis und Rabatt | Alter und neuer Preis werden im Text unterschieden, nicht nur durch Durchstreichen | 1.3.1 | Der Screenreader liest „89 Euro 59 Euro“, ohne zu sagen, welcher Preis gilt |
| Kundenbewertungen | Die Bewertung steht als Text da („4,2 von 5, 128 Bewertungen“), nicht nur als Sterne | 1.1.1 | Dekorative Sterne ohne Textentsprechung |
| Größentabelle | Eine echte Tabelle mit Überschriften, in einem Fenster, das sich per Tastatur schließen lässt | 1.3.1, 2.1.2 | Größentabelle als Bild |
| Produktvideo | Untertitel, benannte Steuerelemente des Players, keine automatische Wiedergabe mit Ton | 1.2.2, 1.4.2 | Video startet automatisch, Pause-Schaltfläche ohne Namen |
| Schaltfläche „In den Warenkorb“ | Benannte Schaltfläche, Bestätigung des Hinzufügens wird angesagt, ohne dass die Position verloren geht | 4.1.2, 4.1.3 | Stilles Hinzufügen: Die Person weiß nicht, ob der Artikel im Warenkorb liegt |
Die Information zur Barrierefreiheit des Produkts ist eine eigene Anforderung des elektronischen Geschäftsverkehrs, die oft vergessen wird. Sie betrifft vor allem Produkte, die selbst unter den EAA fallen oder deren Hersteller ihre Barrierefreiheit dokumentiert: einen Computer, einen E-Book-Reader, ein Smartphone, einen Fernseher. Stellt der Hersteller diese Informationen bereit, muss die Produktseite sie in barrierefreier Form wiedergeben. Sehen Sie dafür ein eigenes Feld in Ihrem Produktinformationssystem vor und fordern Sie die Angaben bei der Listung neuer Artikel von Ihren Lieferanten an.
Die Texte zählen ebenso viel wie der Code. Ein gut geschriebener Alternativtext für ein Kleid beschreibt, was eine sehende Person beim Betrachten des Fotos erfasst: den Schnitt, die Länge, das Muster. Für eine Produktredaktion ist das eine Fähigkeit, die sich in wenigen Stunden erlernen lässt, und genau damit beginnen oft unsere Schulungen zur digitalen Barrierefreiheit für Content-Teams.
Schritt 4: Warenkorb und Mini-Warenkorb
Der Warenkorb ist eine sehr dynamische Seite: Jede Änderung der Menge berechnet die Summen, die Versandkosten und manchmal die Rabatte neu. Für eine Person, die den Bildschirm nicht sieht, ist jede nicht angesagte Änderung eine verlorene Information.
- Die Mengenschaltflächen „+“ und „−“ haben einen vollständigen Namen („Menge der weißen Sneaker erhöhen“), und die neue Menge wird angesagt (4.1.2, 4.1.3).
- Die Schaltfläche zum Entfernen nennt den Artikel, den sie entfernt, und das Entfernen wird durch eine Meldung bestätigt (2.4.4, 4.1.3).
- Die Aktualisierung der Gesamtsumme und der Versandkosten wird angesagt, oder zumindest bleibt die Gesamtsumme an einer vorhersehbaren Stelle gut lesbar.
- Das Feld für den Gutscheincode hat eine Beschriftung; ein abgelehnter Code erzeugt eine Fehlermeldung als Text, die mit dem Feld verknüpft ist (3.3.1).
- Der Mini-Warenkorb, der sich als Seitenleiste öffnet, erhält den Fokus, schließt sich mit Esc und lässt den Fokus nicht hinter sich in die Seite entweichen (2.4.3).
- Ein Warenkorb, der „10 Minuten reserviert“ ist, oder eine ablaufende Sitzung warnt die Nutzerin oder den Nutzer, lässt mindestens zwanzig Sekunden Zeit, die Frist durch eine einfache Aktion zu verlängern, und erlaubt mindestens zehn Verlängerungen (2.2.1).
- Touch-Ziele messen mindestens 24 mal 24 CSS-Pixel oder haben ausreichenden Abstand (2.5.8): Die kleinen Löschkreuze auf dem Smartphone sind eine häufige Fehlerquelle.
Zusatzverkäufe werfen ein besonderes Problem auf. Blöcke wie „Das könnte Ihnen auch gefallen“, die zwischen Warenkorb und Bestellschaltfläche eingefügt werden, verlängern den Weg per Tastatur und mit dem Screenreader. Platzieren Sie sie nach der Hauptschaltfläche oder in einem Bereich, der sich leicht überspringen lässt.
Schritt 5: Kontoerstellung, Anmeldung und Captcha
Kontoerstellung und Anmeldung sind die Seiten, auf denen Mängel zu echten Blockaden werden. Eine blinde Person kann ein schlecht beschriebenes Bild auf einer Produktseite übergehen; ein Captcha, das sie nicht wahrnimmt, kann sie nicht umgehen. Hier greift auch die Anforderung von Anhang I zu den Identifizierungsmethoden.
- Bieten Sie die Bestellung ohne Konto an. Ein Gastzugang verringert die Zahl der Seiten und Felder. Er ist keine Pflicht, aber der einfachste Weg, die Risiken zu begrenzen.
- Beschriften Sie jedes Feld und geben Sie seinen Zweck an. Die Felder für Name, E-Mail-Adresse, Telefonnummer und Postanschrift tragen das passende autocomplete-Attribut, damit der Browser sie automatisch ausfüllen kann (1.3.5); Hinweise, etwa zum Passwortformat, stehen vor der Eingabe (3.3.2).
- Erlauben Sie das Einfügen von Passwort und empfangenem Code. Kriterium 3.3.8 der WCAG 2.2 verbietet es, ohne Alternative einen kognitiven Funktionstest zu verlangen, etwa sich Zeichen zu merken oder sie abzuschreiben: Kopieren und Einfügen sowie Passwortmanager müssen funktionieren.
- Ersetzen Sie das visuelle Captcha. Ein Captcha mit Bildern oder verzerrten Zeichen braucht eine Alternative, die nicht auf derselben Fähigkeit beruht. Lösungen, die das Verhalten im Hintergrund ohne Zutun der Nutzerin oder des Nutzers auswerten, oder eine Bestätigung per E-Mail bereiten weniger Schwierigkeiten.
- Zeigen Sie eine Schaltfläche zum Einblenden des Passworts. Sie hilft Menschen mit motorischen Einschränkungen oder Gedächtnisproblemen und muss selbst einen ausgegebenen Namen und Zustand haben.
- Formulieren Sie hilfreiche Fehlermeldungen. „Ungültige E-Mail-Adresse: Das Zeichen @ fehlt“ statt „Eingabefehler“, neben dem Feld platziert und dem Screenreader angesagt (3.3.1, 3.3.3).
Der per SMS gesendete Einmalcode verdient einen eigenen Test auf dem Smartphone. Man muss die App verlassen, die Nachricht lesen und zurückkehren können, um den Code vor Ablauf einzugeben. Das automatische Einfügen des Codes durch das Betriebssystem hilft sehr, vorausgesetzt, das Feld ist richtig ausgezeichnet.
Schritt 6: Versand, Zahlung und starke Kundenauthentifizierung
Den Bestellprozess, den Checkout, prüfen Behörden und Beschwerdeführende zuerst, weil ein Mangel dort den Kauf selbst verhindert. Er mischt Formulare, die der Händler entwickelt hat, mit Komponenten von Dritten: Karte der Abholstellen, Seite des Zahlungsdienstleisters, Authentifizierungsfenster der Bank der Kundin oder des Kunden.
Adresse und Versandart
- Die Rechnungsadresse kann per Kontrollkästchen aus der Lieferadresse übernommen werden, ohne erneute Eingabe (3.3.7).
- Die Abholstelle lässt sich zusätzlich zur interaktiven Karte, die selten per Tastatur und mit dem Screenreader nutzbar ist, über eine nach Entfernung sortierte Textliste auswählen (1.1.1, 2.1.1).
- Als Raster dargestellte Lieferzeitfenster geben für jedes Fenster Datum, Uhrzeit, Preis und Verfügbarkeit als Text an, und das gewählte Zeitfenster wird als ausgewählt ausgegeben (1.3.1, 4.1.2).
- Die Versandarten sind echte Optionsfelder, die unter einer Legende gruppiert sind (1.3.1).
Zahlung und starke Kundenauthentifizierung
- Die Kartenfelder, die oft in einem Rahmen des Zahlungsdienstleisters eingebettet sind, haben jeweils eine ausgegebene Beschriftung, auch Ablaufdatum und Prüfnummer (3.3.2, 4.1.2).
- Der eingebettete Rahmen hat einen Titel, und der Fokus gelangt per Tastatur normal hinein und wieder heraus (2.4.3).
- Zahlungsarten, die als Logos dargestellt sind, haben einen Textnamen (1.1.1).
- Der Schritt der starken Kundenauthentifizierung, den die Bank der Kundin oder des Kunden anzeigt, läuft nicht ab, während eine Screenreader-Nutzerin oder ein Screenreader-Nutzer zwischen Apps wechselt; bei einem Fehlschlag erlaubt eine klare Meldung einen neuen Versuch.
- Vor dem Absenden ermöglicht eine Zusammenfassung, Artikel, Adresse und Betrag zu prüfen und zu korrigieren (3.3.4).
- Das Kontrollkästchen zur Annahme der Allgemeinen Geschäftsbedingungen hat eine anklickbare Beschriftung, und der Link zu den Bedingungen ist zugänglich; die letzte Schaltfläche sagt, was sie tut, zum Beispiel „Zahlungspflichtig bestellen“, und ist nicht bloß ein Pfeil.
Eine verlässliche Diagnose besteht darin, eine echte Bestellung bis zur Zahlung durchzuspielen, mit einem Screenreader zuerst am Computer und dann auf dem Smartphone, mit einer Testkarte des Zahlungsdienstleisters. Bei diesem Szenario bringt ein Konformitätsaudit nach EN 301 549 und WCAG den größten Nutzen: Es listet die Mängel auf, stellt aber auch fest, wer sie beheben muss, der Händler oder der Dienstleister.
Der Händler bleibt Erbringer der Dienstleistung im elektronischen Geschäftsverkehr, auch wenn die Zahlungsseite bei einem Dienstleister gehostet wird. Ein Mangel des Zahlungsmoduls ist deshalb ein Mangel Ihrer Dienstleistung.
Schritt 7: Bestätigung, E-Mails, Rechnungen und Kundenservice
Der Ablauf endet nicht mit dem Klick auf „Bestellen“. Die Käuferin oder der Käufer muss verstehen können, dass die Bestellung aufgegeben wurde, die Lieferung verfolgen, die Rechnung einsehen, einen Artikel zurückschicken und den Kundenservice erreichen. Diese Seiten stammen oft aus anderen Werkzeugen als der Website selbst: E-Mail-Versandsoftware, Rechnungsgenerator, Retourenmanagement, Chatbot.
- Die Bestätigungsseite meldet klar den Erfolg der Bestellung und ihre Nummer, mit einem aussagekräftigen Seitentitel (2.4.2).
- Bestell- und Versandbestätigungen per E-Mail sind als Text lesbar, mit Überschriften, aussagekräftigen Links und Bildern mit Alternativtext; die Sendungsverfolgung beruht nicht auf einem Bild.
- Herunterladbare Rechnungen und Retourenscheine sind getaggte PDF-Dateien, oder ihr Inhalt steht im Kundenkonto als HTML bereit.
- Das Retourenformular folgt denselben Regeln wie der Bestellprozess: Beschriftungen, klare Fehlermeldungen, kein blockierendes Captcha.
- Der Link zu Hilfe und Kontakt steht auf allen Seiten an derselben Stelle (3.2.6, mit den WCAG 2.2 eingeführt).
- Ein Chatbot, falls vorhanden, ist per Tastatur und mit dem Screenreader bedienbar und nicht der einzige Weg zum Kundenservice: Ein Formular, eine E-Mail-Adresse oder ein Telefon bleiben verfügbar.
Anhang I erfasst gegebenenfalls auch die Unterstützungsdienste: Helpdesks, Callcenter, technischer Support, Relaisdienste und Schulungsdienste. Sie müssen Informationen über die Barrierefreiheit der Dienstleistung und ihre Kompatibilität mit assistiven Technologien über barrierefreie Kommunikationswege bereitstellen. Eine Kundenberaterin, die eine Screenreader-Nutzerin bis zur richtigen Schaltfläche lotsen kann, oder ein Berater, der die Bestellung über einen anderen Kanal aufnehmen kann, ist Teil der Konformität.
Zahlung, Bewertungen, Chat, Captcha: Drittkomponenten und Verantwortung
Ein durchschnittlicher Onlineshop setzt sich aus rund zehn externen Komponenten zusammen. Jede kann die Barrierefreiheit eines ansonsten konformen Ablaufs zerstören. Die Richtlinie sieht keine Übertragung der Verantwortung auf diese Anbieter vor: Gegenüber dem Verbraucher und der Behörde haftet der Erbringer der Dienstleistung im elektronischen Geschäftsverkehr. Die einzige wirksame Antwort liegt in Verträgen und Dokumentation.
| Komponente | Typisches Risiko | Vom Anbieter zu verlangen |
|---|---|---|
| Zahlungsseite oder Zahlungsrahmen | Felder ohne Beschriftung, zu schneller Ablauf, nicht angesagte Fehler | Aktueller Auditbericht nach WCAG 2.2 AA, Liste bekannter Mängel und Zeitplan für ihre Behebung |
| Starke Kundenauthentifizierung und elektronische Signatur | Biometrische Bestätigung ohne Alternative, kurze Fristen | Beschreibung der alternativen Methoden für Karteninhaber oder Unterzeichnende |
| Captcha und Betrugsabwehr | Visueller oder akustischer Test ohne Alternative | Modus ohne Interaktion oder dokumentierte Alternative |
| Kundenbewertungen | Sterne ohne Text, unzugängliches Formular zum Abgeben einer Bewertung | Auditbericht für das Widget und das Bewertungsformular |
| Karte der Abholstellen | Karte per Tastatur nicht bedienbar, keine Liste | Listenansicht oder Schnittstelle, mit der sich eine barrierefreie Liste anzeigen lässt |
| Chatbot | Fenster, das den Fokus an sich reißt, nicht angesagte Nachrichten | Testergebnisse mit Screenreadern, Möglichkeit zur Deaktivierung |
| Cookie-Banner | Banner, das die Seite blockiert, ohne wahrnehmbar zu sein | Auditbericht und barrierefreie Konfigurationsoptionen |
Verankern Sie diese Anforderungen in Ihren Verträgen und Ausschreibungen: erwartetes Niveau, vorzulegende Nachweise, Frist zur Behebung gemeldeter Mängel, Information bei neuen Versionen. Bei jeder Produktivsetzung prüft eine Abnahmeprüfung auf Barrierefreiheit, dass die neue Version der Komponente den Ablauf nicht verschlechtert. Kann ein Anbieter nicht mithalten, dokumentieren Sie die Alternative, die Sie Ihren Kundinnen und Kunden anbieten, und den Zeitplan für den Austausch.
Die zehn häufigsten Fehler in einem Onlineshop
Diese Fehler tauchen von Audit zu Audit wieder auf, unabhängig von der eingesetzten Plattform. Ihre Behebung ist selten teuer, wenn man sie im Theme oder in den gemeinsamen Komponenten angeht, einmal für alle Seiten.
- Schaltflächen ohne Namen. Symbole für Warenkorb, Merkliste und Schließen, Karussellpfeile: Der Screenreader sagt nur „Schaltfläche“ ohne weitere Angabe.
- Stumme Varianten. Farb- und Größenfelder ohne Namen und Zustand, die verhindern, den richtigen Artikel zu wählen.
- Stilles Hinzufügen zum Warenkorb. Keine angesagte Bestätigung: Die Person legt dasselbe Produkt dreimal in den Warenkorb, um sicherzugehen.
- Fenster, die den Fokus einsperren. Mini-Warenkorb, Newsletter-Pop-up oder Größentabelle, die sich per Tastatur nicht schließen lassen.
- Zu schwache Kontraste. Durchgestrichene Preise, Lieferhinweise und Texte auf Fotos unter 4,5:1.
- Formulare ohne Beschriftungen. Ein Platzhaltertext als einzige Beschriftung, der bei der Eingabe verschwindet.
- Vage Fehlermeldungen. „Ein Fehler ist aufgetreten“ in Rot oben auf der Seite, ohne Hinweis auf das betroffene Feld.
- Ein Captcha ohne Alternative. Ein visueller Test, der bei der Kontoerstellung oder bei der Zahlung verlangt wird.
- Eine ungetestete Zahlung. Der Rahmen des Dienstleisters wurde nie mit einem Screenreader oder auf dem Smartphone durchlaufen.
- Barrierefreiheit, die wieder verloren geht. Die Website wird korrigiert, dann bringt eine Werbekampagne oder ein neues Theme die Mängel zurück, weil vor der Veröffentlichung nicht geprüft wurde.
Die ersten fünf lassen sich in der Regel in den Komponenten des Themes beheben: Eine gut gebaute Schaltfläche, ein gut gebautes Auswahlfeld oder ein gut gebautes modales Fenster löst das Problem überall. Diese Arbeit leisten unsere auf Barrierefreiheit spezialisierten Entwicklerinnen und Entwickler gemeinsam mit Ihren Teams, wobei sie zuerst die meistgenutzten Komponenten korrigieren.
Aufzubewahrende Nachweise und Informationsseite zur Barrierefreiheit
Am Tag einer Kontrolle oder einer förmlichen Aufforderung lautet die Frage nicht nur „Ist die Website barrierefrei?“, sondern „Was können Sie belegen?“. In Frankreich kontrolliert die DGCCRF, die Behörde für Wettbewerb, Verbraucherschutz und Betrugsbekämpfung, die Dienstleistungen im elektronischen Geschäftsverkehr; ihre Bediensteten können die Herstellung der Konformität anordnen, und Verstöße sind Übertretungen der fünften Klasse (contraventions de cinquième classe). In Belgien kontrolliert die Wirtschaftsinspektion des FÖD Wirtschaft den elektronischen Geschäftsverkehr; in Luxemburg das Amt für die Überwachung der Barrierefreiheit von Produkten und Dienstleistungen (OSAPS). Die Regelungen der einzelnen Länder erläutern die Beiträge zu Belgien und Luxemburg.
| Dokument | Erwarteter Inhalt | Aktualisierung |
|---|---|---|
| Informationsseite zur Barrierefreiheit | Beschreibung der Dienstleistung, Funktionsweise, Art und Weise, wie sie die Anforderungen erfüllt, bekannte Einschränkungen, Kontakt | Bei jeder wesentlichen Änderung der Dienstleistung |
| Auditbericht | Prüfgrundlage, Datum, Stichprobe, getestete Abläufe, assistive Technologien, Ergebnisse | Mindestens einmal jährlich und nach jedem Relaunch |
| Datierter Maßnahmenplan | Mängel nach Schweregrad, verantwortliche Person, Frist, Status | Monatlich |
| Unterlagen der Anbieter | Auditberichte der Drittkomponenten, vertragliche Zusagen | Bei jeder neuen Version oder Vertragsverlängerung |
| Verfahren zur Sicherung der Konformität | Prüfungen vor der Veröffentlichung, Abnahmekriterien, Verantwortliche | Jährliche Überprüfung |
| Register der Meldungen | Anfragen von Kundinnen und Kunden, gegebene Antwort, Frist | Laufend |
| Berechnung der Ausnahmevoraussetzungen oder Ausnahmeakte | Beschäftigtenzahl und Schwellenwerte für ein Kleinstunternehmen, Beurteilung nach Anhang VI bei unverhältnismäßiger Belastung | Nach jedem abgeschlossenen Geschäftsjahr |
Die in Anhang V der Richtlinie vorgesehene Informationsseite ist kein weiterer juristischer Text. Von der Fußzeile aus verlinkt, beschreibt sie die Dienstleistung und erklärt, wie diese die Anforderungen erfüllt, in einem Format, das selbst barrierefrei ist. In Luxemburg stellt das Überwachungsamt eine Vorlage für ein Informationsblatt zu Dienstleistungen bereit, die unter das Gesetz vom 8. März 2023 fallen. Für ein französisches Unternehmen, das auch Artikel 47 unterliegt, kann diese Seite neben der Erklärung zur Barrierefreiheit stehen, sofern jede ihre eigenen Anforderungen erfüllt: Das Vorgehen beschreibt der Beitrag über die Erklärung zur Barrierefreiheit und ihre häufigen Fehler.
Ausnahmen werden dokumentiert, bevor man sich auf sie beruft. In Luxemburg informiert ein Wirtschaftsakteur, der sich auf eine unverhältnismäßige Belastung oder eine grundlegende Veränderung beruft, das Amt über ein Online-Verfahren, mit den entsprechenden Belegen. Die Richtlinie schließt fehlende Priorität, fehlende Zeit oder fehlende Kenntnisse ausdrücklich als Rechtfertigung aus.
Das greifbarste Risiko für einen Onlineshop liegt heute bei den Gerichten. In Frankreich ordnete das Tribunal judiciaire von Caen am 4. Juni 2026 im Eilverfahren auf Antrag zweier Verbände an, dass eine große Handelskette ihre Website und ihre App innerhalb von sechs Monaten unter Androhung eines Zwangsgelds barrierefrei machen muss, und wies dabei das Argument eines Konformitätsgrads von 71 % zurück. In Lille hatte der Eilrichter am 5. Mai 2026 dagegen den Antrag derselben Verbände gegen die Onlinehandelstochter einer anderen Kette abgewiesen, weil deren Umsatz unter der Schwelle von 250 Millionen Euro des Artikels 47 lag, eine Lesart des Verhältnisses zum Verbraucherschutzgesetzbuch, die unter Juristinnen und Juristen umstritten ist. Verbraucherinnen und Verbraucher können der DGCCRF einen Mangel an Barrierefreiheit zudem über SignalConso oder den Dienst RéponseConso melden, wie das Verbraucherinformationsblatt der DGCCRF zur Barrierefreiheit von Produkten und Dienstleistungen (auf Französisch) ausführt.
Barrierefreier Onlineshop in 90 Tagen: der Umsetzungsplan
Ein Onlineshop wird nicht auf einen Schlag barrierefrei. Ziel der ersten drei Monate ist es, die Barrieren zu beseitigen, die den Kauf verhindern, das Vorgehen zu dokumentieren und die Prüfungen einzurichten, die Rückschritte verhindern. Der folgende Zeitplan passt zu einem mittelgroßen Shop mit eigenem Entwicklungsteam; bei einem Katalog für mehrere Länder oder mehreren mobilen Apps dauert er länger.
- Wochen 1 und 2: den Rahmen abstecken. Prüfen Sie, ob eine Ausnahme greift und in welche Länder Sie verkaufen, listen Sie die kritischen Abläufe (Suche, Produktseite, Warenkorb, Konto, Zahlung, Retoure, Kontakt) und die Drittkomponenten auf und gehen Sie dann die Checkliste dieses Beitrags für jede Seite durch. Für Konzerne, die in mehreren Ländern tätig sind, beschreibt die Seite Großunternehmen ein Vorgehen nach Marke und Markt.
- Wochen 3 bis 5: auditieren. Lassen Sie die kritischen Abläufe nach den WCAG 2.2 Stufe AA und der Norm EN 301 549 bewerten, am Computer und auf dem Smartphone. Die durchschnittliche Dauer eines Audits liegt in unserer Praxis bei drei Wochen; der Bericht sollte für jeden Mangel die verantwortliche Komponente und das zuständige Team benennen.
- Wochen 4 bis 10: zuerst beheben, was blockiert. Beheben Sie vorrangig die Mängel, die den Abschluss einer Bestellung verhindern, dann diejenigen, die über die gemeinsamen Komponenten alle Seiten betreffen, schließlich die Mängel im Inhalt. Stellen Sie parallel die Anfragen an die Drittanbieter.
- Wochen 8 bis 11: mit Nutzerinnen und Nutzern testen. Lassen Sie echte Bestellungen von Menschen aufgeben, die im Alltag einen Screenreader, eine Sprachsteuerung oder eine Vergrößerungssoftware nutzen. Nutzertests mit Menschen mit Behinderung decken Barrieren auf, die kein Prüfraster misst, und sind ein starker Nachweis.
- Wochen 10 bis 12: veröffentlichen und die Nachverfolgung einrichten. Veröffentlichen Sie die Informationsseite, den Maßnahmenplan und einen barrierefreien Kontaktweg. Nehmen Sie Barrierefreiheitskriterien in die „Definition of Done“ jeder Funktion auf und führen Sie vor jeder Produktivsetzung eine Abnahme durch, besonders vor Verkaufsaktionen.
Dieses Vorgehen fügt sich in den breiteren Rahmen ein, den unser Leitfaden zur digitalen Barrierefreiheit beschreibt. Für ein Unternehmen, das auch an Behörden verkauft, lässt sich ein RGAA-Audit nach der offiziellen Methode auf derselben Stichprobe durchführen, sodass dieselben Seiten nicht zweimal getestet werden. Ein Schweizer Unternehmen, das in die Union verkauft, findet die Entsprechungen zur Norm eCH-0059 auf der Seite digitale Barrierefreiheit in der Schweiz.
Häufige Fragen
Ist Barrierefreiheit für einen Onlineshop Pflicht?
Ja, seit dem 28. Juni 2025 für jede Website und jede App, über die ein Verbraucher in der Europäischen Union online einen Vertrag schließen kann. Nur Kleinstunternehmen, die Dienstleistungen erbringen, also weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme, sind durch die Richtlinie ausgenommen. In Belgien ist dieser Ausschluss nur bis zum 28. Juni 2030 vorgesehen. Eine Präsentationswebsite ohne Onlinebestellung ist insoweit nicht erfasst.
Ist ein Shop, der auf einer gängigen E-Commerce-Plattform erstellt wurde, automatisch barrierefrei?
Nein. Eine Plattform liefert mehr oder weniger gut gebaute Komponenten, aber Theme, zusätzliche Module, Inhalte und Drittkomponenten bestimmen das Ergebnis. Zwei Shops auf derselben Plattform können sehr unterschiedlich barrierefrei sein. Nur eine Bewertung der Website, so wie sie online ist, einschließlich des Kaufprozesses, erlaubt eine Aussage.
Ist mein Zahlungsdienstleister für die Barrierefreiheit seiner Seite verantwortlich?
Gegenüber dem Verbraucher und der Aufsichtsbehörde ist es der Händler, der die Dienstleistung im elektronischen Geschäftsverkehr erbringt und für ihre Barrierefreiheit einsteht, die Zahlung eingeschlossen. Der Dienstleister kann durch den Vertrag gebunden sein, den Sie mit ihm schließen. Verlangen Sie einen aktuellen Auditbericht, die Liste der bekannten Mängel und einen Zeitplan für deren Behebung, und sehen Sie eine Alternative vor, falls sein Modul blockiert.
Welche WCAG-Stufe sollte ein Onlineshop anstreben?
Die Stufe AA der WCAG 2.2. Die Richtlinie nennt keine Norm, aber die Behörden gehen von der Norm EN 301 549 aus, deren Version 4.1.1 sich an den WCAG 2.2 orientiert. Wer diese Stufe schon jetzt anstrebt, muss die Arbeit nicht wiederholen, wenn diese Version im Amtsblatt der Europäischen Union zitiert wird.
Muss ein Onlineshop eine Erklärung zur Barrierefreiheit veröffentlichen?
Der EAA verlangt Informationen über die Barrierefreiheit der Dienstleistung, wie sie Anhang V beschreibt: Beschreibung der Dienstleistung, Funktionsweise und Art und Weise, wie sie die Anforderungen erfüllt. Die Erklärung zur Barrierefreiheit im Sinne des RGAA ist in Frankreich nur für Organisationen Pflicht, die Artikel 47 unterliegen, darunter Unternehmen mit mehr als 250 Millionen Euro Umsatz in Frankreich. Eine Seite kann beides vereinen, wenn jede ihre eigenen Anforderungen erfüllt.
Was droht einem nicht barrierefreien Onlineshop?
In Frankreich kann die DGCCRF die Herstellung der Konformität anordnen, und Verstöße sind Übertretungen der fünften Klasse. Verbände können zudem im Eilverfahren klagen: Ein Gericht hat im Juni 2026 einer Handelskette aufgegeben, ihre Website binnen sechs Monaten unter Androhung eines Zwangsgelds barrierefrei zu machen. In Belgien und Luxemburg sehen die Umsetzungsgesetze Verwaltungs- oder Strafgeldbußen vor. Hinzu kommt das geschäftliche Risiko: Kundinnen und Kunden, die nicht kaufen können.
Wie lange dauert es, einen Onlineshop barrierefrei zu machen?
Das hängt von der Größe des Katalogs, der Plattform und den Drittkomponenten ab. Bei einem mittelgroßen Shop reichen drei Monate in der Regel aus, um die Barrieren im Kaufprozess zu beseitigen, das Vorgehen zu dokumentieren und Prüfungen vor jeder Veröffentlichung einzurichten. Die vollständige Konformität, Inhalte und Apps eingeschlossen, wird anschließend über mehrere Monate geplant und laufend überwacht.