Cookie-Banner, die niemanden aussperren

Warum der Banner so kritisch ist

Der Banner steht vor allem anderen. Lässt er sich nicht schließen, ist die ganze Website blockiert. Typische Ursachen: Schaltflächen sind keine echten Buttons, der Fokus landet unsichtbar hinter dem Banner, oder der Banner deckt bei Vergrößerung den Inhalt komplett zu.

Ob Ihr Banner datenschutzrechtlich genügt, ist eine eigene Frage. Datenschutzbehörden verlangen zum Beispiel oft, dass Ablehnen so einfach ist wie Zustimmen. Das klären Sie bitte mit Ihrer Datenschutzberatung. Hier geht es nur um Barrierefreiheit, die aber in dieselbe Richtung zeigt: Zwei gleichwertige, gut sichtbare Schaltflächen helfen allen.

Echte Schaltflächen statt klickbarer Flächen

Jede Aktion braucht ein Element, das mit der Tastatur erreichbar ist (2.1.1 Tastatur) und dessen Rolle und Name Hilfsmittel erkennen (4.1.2 Name, Rolle, Wert). Ein <button> bringt das alles mit.

<div class="btn" onclick="accept()">
  OK
</div>

<button type="button" id="cc-accept">
  Alle akzeptieren
</button>
<button type="button" id="cc-reject">
  Nur notwendige
</button>

Der Button ist fokussierbar, reagiert auf Enter und Leertaste und wird als Schaltfläche angesagt. Die Beschriftung sagt, was passiert.

Als Dialog auszeichnen und benennen

Verhält sich der Banner wie ein Dialog, zeichnen Sie ihn auch so aus: role="dialog" mit einem Namen über aria-labelledby. aria-modal="true" gehört nur dazu, wenn der Rest der Seite wirklich gesperrt ist, solange der Dialog offen ist. Wie ein modaler Dialog richtig funktioniert, zeigt unser Muster für den modalen Dialog.

<div class="cookie-layer">
  <p>Wir nutzen Cookies …</p>
</div>

<div role="dialog" aria-labelledby="cc-h"
     aria-describedby="cc-p">
  <h2 id="cc-h">Cookie-Einstellungen</h2>
  <p id="cc-p">Wir nutzen Cookies …</p>
</div>

Fokus: hinein, sichtbar, wieder hinaus

• Erreichbar: Setzen Sie beim Öffnen den Fokus in den Dialog, oder platzieren Sie einen nicht modalen Banner früh im Quelltext, damit er mit der ersten Tab-Taste erreicht wird (2.4.3 Fokus-Reihenfolge).
• Sichtbar: Jede Schaltfläche zeigt einen deutlichen Fokusrahmen (2.4.7 Fokus sichtbar).
• Nicht verdeckt: Ein fest stehender Banner am unteren Rand darf das fokussierte Element nicht vollständig verdecken (2.4.11 Fokus nicht verdeckt (Minimum)).
• Kein Gefängnis: Der Fokus darf nicht in einem Bereich festhängen, den man nicht verlassen kann (2.1.2 Keine Tastaturfalle). Nach der Entscheidung kehrt er an eine sinnvolle Stelle zurück, etwa an den Seitenanfang.

Lesbar, auch vergrößert

• Beide Schaltflächen und der Text haben ausreichenden Kontrast (1.4.3 Kontrast (Minimum), 1.4.11 Nicht-Text-Kontrast).
• Bei 200 % Textgröße und 320 px Breite bleibt alles lesbar und bedienbar, ohne dass man waagerecht scrollen muss (1.4.4 Textgröße ändern, 1.4.10 Umbruch (Reflow)). Ein Banner, der dann den ganzen Bildschirm füllt, muss selbst scrollbar sein.
• Die Sprache des Banners entspricht der Sprache der Seite oder ist ausgezeichnet (3.1.2 Sprache von Teilen).
• Der Text ist kurz, die Schaltflächen sagen, was sie tun.

Später ändern können

Wer sich umentscheiden will, braucht einen Weg zurück: einen Link „Cookie-Einstellungen“, der auf jeder Seite an derselben Stelle steht, zum Beispiel im Fußbereich (3.2.3 Konsistente Navigation). Ein kleines schwebendes Symbol ohne Namen ist dafür ungeeignet; wenn Sie eines nutzen, braucht es einen zugänglichen Namen (4.1.2 Name, Rolle, Wert) und eine Zielgröße von mindestens 24 × 24 CSS-Pixeln (2.5.8 Zielgröße (Minimum)).

Checkliste zum Abhaken

Passende WCAG-Kriterien

• 2.1.1 Tastatur
• 2.1.2 Keine Tastaturfalle
• 2.4.3 Fokus-Reihenfolge
• 2.4.7 Fokus sichtbar
• 2.4.11 Fokus nicht verdeckt (Minimum)
• 4.1.2 Name, Rolle, Wert
• 1.4.3 Kontrast (Minimum)
• 1.4.10 Umbruch (Reflow)

Werkzeuge und Muster dazu

• Modaler DialogFokus beim Öffnen hinein, Escape schließt, Fokus zurück.
• Tastatur-TestFokus sichtbar machen und üben
• Kontrast-CheckerMit nächstem passenden Farbton
• Ohne Maus ans Ziel: Tastatur und FokusViele Menschen bedienen das Web ohne Maus: mit Tastatur, Schaltern, Sprachsteuerung oder Screenreader. Hier lesen Sie, was dafür funktionieren muss und wie Sie den Fokus in modernen Web-Apps richtig führen.

Häufige Fragen

Quellen

• W3C: WCAG 2.2
• W3C ARIA Authoring Practices: Dialog (Modal) Pattern
• W3C: Understanding 2.4.11 Focus Not Obscured (Minimum)