Dokumentationsmenü
Barrierefreiheit (WCAG)
Barrierefreiheit des CookieHug-Banners: Dialog-Semantik, Tastaturbedienung, Fokusverwaltung, Screenreader und reduzierte Bewegung.
Barrierefreiheit des Banners (WCAG)
Das Einwilligungsbanner ist oft das erste interaktive Element, dem ein Besucher begegnet — auch Besucher, die mit Tastatur oder Screenreader arbeiten. Das CookieHug-Banner ist auf die Kriterien von WCAG 2.1 AA ausgelegt und ohne Maus vollständig bedienbar, ganz ohne zusätzliche Konfiguration auf Ihrer Seite.
Semantik für assistive Technologien
- Das Banner ist ein Dialog (
role="dialog") mit verknüpftem Titel und verknüpfter Beschreibung (aria-labelledby/aria-describedby) — Screenreader kündigen es beim Öffnen korrekt an. - In der zentrierten Position (mit abgedunkeltem Hintergrund) ist das Banner als modal markiert (
aria-modal="true"). - Die Kategorieschalter sind echte
checkbox-Elemente mit Beschriftung — Screenreader nennen Kategorienamen und Zustand. - Ausklappbare Bereiche (Kategorien, Cookie-Details) tragen
aria-expandedundaria-controls, sodass der eingeklappte Zustand stets angesagt wird. - Dekorative Elemente (Cookie-Symbol, Pfeile) sind vor Screenreadern verborgen (
aria-hidden). - Der Toaster für Global Privacy Control hat die Rolle
status— seine Meldung wird angesagt, ohne den Fokus zu stehlen.
Tastaturbedienung und Fokus
| Taste | Aktion |
|---|---|
| Tab / Umschalt+Tab | Bewegt sich durch alle Bedienelemente des Banners (Schaltflächen, Schalter, ausklappbare Bereiche); im Modal-Modus zirkuliert der Fokus innerhalb des Dialogs (Fokusfalle) |
| Enter / Leertaste | Aktiviert Schaltflächen, schaltet Kategorien um, klappt Bereiche und Cookie-Details auf |
| Escape | Schließt ein nicht modales Banner (die Entscheidung lässt sich später über das schwebende Symbol treffen) |
Der Fokus wird automatisch verwaltet: Öffnet der Besucher das Banner, wandert der Fokus in den Dialog, beim Schließen kehrt er dorthin zurück, wo er herkam. Erscheint ein nicht modales Banner automatisch, wird der Fokus der Seite nicht entzogen. Jedes Element hat einen sichtbaren Fokusindikator (:focus-visible). Auch das schwebende Symbol zum erneuten Öffnen ist eine per Tastatur erreichbare Schaltfläche.
Reduzierte Bewegung
Meldet das System des Besuchers die Einstellung prefers-reduced-motion, werden Animationen und Übergänge des Banners deaktiviert.
Was auf Ihrer Seite bleibt
- Farbkontrast — die Bannerfarben konfigurieren Sie selbst; halten Sie den Kontrast zwischen Text und Hintergrund bei mindestens 4,5:1 (WCAG 1.4.3). Die mitgelieferten Stilvorlagen erfüllen diesen Schwellenwert.
- Einfache Sprache — wenn Sie Bannertexte überschreiben, halten Sie sie einfach und frei von Fachjargon.
- Bannersprache passend zur Seitensprache — das SDK übernimmt sie automatisch aus dem
lang-Attribut der Seite, überschriebene Texte müssen aber in der richtigen Sprache verfasst sein.