Formulare und Checkout in Shopify barrierefrei gestalten

Sachinformation, keine Rechtsberatung. Für Ihre konkrete Situation fragen Sie bitte eine Anwältin oder einen Anwalt.

Von Sieghart Michielsen · Veröffentlicht 25. Oktober 2026

Ein Onlineshop ist im Kern eine Folge von Formularen: Suche, Variantenauswahl, Warenkorb, Newsletter, Kontaktformular und am Ende der Checkout. Scheitert ein Mensch an einem dieser Formulare, scheitert der Kauf. Das Barrierefreiheitsstärkungsgesetz (BFSG) nennt in seiner Verordnung die Zahlungsfunktionen deshalb ausdrücklich.

Bei Shopify ist die Verantwortung geteilt: Die Formulare im Theme gestalten Sie oder Ihre Agentur, den Checkout stellt Shopify bereit. Dieser Ratgeber zeigt, was wohin gehört, welche WCAG-Kriterien zählen und wie Sie in einer halben Stunde selbst testen.

Kurz zusammengefasst

• Ihr Bereich: Formulare im Theme (Kontakt, Newsletter, Suche, Warenkorb, Variantenauswahl) und Formulare aus Apps.
• Shopifys Bereich: der gehostete Checkout. Sie bestimmen dort Farben, Schriften, Texte, Zahlungsarten und Erweiterungen.
• Die wichtigsten Kriterien: sichtbare Beschriftungen, verständliche Fehlermeldungen, passende autocomplete-Werte und vollständige Tastaturbedienung.
• Shopifys Bericht zum Checkout (März 2026) nennt einige Kriterien nur teilweise unterstützt. Testen Sie selbst und dokumentieren Sie das Ergebnis.

Was das Recht verlangt

Nach § 19 BFSGV müssen bei Dienstleistungen im elektronischen Geschäftsverkehr Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen „wahrnehmbar, bedienbar, verständlich und robust“ sein. Das sind die vier Prinzipien der WCAG. Als technischer Maßstab dient die europäische Norm EN 301 549, die für Webinhalte die WCAG 2.1 auf Stufe AA übernimmt. Wer heute arbeitet, sollte die neuen Kriterien der WCAG 2.2 gleich mit einplanen. Einen Überblick über die Pflichten gibt unser Ratgeber BFSG für Shopify-Shops.

Wer ist wofür zuständig?

Formulare im Theme

Beschriftungen

Jedes Feld braucht eine Beschriftung, die sichtbar ist und im Code mit dem Feld verknüpft ist, etwa über ein <label for="…">. Ein Platzhalter allein genügt nicht: Er verschwindet beim Tippen und hat oft zu wenig Kontrast. Das betrifft die WCAG-Kriterien 1.3.1 (Info und Beziehungen), 3.3.2 (Beschriftungen oder Anweisungen) und 4.1.2 (Name, Rolle, Wert). Häufig vergessen: das Suchfeld im Header, das nur ein Lupen-Symbol hat, und Mengenfelder mit Plus- und Minus-Schaltflächen ohne Namen.

Eingabezweck: autocomplete

Felder für Name, E-Mail, Telefon und Adresse sollten das passende autocomplete-Attribut tragen, zum Beispiel autocomplete="email" oder autocomplete="postal-code". Dann kann der Browser sie ausfüllen, was Menschen mit motorischen oder kognitiven Einschränkungen viel Tipparbeit erspart. Das verlangt WCAG 1.3.5 (Eingabezweck bestimmen).

Fehlermeldungen

Eine gute Fehlermeldung nennt das Feld und sagt, was zu tun ist: „Bitte geben Sie eine E-Mail-Adresse mit @ ein“ statt „Ungültige Eingabe“. Sie muss als Text erscheinen, nicht nur als rote Umrandung, und Screenreader müssen sie erfahren, etwa indem der Fokus auf die erste fehlerhafte Eingabe springt oder die Meldung in einem Statusbereich erscheint. Das sind WCAG 3.3.1 (Fehlererkennung), 3.3.3 (Fehlerempfehlung) und 4.1.3 (Statusmeldungen). Auch „In den Warenkorb gelegt“ ist eine Statusmeldung, die Screenreader hören sollten.

Pflichtfelder, Kontrast und Fokus

