Arbeiten mit Barrierefreiheit/WCAG
Standardmäßig ist die Zustimmungsebene für die Zugänglichkeit durch Screenreader und ähnliche Tools vorbereitet, in manchen Fällen können jedoch Anpassungen der Designeinstellungen erforderlich sein.
WCAG-Unterstützung für Cookie-Banner aktivieren
Um die Unterstützung für WCAG (Web Content Accessibility Guidelines 2.2) zu aktivieren, melden Sie sich bitte bei Ihrem Konto an und gehen Sie zu Menü > Designs und bearbeite das entsprechende Design. Erweitere die Einstellungen unter „Box-Einstellungen“ und aktiviere WCAG:
WCAG-Änderungen an der Ausgabe der Einwilligungsebene
Wenn die WCAG-Einstellung für ein Design aktiviert ist, werden die folgenden Änderungen auf die Zustimmungsebene angewendet:
- Die Zustimmungsebene wird in ein ShadowRoot-Element eingebettet
- Überschriften in der Zustimmungsebene verwenden das Element Und anstatt
- Toggle-Texte verwenden Element statt
- Das Menü auf der Ebene mit den benutzerdefinierten Einstellungen verwendet das Element anstatt
- Elemente zur Altersüberprüfung werden mit einem Label versehen
- Tabellen werden beschriftet
- Elemente erhalten aria-label, aria-checked, aria-modal, role und ähnliche Attribute
- Gatekeeper-Option verfügbar (siehe unten)
Gatekeeper-Option
Bei aktiviertem WCAG kann zusätzlich die Option Gatekeeper aktiviert werden. Diese verhindert, dass die Consent-Ebene den Fokus verliert: Drückt der Nutzer die TAB-Taste (oder ein ähnliches Navigationselement auf seiner Tastatur), bleibt der Fokus immer in der Consent-Ebene und springt nicht an Positionen innerhalb der Website.
Entwurfsüberlegungen
Bitte beachten Sie, dass die technischen Änderungen möglicherweise auch zusätzliche Änderungen am Design selbst erfordern, um vollständig WCAG-konform zu sein. Beispiele hierfür sind:
- Verwenden einer geeigneten Schriftgröße (z. B. em oder pt statt px)
- Verwenden Sie eine weit verbreitete serifenlose Schriftart (z. B. Times New Roman, Verdana, Arial usw.).
- Verwenden Sie ein Farb- und Kontrastverhältnis, das leicht zu unterscheiden ist (z. B. Kontrastverhältnis 3:1 zwischen Text und Hintergrund).
- Verwenden Sie einen Textabstand, der ein einfaches Lesen des Inhalts ermöglicht (z. B. Zeilenhöhe von 1.5 em).
Neben rein grafischen Änderungen können einige WCAG-Anforderungen die Verwendung bestimmter Einstellungen im Design erfordern. Um die WCAG-Anforderungen zu erfüllen, müssen Sie beispielsweise möglicherweise Menüs in Ihrem Zustimmungsebenen-Design aktivieren.
Weiterführende Literatur
- WCAG-Richtlinien auf w3.org: https://www.w3.org/TR/WCAG22/
