Login

Try consentmanager
Book a call

Arbeiten mit Barrierefreiheit / WCAG

Standardmäßig ist die Einwilligungsseite so gestaltet, dass sie für Screenreader und ähnliche Tools zugänglich ist, doch in manchen Fällen können Anpassungen an den Design-Einstellungen 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, logge dich bitte in dein Konto ein, gehe zu Menü > Designs und bearbeite das entsprechende Design. Erweitere die Einstellungen unter „Erweiterte Einstellungen anzeigen“ und aktiviere WCAG:

WCAG-Änderungen an der Ausgabe der Einwilligungsschicht

Wenn die WCAG-Einstellung für ein Design aktiviert ist, werden die folgenden Änderungen auf die Einwilligungsschicht angewendet:

  • Die Einwilligungsschicht wird in ein shadowRoot-Element eingebettet
  • Überschriften in der Einwilligungsschicht verwenden die Elemente <h1> und <h2> anstelle von <div>.
  • Toggle-Texte verwenden das Element <label> anstelle von <div>.
  • Das Menü auf der Ebene der benutzerdefinierten Einstellungen verwendet das Element <nav> anstelle von <div>.
  • Elemente zur Altersüberprüfung werden mit einer Beschriftung versehen
  • Tabellen werden mit Überschriften versehen
  • Elemente erhalten Attribute wie aria-label, aria-checked, aria-modal, role und ähnliche.
  • Die Gatekeeper-Option ist verfügbar (siehe unten)

Gatekeeper-Option

Wenn WCAG aktiviert ist, kann auch die Option „Gatekeeper“ aktiviert werden. Dies verhindert, dass die Einwilligungsschicht den Fokus verliert: Wenn der Nutzer die TAB-Taste (oder ein ähnliches Navigationselement auf seiner Tastatur) drückt, bleibt der Fokus immer innerhalb der Einwilligungsschicht und springt nicht zu anderen Positionen auf der Website.

Gestaltungshinweise

Bitte beachten Sie, dass die technischen Änderungen möglicherweise auch zusätzliche Änderungen am Design selbst erfordern, um die WCAG-Richtlinien vollständig zu erfüllen. Beispiele hierfür sind:

  • Verwenden Sie eine geeignete Schriftgröße (z. B. em oder pt statt px)
  • Verwenden Sie eine weit verbreitete serifenlose Schriftart (z. B. Times New Roman, Verdana, Arial, …)
  • Verwenden Sie ein Farb- und Kontrastverhältnis, das leicht zu unterscheiden ist (z. B. ein Kontrastverhältnis von 3:1 zwischen Text und Hintergrund).
  • Verwenden Sie einen Zeilenabstand, der das Lesen des Inhalts erleichtert (z. B. eine Zeilenhöhe von 1,5 em).

Neben rein grafischen Änderungen können einige WCAG-Anforderungen erfordern, dass Sie bestimmte Einstellungen im Design verwenden. Um beispielsweise die WCAG-Anforderungen zu erfüllen, müssen Sie möglicherweise Menüs in Ihrem Design für die Einwilligungsschicht aktivieren.

Weiterführende Literatur

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!