Ist das Cookie-Banner barrierefrei? WCAG 2.2 AA und ADA (Neue Version)

Überblick

Das Pandectes Cookie-Banner ist nach WCAG 2.2 Stufe AA zertifiziert. Zoonou Limited, ein unabhängiges Unternehmen für Barrierefreiheitstests, hat es nach WCAG 2.2, Section 508 und EN 301 549 geprüft und die Ergebnisse in einem Konformitätsbericht im Format VPAT 2.5 veröffentlicht.

Das Audit umfasst jede Ebene, die Besucher öffnen können: den Cookie-Hinweis, die Einstellungen und die Cookie-Details. Es enthielt manuelle Tests mit den Screenreadern JAWS, NVDA und VoiceOver, der Windows-Bildschirmlupe, der Sprachsteuerung Dragon sowie VoiceOver und TalkBack auf Mobilgeräten. Jedes WCAG 2.2 Kriterium der Stufen A und AA wurde mit Supports oder Not Applicable bewertet.

Die vollständige Konformitätserklärung finden Sie auf unserer Website: Accessibility conformance.

Neues Banner. Für Shops mit dem Badge New version unter Cookie banner. Für das Legacy-Banner siehe So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version.

WCAG, ADA und Ihr Shop

Für Websites gibt es kein offizielles ADA-Zertifikat. In den USA ist WCAG der am häufigsten verwendete Maßstab, wenn der ADA auf Websites angewendet wird. In der Europäischen Union verweist der European Accessibility Act auf die Norm EN 301 549, die WCAG enthält. Das Banner erfüllt beides.

Die Zertifizierung gilt für das Banner selbst. Ihr Theme, Ihre Produktinhalte und Ihr Checkout müssen die Richtlinien ebenfalls erfüllen. Dieser Artikel dient der Information und ist keine Rechtsberatung.

Wenn Sie unsere Ergebnisse an einen Prüfer weitergeben, ist die Seite Accessibility conformance der beste Link dafür.

Häufige Audit-Hinweise, erklärt

Automatische Scanner und manche Audits melden oft dieselben drei Punkte. So verhält sich das Banner, und das können Sie ändern.

„Der Fokus wird nicht im Banner gehalten“

Standardmäßig ist das Banner nicht modal. Besucher können weiterlesen und die Seite nutzen, während es geöffnet ist. Die Tastatur wechselt daher zwischen Banner und Seite. Das ist so gewollt: WCAG erwartet nur dann, dass der Fokus in einem Dialog bleibt, wenn dieser den Rest der Seite blockiert, und Erfolgskriterium 2.1.2 (Keine Tastaturfalle) verlangt, dass Besucher nicht modale Inhalte jederzeit verlassen können.

Wenn Besucher eine Wahl treffen sollen, bevor sie die Seite nutzen, aktivieren Sie die erzwungene Einwilligung. Das Banner öffnet sich dann als modaler Dialog: Die Seite dahinter ist gesperrt, und Tab sowie Umschalt + Tab bleiben im Banner, bis der Besucher eine Wahl trifft.

Öffnen Sie Shopify Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Öffnen Sie den Tab Advanced.
Aktivieren Sie unter Enforced consent (modals) die Option Enforced consent (modals).
Optional: Aktivieren Sie Lock background scroll.
Speichern Sie.

Mehr dazu: So nutzen Sie die erzwungene Einwilligung (Modals) im neuen Banner.

„Der Fokus kehrt nach dem Schließen nicht zur Seite zurück“

Wenn sich das Banner öffnet, wechselt der Tastaturfokus hinein. Tastatur- und Screenreader-Nutzer beginnen also mit der Banner-Nachricht.

Wenn sich das Banner schließt, verlässt der Fokus das Banner und kehrt zur Seite zurück:

Hat der Besucher das Banner über das Consent widget oder einen Link zum erneuten Öffnen geöffnet, kehrt der Fokus zu diesem Widget oder Link zurück.
Beim ersten Besuch hatte vor dem Banner kein Element der Seite den Fokus. Der nächste Tab setzt daher an der Position des Banners auf der Seite fort.

Der Fokus bleibt nie auf einem ausgeblendeten Element, und kein Teil der Seite wird übersprungen. Wenn der Fokus nach dem Schließen auf einem bestimmten Element landen soll (zum Beispiel dem Link Skip to content Ihres Themes), ist das eine Änderung an Ihrem Theme, nicht am Banner.

„Links kündigen nicht an, dass sie einen neuen Tab oder eine andere Website öffnen“

Die Links im Banner sind die, die Sie im Tab Content unter Links festlegen:

Privacy policy und Imprint öffnen sich standardmäßig im selben Tab. Nur wenn Sie Always open links in a new tab aktivieren, öffnen sie sich in einem neuen Tab.
Der Link Google partners öffnet die Google-Seite immer in einem neuen Tab.
In den Einstellungen öffnen die Links Learn more about provider die Seite des Anbieters in einem neuen Tab.

Ein Link, der ohne Hinweis einen neuen Tab öffnet, ist kein Verstoß gegen WCAG 2.2 Stufe A oder AA. Ein Hinweis ist trotzdem hilfreich. Sie können ihn auf zwei Arten ergänzen:

Öffnen Sie Shopify Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Öffnen Sie den Tab Content und scrollen Sie zu Links.
Deaktivieren Sie Always open links in a new tab, damit Ihre eigenen Seiten im selben Tab öffnen, oder ergänzen Sie den Hinweis im Linktext, zum Beispiel Datenschutzerklärung (öffnet in einem neuen Tab).
Speichern Sie und übernehmen Sie die Änderung unter All settings > Translations für Ihre weiteren Sprachen.

Mehr dazu: So bearbeiten Sie Texte und Links des Banners (Neue Version).

Das Banner nach Anpassungen barrierefrei halten

Die Zertifizierung gilt für das Banner, so wie wir es ausliefern. Manche Änderungen können Kontrast oder Lesbarkeit verschlechtern:

Farben: Achten Sie auf ausreichenden Kontrast zwischen Text und Hintergrund sowie zwischen Buttons und ihren Beschriftungen. Im Zweifel nutzen Sie ein Preset im Tab Style.
Custom styling (CSS): Blenden Sie keine Fokusrahmen aus, verkleinern Sie Text nicht unter eine gut lesbare Größe und verstecken Sie keine Buttons.
Texte: Verwenden Sie klare Button-Beschriftungen wie Akzeptieren, Ablehnen und Einstellungen.

Feedback

Wenn Sie oder Ihr Prüfer im Banner etwas finden, das schwer zu bedienen ist, schreiben Sie uns über den Chat in der App. Wir erfahren lieber von einer Barriere, als dass ein Besucher deswegen den Shop verlässt.