Ratgeber

Shopify-Apps auf Barrierefreiheit prüfen: Inventur, Prüfrezepte, Entscheidung

Veröffentlicht am 1. November 2026

Ob Ihre Shopify-Apps barrierefrei sind, prüfen Sie selbst in vier Schritten: Sie listen unter Settings > Apps und im Theme-Editor unter App embeds jede App auf, die im Shop etwas anzeigt, testen jede mit dem Prüfrezept für ihren Typ, schalten sie in einer Theme-Kopie ab, um zu sehen, ob die Barriere von ihr kommt, und fragen den Entwickler nach einem Konformitätsbericht. Eine App, die Ihren Shop auf Knopfdruck barrierefrei macht, gibt es nicht: Für Widgets, die eine Barrierefreiheits-Leiste über den Shop legen, schreiben die Überwachungsstellen von Bund und Ländern in ihrer gemeinsamen Einschätzung: „Aktuell sind Overlay-Tools nicht in der Lage, einen Webauftritt, der Barrieren aufweist, vollständig barrierefrei darzustellen.“ Am Ende entscheiden Sie mit der Tabelle unten, ob Sie jede App behalten, ersetzen oder entfernen.

Den Überblick über Theme, Alt-Texte, Farben und Checkout in Shopify gibt Shopify barrierefrei machen: Theme, Apps, Checkout; wie sich Shopify im Vergleich mit anderen Shopsystemen schlägt, steht in Barrierefreier Onlineshop: Shopify, WooCommerce, Shopware und Co.. Dieser Artikel nimmt sich nur die Apps vor, die im Storefront etwas anzeigen: Bewertungen, Popups und Newsletter, Chat, Upsell und Bundles, Größenberater, Wunschliste, Cookie-Banner und Produktfilter. Warum ein Overlay-Widget mit Barrierefreiheits-Leiste diese Prüfung nicht ersetzt, erklärt Overlay-Widgets: warum ein Plugin nicht reicht.

Warum eine einzige App den ganzen Shop blockieren kann

Die WCAG legen fest, dass vier Kriterien für alle Inhalte einer Seite gelten, auch für Teile, die sonst nicht zur Konformität beitragen, weil ein Fehler dort jede Nutzung der Seite stören kann. Das steht in der Konformitätsanforderung 5.2.5 Non-Interference; genannt sind 1.4.2 Audio Control, 2.1.2 No Keyboard Trap, 2.3.1 Three Flashes or Below Threshold und 2.2.2 Pause, Stop, Hide.

Unsere Einschätzung: Für Apps heißt das ganz praktisch: Ein Newsletter-Popup, aus dem der Tastaturfokus nicht mehr herauskommt, oder ein Bewertungs-Karussell, das endlos läuft und sich nicht anhalten lässt, macht nicht nur die App unbrauchbar, sondern die ganze Seite, auf der sie erscheint. Diese beiden Punkte prüfen Sie deshalb bei jeder App zuerst.

Ein Abzeichen im App Store sagt darüber wenig. Die Built for Shopify requirements nennen WCAG nur an einer Stelle, und die betrifft die Oberfläche der App im Shopify-Admin, nicht das, was Ihre Kunden sehen: Unter „4.1.1 Follow UX best practices“ ist ein Ablehnungsgrund, dass der Text einer App die Kontrastanforderungen von WCAG 2.1 AA nicht erfüllt. Anforderungen an Tastaturbedienung oder Screenreader enthält die Seite nicht.

Schritt 1: Inventur aller Apps, die im Shop sichtbar sind

Apps kommen auf drei Wegen in Ihr Theme. Laut Shopify-Hilfe zu Apps im Theme gibt es App-Blöcke (in einem Abschnitt oder als eigener Abschnitt), App-Embeds (Elemente, die über dem Theme schweben oder Code einfügen, den Kunden nicht sehen) und Apps, die direkt Code ins Theme schreiben. Jeder Weg hat einen anderen Ort, an dem Sie ihn sehen.