Kennzeichnen Sie Pflichtfelder in der Beschriftung, nicht nur mit Farbe. Feldränder und Kästchen brauchen mindestens 3:1 Kontrast zum Hintergrund (WCAG 1.4.11), Text 4,5:1. Wie Sie das messen, steht im Ratgeber Farbkontrast im Shopify-Shop. Der Tastaturfokus muss immer sichtbar sein (2.4.7), und die Reihenfolge beim Tabben muss der sichtbaren Reihenfolge folgen (2.4.3).

Pop-ups und Warenkorb-Schublade

Newsletter-Pop-ups und seitliche Warenkörbe sind Dialoge. Beim Öffnen sollte der Fokus hineinspringen, mit Escape sollte er sich schließen lassen, und danach sollte der Fokus dorthin zurückkehren, wo er war. Ein Pop-up, das sich nur mit der Maus schließen lässt, sperrt Tastaturnutzer aus dem ganzen Shop aus (WCAG 2.1.1, 2.1.2).

Wie häufig solche Fehler sind, zeigen automatische Prüfungen nur zum Teil. In unserer Studie zu 5.463 EU-Shopify-Startseiten (HTTP Archive, Crawl vom 1. September 2026, mobile Ansicht, nur Startseiten, nur automatische Prüfungen) fielen 3,9 % der Startseiten bei Formularfeldern ohne Beschriftung auf und 2,7 % bei Auswahllisten ohne Namen. Das sind niedrige Werte, weil auf Startseiten wenige Formulare stehen und Maschinen schlechte Fehlermeldungen oder Fokusfallen kaum erkennen. Der Tastaturtest unten findet mehr.

Der Shopify-Checkout

Was Shopify selbst berichtet

Shopify veröffentlicht einen Barrierefreiheitsbericht zum Checkout nach dem VPAT-Format, Berichtsdatum März 2026. Laut Bericht werden etwa Tastaturbedienung (2.1.1), Beschriftungen (3.3.2), Fehlerempfehlungen (3.3.3) und Eingabezweck (1.3.5) unterstützt. Als nur teilweise unterstützt nennt der Bericht unter anderem Kontrast (1.4.3), Kontrast von Feldrändern und Fokusrahmen (1.4.11), den sichtbaren Fokus (2.4.7), die Fehlererkennung (3.3.1) und Statusmeldungen (4.1.3). Außerdem steht dort, dass Bedienelemente von Anbietern wie PayPal oder Amazon Pay Barrieren erzeugen können.

Was Sie im Checkout beeinflussen

• Gestaltung: Farben, Schriften und Logo im Checkout-Editor. Prüfen Sie Ihre Farben mit einem Kontrastrechner, gerade für Schaltflächen und Feldränder.
• Texte: eigene Hinweise, Liefer- und Rückgabetexte. Schreiben Sie sie kurz und verständlich.
• Zahlungsarten: Jede Zahlungsart bringt eigene Bedienelemente mit. Testen Sie die, die Ihre Kundschaft am häufigsten nutzt.
• Erweiterungen: Checkout-UI-Erweiterungen sind laut Shopify-Entwicklerdokumentation im Checkout selbst Shopify Plus vorbehalten; auf der Danke- und Bestellstatusseite stehen sie allen Tarifen außer Starter offen. Jede Erweiterung, auch aus Apps, gehört in Ihren Test.

Was Sie nicht ändern können, sollten Sie trotzdem festhalten: welche Barriere Sie gefunden haben, an welchem Tag, und dass Sie sie an Shopify gemeldet haben. Der Bericht nennt dafür die Adresse accessibility@shopify.com.

Der 30-Minuten-Tastaturtest

1. Öffnen Sie die Startseite, legen Sie die Maus weg und drücken Sie Tab. Erscheint ein Link zum Hauptinhalt, und sehen Sie immer, wo der Fokus ist?
2. Öffnen Sie die Suche, geben Sie einen Begriff ein und wählen Sie ein Ergebnis, nur mit Tab, Pfeiltasten und Enter.
3. Wählen Sie auf der Produktseite eine Variante und eine Menge und legen Sie das Produkt in den Warenkorb. Wird das angesagt oder sichtbar bestätigt?
4. Öffnen und schließen Sie die Warenkorb-Schublade und ein Newsletter-Pop-up mit Escape.
5. Schicken Sie das Kontaktformular leer ab. Springt der Fokus zum Fehler, und sagt die Meldung, was fehlt?
6. Gehen Sie im Checkout bis zur Zahlungsauswahl, wählen Sie eine Zahlungsart und prüfen Sie Fokus und Fehlermeldungen bei einer fehlerhaften Postleitzahl.
7. Notieren Sie jede Stelle, an der Sie hängen bleiben, mit Datum, Seite und Ursache.

