Cookie-Banner befinden sich auf jeder Website. Es ist wichtig, dass Menschen, die mit assistiven Technologien im Web unterwegs sind, die Banner lesen und bedienen können. Das betrifft vor allem Screenreader-Nutzende und Menschen, die nicht mit der Maus navigieren. Für Screenreader muss das Banner vorgelesen werden, es muss klar sein, wo man sich gerade befindet und auch für z. B. Tastaturnutzer muss es möglich sein, im Banner zu navigieren. Wie immer, wenn man Dinge barrierefrei gestaltet, sollte man sich zuerst überlegen, wer die Website nutzen wird und mit welchen Technologien. Ausgehend davon sollte man das jeweilige Element gestalten.
Woraus besteht ein Cookie-Banner? Meistens handelt es sich um einen Container mit Aktionen, in dem die Benutzer in einem extra Modal erweiterte Einstellungen konfigurieren können.
Dieser Artikel beschreibt den Bau eines barrierefreien Cookie-Banners nach einem Artikel von Quentin Bellanger. Er ist etwas in die Jahre gekommen und das Code-Beispiel, dass er auf Codepen zeigt, ist nicht mehr zeitgemäß. Vor allem sollte für das Modal, das die Einstellungsmöglichkeiten zum Cookie-Banner enthält, jetzt das HTML-Element <dialog> verwendet werden, das es seit ca.2022 gibt.
Zur (veralteten) Demo auf Codepen.
DOM-Reihenfolge
Ein Cookie-Banner sollte das erste fokussierbare Element auf der Seite sein, noch vor dem Link zum Überspringen und vor der Hauptnavigation der Website. Der Gedanke dahinter ist, dass jeder Besucher, der auf die Website kommt, in der Lage sein muss, schnell damit zu interagieren, da es in vielen Ländern eine gesetzliche Vorschrift ist.
Es handelt sich im Allgemeinen um ein div, das oft mit position:fixed positioniert wird, damit es auf dem Bildschirm sofort über den anderen Elementen zu sehen ist. Vereinfachtes Beispiel für eine HTML-Struktur:
<body>
<!-- Cookies banner should be there -->
<div class="banner">
...
</div>
<dialog>
<!--Cookie-Settings in here-->
</dialog>
<header>
<!-- Skip to content link -->
<a> ... </a>
<!-- Website main navigation -->
<nav>...</nav>
</header>
<!-- Main page content -->
<main>...</main>
<footer>...</footer>
</body>Banner-Aktionen
Bei einem Cookie-Banner können man oft zwei Aktionen durchführen, „Alles akzeptieren“ (und das Banner schließen) oder „Erweiterte Einstellungen öffnen“, dies ist meist ein Modal.
Für beide Aktionen muss <button type="button"> verendet werden, weil etwas getan und nicht an eine andere Stelle verlinkt wird.
Nach dem Anklicken schließt „Alles akzeptieren“ das Banner und akzeptiert Cookies. Die zweite Aktion öffnet bei Klick ein Modal. Ereignis-Listener (addEventListener()) kann hier benutzt werden, um Aktionen (Banner ausblenden, Modal öffnen) anzuhängen.
Der schwierigste Teil kommt jetzt: ein zugängliches Modal erstellen. Für die Details, wie man am besten eines baut, kann man bei der WAI die Best Practises nachschauen, wobei auch hier der Code etwas in die Jahre gekommen ist.
Jede Cookie-Kategorie muss unter einer bestimmten Rubrik (Tracking, Benutzererfahrung…) angezeigt werden, damit die Benutzer wissen, worum es geht. Es sollten Checkboxen verwendet werden, um jedes Cookie zu akzeptieren oder abzulehnen. Häufig werden Schiebregler (optisch) für diese Einstellungen verwendet, das ist aber nicht zu empfehlen, da es schwierig barrierefrei für Screenreader umsetzbar ist und auch optisch mit den Farben schwer verständlich sein kann – im Sinne von „wann ist der Schalter an und wann aus?“. Hier ein guter Artikel zum Problem mit diesen „Toggles“ sowie ein paar Lösungen.
Gute Praxis ist es auch, den Button zum Anpassen der Einstellungen optisch prominent zu machen, anstatt nur des „Alles akzeptieren“-Buttons.
Die wichtigsten Punkte sind:
- Platziere das Banner früh im DOM.
- Verwende Buttons für Aktionen, keine Links.
- Erstelle ein zugängliches Modal.
- Gruppiere Cookies nach Kategorien.
- Verwende für jedes Cookie ein Kontrollkästchen.
Links:
Demo: Codepen (veraltet)
Original-Artikel (von 2020): Accessibility of cookies banners