Wir nennen die englischen Menünamen, damit Sie sie mit der Shopify-Hilfe abgleichen können. In einem deutschsprachigen Admin stehen an derselben Stelle die übersetzten Bezeichnungen.

1a. Liste aller installierten Apps

Laut Shopify-Hilfe „Managing apps“:

1. Im Shopify-Admin Settings öffnen, dann Apps. Die Seite zeigt Ihre installierten und kürzlich deinstallierten Apps.
2. Auf den Namen einer App klicken. Es öffnet sich ihre Info-Seite.
3. Auf der Info-Seite die Karte Extensions ansehen. Sie zeigt laut Hilfe die Zahl der aktiven Erweiterungen und die Bereiche des Shops, in denen sie verfügbar sind, etwa Online Store oder Checkout.
4. Den Abschnitt Activity and permissions ansehen. Er zeigt, welche Bereiche des Shops die App sehen oder ändern darf.

In der Shopify-App auf dem Handy: Menü, Settings, im Abschnitt Store settings auf Apps, dann auf die App tippen.

Schreiben Sie jede App in Ihr Prüfprotokoll (Vorlage am Ende) und markieren Sie, ob sie im Storefront oder im Checkout etwas anzeigt. Reine Admin-Apps, etwa für Buchhaltung, gehören nicht in diese Prüfung.

1b. App-Embeds im Theme-Editor

Laut Shopify-Hilfe zu Apps im Theme:

1. Im Shopify-Admin Online Store öffnen.
2. Beim Theme auf Edit theme klicken.
3. Verkaufen Sie in mehreren Märkten, prüfen Sie das Drop-down Market: App-Embeds lassen sich je Markt unterschiedlich einstellen.
4. In der Seitenleiste auf das Symbol App embeds klicken. Jede eingebettete App steht dort mit einem Schalter; über das Pfeilsymbol neben dem Namen sehen Sie ihre Einstellungen.

Typische App-Embeds sind schwebende Chat-Knöpfe, Popups, Cookie-Banner und Wunschlisten-Symbole.

1c. App-Blöcke in den Vorlagen

App-Blöcke sitzen in einzelnen Seitenvorlagen, meist auf der Produktseite (Bewertungen, Größenberater, Bundles) oder der Kategorieseite (Filter). Im Theme-Editor wählen Sie oben die Vorlage, etwa die Produktseite, und gehen in der Seitenleiste die Abschnitte durch. Welche App-Blöcke es überhaupt gibt, zeigt laut derselben Hilfeseite Add block: Im Drop-down stehen sie im Bereich Apps. Notieren Sie je Block die Vorlage, in der er steckt.

1d. Apps ohne Block und ohne Embed

Steht eine App in der Liste aus 1a, zeigt im Shop sichtbar etwas an, taucht aber weder unter App embeds noch als Block auf, hat sie wahrscheinlich Code direkt ins Theme geschrieben. Für diesen Weg nennt die Shopify-Hilfe keinen Schalter. Notieren Sie solche Apps gesondert; sie lassen sich nur über die App-Einstellungen, den Entwickler oder den Theme-Code abschalten.

Schritt 2: Das Prüfrezept je App-Typ

Grundtest für jede App

Diese sieben Punkte gelten für jede sichtbare App. Prüfen Sie sie auf der Seite, auf der die App erscheint, zuerst am Computer, dann im schmalen Fenster. Wie der Tastaturtest im Einzelnen geht, zeigt Tastaturtest in 10 Minuten.

Zu Esc: Die WCAG schreiben die Esc-Taste für Fenster nicht wörtlich vor; 2.1.2 verlangt nur, dass man den Fokus mit der Tastatur wieder wegbewegen kann. Das W3C-Muster für modale Dialoge im ARIA Authoring Practices Guide nennt aber „Escape: Closes the dialog.“, und Shopifys eigene Best Practices für Apps nennen für Schubladen und Modals: „The Esc key is supported to close drawers and modals, and returns keyboard focus to the launcher element.“ Dieselbe Formulierung steht in den Best Practices für Themes. Shopify bezeichnet das als Best Practice, nicht als Voraussetzung für den App Store.

