Barrierefrei bleiben: Cookie-Banner mit dem etracker consent manager gestalten

von Katrin Nebermann

Der 28. Juni 2025 ist ein wichtiges Datum für alle Website- und Online-Shop-Verantwortliche: Das Barrierefreiheitsstärkungsgesetz (BFSG) tritt in Kraft. Wir zeigen dir, was du beim Anpassen des Consent-Dialogs bzw. Cookies-Banners beachten musst.

Ein kurzer Exkurs – WCAG und BFSG

Das Europäische Parlament und der Rat haben bereits 2019 eine Richtlinie erstellt, die die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen definiert (siehe: https://eur-lex.europa.eu/eli/dir/2019/882/oj?locale=de). Sie orientiert sich an den internationalen Grundsätzen der Web Content Accessibility Guidelines (WCAG). Damit wurde das Fundament zur Stärkung der Barrierefreiheit in Europa verabschiedet. Eine Umsetzung dieser Richtlinie erfolgt in Deutschland durch das Barrierefreiheitsstärkungsgesetz – kurz BFSG.

Der daraus resultierende WCAG-Prozess prüft die Zugänglichkeit von Online-Angeboten. Hierbei wird in drei Konformitätsstufen unterschieden: A, AA, AAA. Diese Abstufung zeigt an, ob ein Merkmal eine hohe (A) oder niedrige (AAA) Priorität besitzt. Für den Start im Juni ist WCAG 2.2 (AA) bindend (https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/).

Cookie-Banner – Erstkontakt nach WCAG 2.2

Für die meisten Nutzer ist das Cookie-Banner der erste Kontakt mit einer Website. In Hinblick auf die Gestaltung des Banners spielen die aktuellen WCAG 2.2-Anforderungen genauso eine Rolle wie für die eigentliche Website. Insgesamt gibt es vier Prinzipien, die beachtet werden müssen:

• Wahrnehmbar – gut sichtbar platziert, Einhaltung von Kontrastfarben
• Bedienbar – bedienbar zusätzlich per Tastatur
• Verständlich – Text und Buttons sind klar definiert
• Robust – Plattform- und Endgeräte-übergreifende Darstellung

Barrierefreies Cookie-Banner von etracker

Neben etracker analytics und dem etracker tag manager, stellt der etracker consent manager einen weiteren wichtigen Bestandteil der All-in-One-Lösung von etracker dar.

Standardmäßig sind Inhalte und Designeinstellungen des im etracker consent managers bereitgestellten Consent-Banners barrierefrei. D.h. in den initialen Einstellungen hat etracker bereits auf Kriterien wie Tastatursteuerung, Screenreader-lesbarkeit, Kontrastverhältnisse und ausreichende Schriftgröße geachtet.

Werden Anpassungen vorgenommen, um beispielsweise CI-Vorgaben zu erfüllen, gehört anschließend der Blick auf die Einhaltung der Barrierefreiheit unbedingt zum Gestaltungsprozess. Hierbei sollten dann die folgenden Punkte geprüft werden:

• Ist der ergänzte oder geänderte Text (weiterhin) verständlich?
• Entspricht die Farbwahl von Hintergrund und Text dem notwendigen Kontrastverhältnis?

Testen von Farben und Kontrastwerten

Nach den Richtlinien der WCAG 2.2 (AA) werden drei Elemente unterschieden. Dabei handelt es sich um kleinen Text mit weniger als 24px/18pt, großen Text mit 24px/18pt oder mehr und „Nicht-Text-Kontrast“, der sich auf Icons oder grafische Objekte bezieht.

All diese Elemente müssen jeweils ein bestimmtes Kontrastverhältnis aufweisen:

• Großer Text: Kontrast 3:1
• Normaler Text: Kontrast 4,5:1
• Nicht-Text-Kontrast: Kontrast 3:1

Auswahl Test-Tools*, die mindestens WCAG 2.2 erfüllen:

• WCAG Color Contrast Checker von Skynet Technologies USA LLC
  https://www.skynettechnologies.com/color-contrast-checker
• DigitalA11Y Color Contrast Checker (Addon) von DigitalA11Y
  https://chromewebstore.google.com/detail/color-contrast-checker-by/hfcoldjibhgbnlambdiecfneiegagkhi?hl=en
• AudioEye Color Contrast Checker von AudioEye
  https://www.audioeye.com/color-contrast-checker/

Zusammenfassung – Barrierefreiheit für Cookie-Banner

Es ist wichtig, dass Website-Betreiber ihre Online-Angebote an die Anforderungen des BFSG anpassen. Nicht nur um sicherzustellen, dass sie den Bedürfnissen aller Nutzer gerecht werden, sondern auch um Bußgelder und Strafen zu vermeiden.

Auch das Consent-Banner, das in der Regel als erstes auf einer Website erscheint, muss bestimmte Kriterien des BSFG erfüllen. Diese sind:  Sichtbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.

etracker bietet im etracker consent manager bereits standardmäßig barrierefreie Inhalte und Designeinstellungen. Diese können individuell angepasst werden. Bei nachträglichen Anpassungen sollten jedoch Punkte wie die Lesbarkeit von Texten und das Kontrastverhältnis zwischen Hintergrund und Text überprüft werden. Hierbei helfen Tools, die z.B. den Kontrast zwischen Farben überprüfen, um sicherzustellen, dass die Anforderungen der WCAG 2.2 (AA) erfüllt sind.

---