Wenn Sie können, wiederholen Sie den Test einmal mit einem Screenreader, etwa VoiceOver auf dem Mac oder NVDA unter Windows. Die Notizen gehören in Ihre Dokumentation, siehe die BFSG-Checkliste für Shopify-Shops.

Wie Testamur hilft

Testamur ist eine Shopify-App in Entwicklung, gebaut als Nachweis Ihrer Arbeit an der Barrierefreiheit. Der kostenlose Check prüft schon heute öffentliche Seiten Ihres Shops automatisch, darunter Formularfelder ohne Beschriftung und Bedienelemente ohne Namen, und zeigt, wo die Korrektur meist liegt. Automatische Tests finden nur einen Teil der Barrieren; den Tastaturtest oben ersetzen sie nicht.

Quellen

• BFSGV § 19
• Shopify: Accessibility Conformance Report, Shopify Checkout (Berichtsdatum März 2026)
• Shopify: Technologies for customizing Shopify checkout
• Shopify: Accessibility best practices for themes
• W3C: Understanding 1.3.5 Identify Input Purpose
• W3C: Understanding 3.3.2 Labels or Instructions
• W3C: Understanding 3.3.1 Error Identification
• Testamur: Studie zu EU-Shopify-Startseiten 2026 (HTTP Archive, Crawl vom 1. September 2026)

Prüfen Sie Ihren Shop kostenlos

Sehen Sie, welche Barrieren ein automatischer Check in Ihrem eigenen Shopify-Shop findet: die Startseite und, soweit Ihre robots.txt es erlaubt, Kollektions-, Produkt- und Rechtsseiten, zugeordnet zu WCAG und EN 301 549. Kostenlos, Ergebnis per E-Mail. Automatische Tests finden einen Teil der Barrieren, nicht alle.

Shop kostenlos prüfen

Häufige Fragen

Ist der Shopify-Checkout barrierefrei?

Shopify veröffentlicht einen eigenen Barrierefreiheitsbericht zum Checkout (Stand März 2026). Darin stehen viele WCAG-Kriterien als unterstützt, einige als teilweise unterstützt, etwa Kontrast, sichtbarer Fokus, Fehlermeldungen und Statusmeldungen. Ihre eigenen Farben, Texte, Zahlungsarten und Erweiterungen können das Ergebnis verbessern oder verschlechtern. Testen Sie den Checkout deshalb selbst.

Bin ich für den Checkout verantwortlich, obwohl Shopify ihn baut?

Sie bieten den Shop als Dienstleistung an, und § 19 BFSGV nennt Zahlungsfunktionen ausdrücklich. Wie weit Ihre Verantwortung für Teile reicht, die Sie technisch nicht ändern können, ist rechtlich nicht abschließend geklärt. Halten Sie fest, was Sie geprüft haben, was Sie ändern konnten und was Sie an Shopify gemeldet haben.

Reicht ein Platzhalter im Feld statt einer Beschriftung?

Nein. Ein Platzhalter verschwindet beim Tippen, hat oft zu wenig Kontrast und wird nicht von allen Screenreadern zuverlässig als Name vorgelesen. Jedes Feld braucht eine sichtbare, programmatisch verknüpfte Beschriftung (WCAG 1.3.1, 3.3.2 und 4.1.2).

Wie teste ich Formulare ohne Fachwissen?

Füllen Sie jedes Formular nur mit der Tastatur aus: Tab zum nächsten Feld, Umschalt+Tab zurück, Leertaste für Kästchen, Enter zum Absenden. Schicken Sie es einmal absichtlich leer ab. Sie sollten jederzeit sehen, wo Sie sind, und die Fehlermeldung sollte sagen, welches Feld fehlt und was Sie tun müssen.

Über den Autor

Sieghart Michielsen. Sieghart Michielsen entwickelt Testamur, eine Shopify-App, die EU-Shops auf Barrieren prüft und einen datierten Verlauf von Prüfungen, Korrekturen und Informationen zur Barrierefreiheit führt. Er schreibt diese Ratgeber anhand der Gesetzestexte, der Angaben der Behörden und öffentlicher Daten. Er ist kein Anwalt.