Popups, Newsletter und Rabattfenster

Das Fenster erscheint oft von selbst nach einigen Sekunden oder beim Verlassen der Seite. Laden Sie die Seite neu, warten Sie, bis es erscheint, und fassen Sie die Maus nicht an.

1. Fokus springt hinein: Nach dem Öffnen steht der Fokus im Fenster. Laut APG-Dialogmuster wandert der Fokus beim Öffnen auf ein Element im Dialog. Bleibt er hinter dem Fenster im Shop, tippen Kunden mit Tastatur oder Screenreader ins Leere. Kriterium: 2.4.3 Focus Order.
2. Fokus bleibt drin: Mit Tab und Umschalt+Tab wandert der Fokus nur durch das Fenster, nicht durch den Shop dahinter.
3. Schließen mit Esc: Esc drücken. Das Fenster geht zu.
4. Schließen-Knopf mit Namen: Der X-Knopf ist per Tab erreichbar und heißt im Reiter Accessibility zum Beispiel „Schließen“, nicht „button“ oder gar nichts (4.1.2).
5. Fokus kommt zurück: Nach dem Schließen steht der Fokus wieder dort, wo Sie vorher waren, oder am Seitenanfang, nicht irgendwo am Ende der Seite.
6. Formular beschriftet: Das E-Mail-Feld hat eine sichtbare Beschriftung oder Anleitung, nicht nur einen grauen Platzhalter, der beim Tippen verschwindet (3.3.2 Labels or Instructions). Fehlermeldungen wie „Ungültige E-Mail“ stehen als Text da (3.3.1 Error Identification).
7. Countdown: Läuft ein Rabatt-Countdown sichtbar herunter, ist er nach unserer Lesart eine sich selbst aktualisierende Information im Sinne von 2.2.2; er braucht dann eine Möglichkeit, ihn anzuhalten, auszublenden oder die Aktualisierung einzustellen.
8. Glücksrad oder Drehspiel: Lässt es sich nur per Ziehen bedienen, braucht es einen Knopf als Alternative (2.5.7 Dragging Movements).

Bewertungen

1. Sterne als Text: Die Sternebewertung („4 von 5 Sternen“) ist auch als Text vorhanden, nicht nur als Grafik. Prüfen Sie im Reiter Accessibility den Namen des Sterne-Elements (1.1.1 Non-text Content).
2. Bewertung abgeben per Tastatur: Im Formular „Bewertung schreiben“ lässt sich die Sternezahl mit der Tastatur wählen, und jede Stufe hat einen Namen (2.1.1, 4.1.2).
3. Felder beschriftet: Name, E-Mail, Titel und Text haben Beschriftungen (3.3.2).
4. Karussell anhaltbar: Rotierende Bewertungen auf der Startseite haben einen Pause-Knopf, wenn sie länger als fünf Sekunden laufen (2.2.2).
5. Mehr laden und Filter: Nach „Weitere Bewertungen“ oder einem Filter nach Sternen steht der Fokus an einer sinnvollen Stelle, etwa bei der ersten neuen Bewertung (2.4.3).
6. Kundenfotos: Öffnet ein Foto in einem Großansicht-Fenster, gilt das Prüfrezept für Popups oben.
7. Überschriften: Der Bereich „Bewertungen“ hat eine echte Überschrift, damit Screenreader-Nutzer dorthin springen können (1.3.1 Info and Relationships).

Chat

1. Chat-Knopf benannt: Der schwebende Knopf hat einen Namen wie „Chat öffnen“ (4.1.2) und ist per Tab erreichbar.
2. Verdeckt nichts: Gehen Sie mit Tab bis ganz unten durch die Seite. Der Chat-Knopf darf kein fokussiertes Element vollständig verdecken, zum Beispiel einen Link im Footer oder den Knopf „In den Warenkorb“ auf dem Handy (2.4.11).
3. Chatfenster: Öffnen, Fokus springt ins Eingabefeld, das Feld hat eine Beschriftung, Esc oder ein benannter Knopf schließt das Fenster, der Fokus kehrt zum Chat-Knopf zurück.
4. Neue Nachrichten: Antwortet der Bot oder ein Mitarbeiter, wird die neue Nachricht einem Screenreader angesagt, ohne dass der Fokus springt (4.1.3 Status Messages). Prüfen Sie das mit einem Screenreader: Nachricht senden, warten, ob die Antwort vorgelesen wird.
5. Zeitlimit: Beendet der Chat eine Sitzung nach Inaktivität, gibt es eine Warnung und eine Möglichkeit zum Verlängern (2.2.1).
6. Handy: Bei 320 CSS-Pixel Breite passt das Chatfenster auf den Bildschirm und der Schließen-Knopf ist sichtbar (1.4.10).

Upsell, Cross-Sell und Bundles

Diese Apps zeigen sich meist in der Warenkorb-Schublade, als Fenster nach „In den Warenkorb“ oder als Block auf der Produktseite.

1. Hinzufügen per Tastatur: Jedes Angebot lässt sich mit der Tastatur auswählen und in den Warenkorb legen; Mengen- und Variantenauswahl im Bundle ebenso (2.1.1).
2. Knöpfe eindeutig: Stehen drei Knöpfe „Hinzufügen“ nebeneinander, verrät der Name im Reiter Accessibility oder der umgebende Text, welches Produkt gemeint ist (2.4.4 Link Purpose (In Context) für Links, 4.1.2 für Knöpfe).
3. Bestätigung wird angesagt: „Zum Warenkorb hinzugefügt“ und neue Summen werden einem Screenreader mitgeteilt (4.1.3).
4. Upsell-Fenster: Ein Fenster nach dem Hinzufügen bekommt das Popup-Rezept oben: Fokus hinein, Esc schließt, Fokus zurück.
5. Fokus nach dem Aktualisieren: Lädt die App den Warenkorb neu, springt der Fokus nicht an den Seitenanfang (2.4.3).
6. Rabattstufen und Fortschrittsbalken: „Noch 12 Euro bis zum Gratisversand“ steht als Text da, nicht nur als Balken; der Balken selbst hat mindestens 3:1 Kontrast (1.4.11), und die Information hängt nicht nur an der Farbe (1.4.1 Use of Color).
7. Countdown: wie bei Popups.

Größenberater

1. Öffnen per Tastatur: Der Link „Größe finden“ oder „Größentabelle“ ist per Tab erreichbar und beschriftet.
2. Fenster: Popup-Rezept oben.
3. Fragebogen: Jedes Feld (Größe, Gewicht, Passform) hat eine Beschriftung (3.3.2); Auswahlbilder wie „Bauchform“ haben Textnamen (1.1.1).
4. Schieberegler: Der Regler lässt sich mit den Pfeiltasten bedienen (2.1.1). Zusätzlich gibt es für Maus und Touch einen Weg ohne Ziehen, etwa ein Zahlenfeld daneben oder Tippen auf die Schiene (2.5.7).
5. Größentabelle: Ist die Tabelle ein Bild, fehlt sie Screenreader-Nutzern ganz. Sie gehört als echte Tabelle mit Kopfzeile in den Code (1.3.1).
6. Ergebnis: Die empfohlene Größe steht als Text da und wird angesagt, wenn sie ohne Seitenwechsel erscheint (4.1.3).

Wunschliste

1. Herz-Knopf benannt: Das Herz auf Produktkarten und Produktseite hat einen Namen wie „Auf die Wunschliste“ und meldet seinen Zustand (gemerkt oder nicht) (4.1.2). Ein Herz, das nur die Farbe wechselt, erfüllt das nicht (1.4.1).
2. Kontrast des Symbols: Das leere Herz hebt sich mit mindestens 3:1 vom Produktbild oder Hintergrund ab (1.4.11).
3. Bestätigung: „Zur Wunschliste hinzugefügt“ wird angesagt (4.1.3).
4. Wunschlisten-Seite: Produkte entfernen und in den Warenkorb legen geht per Tastatur, und jeder Knopf sagt, welches Produkt er betrifft.
5. Anmeldung: Verlangt die Wunschliste ein Kundenkonto, gilt für den Login 3.3.8 Accessible Authentication (Minimum).

Cookie-Banner-Apps

Hier genügt der Kern, die vollständige Prüfliste steht in Cookie-Banner barrierefrei gestalten.

1. Zuerst erreichbar: Der Banner bekommt den Fokus vor dem Shop oder ist mit wenigen Tabs erreichbar; kein Shop-Element liegt darüber.
2. Alle Wahlmöglichkeiten per Tastatur: Akzeptieren, Ablehnen und Einstellungen; in den Einstellungen jeder Schalter mit Namen und Zustand (4.1.2).
3. Kontrast aller Knöpfe: auch des oft blassen „Ablehnen“ (1.4.3).
4. Verdeckt den Fokus nicht: Ein Banner am unteren Rand verdeckt keine fokussierten Elemente ganz (2.4.11).
5. Wieder aufrufbar: Der Knopf oder Link, mit dem Kunden ihre Wahl später ändern, ist benannt und per Tastatur erreichbar.

Produktfilter-Apps

1. Jeder Filter per Tastatur: Aufklappen, Häkchen setzen, Filter entfernen, „Alle löschen“ (2.1.1).
2. Zustand hörbar: Aufklappbare Filtergruppen melden „ausgeklappt“ oder „eingeklappt“, Kontrollkästchen „aktiviert“ oder „nicht aktiviert“ (4.1.2).
3. Farbfilter: Farbmuster haben einen Textnamen wie „Dunkelblau“, nicht nur die Farbe (1.1.1, 1.4.1).
4. Preisregler: Beide Griffe lassen sich mit Pfeiltasten bewegen (2.1.1), und für Maus und Touch gibt es einen Weg ohne Ziehen, etwa Eingabefelder für den Preis (2.5.7).
5. Ergebnis angesagt: Nach dem Filtern wird „24 Produkte“ oder Ähnliches angesagt, ohne dass der Fokus springt (4.1.3).
6. Fokus bleibt: Nach dem Setzen eines Filters steht der Fokus noch am Filter, nicht am Seitenanfang (2.4.3).
7. Filter auf dem Handy: Öffnen sich die Filter als Schublade, gilt das Popup-Rezept.

Schritt 3: App vorübergehend abschalten, um die Ursache zu finden

Finden Sie eine Barriere und sind nicht sicher, ob sie vom Theme oder von einer App kommt, schalten Sie die App in einer Kopie Ihres Themes ab. Laut Shopify-Hilfe zum Veröffentlichen von Themes sehen Kunden nur das veröffentlichte Theme; eine Kopie bleibt unter den Entwürfen (Draft themes).

1. Theme kopieren: Online Store, beim Theme das Aktionsmenü (waagerechtes Menüsymbol) öffnen, Duplicate. Die Kopie heißt „Copy Of“ plus Theme-Name. Haben Sie schon 20 Themes, müssen Sie laut Shopify-Hilfe zum Duplizieren vorher eines löschen.
2. App-Embed abschalten: In der Kopie Edit theme, Symbol App embeds, beim Embed den Schalter umlegen, Save. Danach die Vorschau der Kopie ansehen. Die Shopify-Hilfe zu Apps im Theme beschreibt die Schritte nur fürs Einschalten, der Schalter ist derselbe.
3. App-Block ausblenden: In der Kopie die Vorlage öffnen, mit der Maus über den Namen des Blocks fahren und Hide klicken, dann Save. So steht es in der Shopify-Hilfe zu Abschnitten und Blöcken. Delete an derselben Stelle entfernt den Block; Ausblenden reicht für den Test.
4. Gleich testen: Dieselbe Prüfung wie vorher wiederholen. Ist die Barriere weg, kommt sie von der App. Ist sie noch da, liegt sie im Theme oder in einer anderen App. Schalten Sie immer nur eine App auf einmal ab.
5. Erweiterungen außerhalb des Themes: Für Checkout und andere Bereiche gibt es auf der Info-Seite der App unter Settings > Apps die Karte Extensions; laut Shopify-Hilfe „Managing apps“ lassen sich dort einzelne Erweiterungen aktivieren oder deaktivieren. Ob das nur eine Theme-Kopie oder den Live-Shop betrifft, sagt die Hilfe nicht. Unsere Einschätzung: Rechnen Sie damit, dass es sofort für alle Kunden gilt, und testen Sie zu einer ruhigen Zeit.
6. Apps im Theme-Code: Für Apps aus Schritt 1d gibt es keinen Schalter. Fragen Sie den Entwickler, wie sich die App abschalten lässt.
7. Deinstallieren nur als letzter Schritt: Laut Shopify-Hilfe zum Deinstallieren kann eine App Daten speichern, die nach der Deinstallation nicht wiederherstellbar sind; bei einer Bewertungs-App betrifft das zum Beispiel die gesammelten Bewertungen. Manche Apps lassen außerdem Code im Theme zurück, der nicht automatisch entfernt wird. Exportieren Sie vorher, was Sie brauchen.

Schritt 4: Was Sie den App-Entwickler fragen

Die verlässlichste Auskunft über eine App ist ein Konformitätsbericht des Herstellers. Das gängige Format ist der VPAT des Branchenverbands ITI. Laut ITI ist der VPAT eine kostenlose Vorlage, die Anforderungen an Barrierefreiheit in Prüfkriterien übersetzt; ausgefüllt mit dokumentierten Testergebnissen heißt er „Accessibility Conformance Report“ (ACR). ITI bietet Ausgaben für WCAG, für den US-Standard Section 508, eine EU-Ausgabe auf Grundlage der EN 301 549 und eine internationale Ausgabe mit allen dreien an. Jedes Kriterium bekommt eine von vier Stufen: supports, partially supports, does not support oder not applicable.

Laut ITI füllt in der Regel der Hersteller den Bericht aus, eine Prüfung durch Dritte ist freiwillig, und „ITI does not review or approve VPATs“. Unsere Einschätzung: Ein ACR ist deshalb meist eine Selbstauskunft. Er ist trotzdem wertvoll, weil er zeigt, welche Kriterien der Hersteller selbst als nicht oder nur teilweise erfüllt angibt, und weil Sie Ihre eigenen Testergebnisse daneben legen können.

Mustertext für die Anfrage

Schicken Sie den Text über den Support-Kontakt der App, den Sie auf ihrer Seite im Shopify App Store finden. Ersetzen Sie die Angaben in eckigen Klammern.

Guten Tag,

wir nutzen Ihre App [Name der App] in unserem Shopify-Shop [Shop-Adresse]. Unser Shop richtet sich an Verbraucher in Deutschland, und wir möchten, dass er barrierefrei ist. Wir prüfen deshalb alle Apps, die im Shop etwas anzeigen, gegen WCAG 2.2 Stufe AA. Bitte beantworten Sie uns diese Fragen:

1. Haben Sie einen Konformitätsbericht (Accessibility Conformance Report, zum Beispiel auf Basis des ITI VPAT in der WCAG- oder EU-Ausgabe) für die Teile der App, die im Storefront erscheinen? Wenn ja, senden Sie ihn uns bitte mit Datum und geprüfter Version.
2. Wer hat die Prüfung durchgeführt, Ihr eigenes Team oder ein externer Prüfer?
3. Bei unserer eigenen Prüfung ist uns aufgefallen: [Barriere, Seite, Schritte zum Nachstellen, Browser]. Ist das bekannt, und bis wann beheben Sie es?
4. Lassen sich Farben, Texte und Beschriftungen der App so einstellen, dass Kontrast und Namen der Bedienelemente stimmen? Wo genau?
5. Bleibt nach einer Deinstallation Code in unserem Theme zurück, und wie entfernen wir ihn?

Vielen Dank und freundliche Grüße, [Name]

Legen Sie Antwort und Datum im Prüfprotokoll ab. Antwortet der Entwickler nicht oder hat keinen Bericht, ist das selbst ein Befund für die Entscheidung im nächsten Schritt.

Schritt 5: Behalten, ersetzen oder entfernen

Unsere Einschätzung: Den Ausschlag gibt, ob die Barriere einen Kunden am Kaufen hindert. Ein schlecht beschriftetes Herz-Symbol ist ärgerlich, ein Popup ohne Ausweg verhindert jeden Kauf.

Schritt 6: Prüfprotokoll

Legen Sie je App eine Zeile oder ein Blatt mit diesen Angaben an. So haben Sie belegt, was Sie wann geprüft haben, und sehen beim nächsten Durchgang sofort, was sich geändert hat.

Kopf je App

• Name der App, Entwickler, Support-Kontakt
• Datum der Prüfung, Prüfer, Browser und Gerät
• Art der Einbindung: App-Embed, App-Block (mit Vorlage), Theme-Code oder Checkout-Erweiterung
• Seiten, auf denen die App erscheint
• Markt, falls Sie App-Embeds je Markt eingestellt haben

Grundtest

• 2.1.1 Alle Bedienelemente per Tastatur erreichbar und auslösbar
• 2.1.2 Keine Tastaturfalle
• 2.4.7 Fokus sichtbar
• 2.4.11 Fokus nicht von App-Elementen verdeckt
• 4.1.2 Jedes Bedienelement mit sinnvollem Namen und Zustand
• 1.4.3 Text mindestens 4,5:1, großer Text 3:1
• 1.4.11 Ränder (soweit man das Bedienelement daran erkennt) und Symbole mindestens 3:1
• 2.2.2 Bewegung über fünf Sekunden anhaltbar
• 2.2.1 Zeitgrenzen abschaltbar, verlängerbar oder anpassbar
• 1.4.10 Nutzbar bei 320 CSS-Pixel Breite

Fenster der App (falls vorhanden)

• Fokus springt beim Öffnen hinein
• Fokus bleibt im Fenster
• Esc schließt
• Schließen-Knopf benannt
• Fokus kehrt nach dem Schließen zurück

Rezept für den App-Typ

• Alle Punkte des passenden Rezepts aus Schritt 2 abgehakt, Befunde mit Seite und Schritten notiert

Ursache und Entscheidung

• Abschalttest in der Theme-Kopie gemacht, Ergebnis notiert
• Anfrage an den Entwickler gesendet am, Antwort erhalten am
• ACR vorhanden: ja oder nein, Datum und Version
• Entscheidung laut Tabelle: behalten, behalten mit Frist, ersetzen, entfernen
• Nächste Prüfung am (spätestens nach dem nächsten größeren App-Update)

Prüfen Sie auch jede neue App mit diesem Protokoll, bevor Sie sie im Live-Theme einschalten: Installieren, Embed oder Block zuerst in der Theme-Kopie aktivieren, testen, erst dann veröffentlichen.

Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.

Ihr nächster Schritt

Machen Sie einen kostenlosen Scan Ihres Shops. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Ein automatischer Scan findet nur einen Teil der Barrieren; ob sich ein App-Fenster mit Esc schließen lässt oder ein Chat neue Nachrichten ansagt, prüfen Sie mit den Rezepten oben selbst.

Stand: 01.11.2026. Quellen gelesen am 01.11.2026.