Barrierefreie Cookie-Banner

Cookie-Banner sind zu einem festen Bestandteil von Webseiten geworden. Sie erscheinen beim Einstieg in eine Webseite und zwingen Nutzende dazu, mit ihnen zu interagieren. Für Menschen mit Behinderungen kann das zu Problemen führen, wenn diese nicht barrierefrei gestaltet- oder aus Usability-Sicht schwer zu bedienen sind.

In diesem Artikel beleuchten wir, welche Punkte man bei einem barrierefreien Cookie-Banner beachten muss und wie man diese gestalten oder auswählen kann, damit sie keine Hürde darstellen.

Bedienkonzepte für Menschen mit Behinderungen

Menschen mit Behinderungen nutzen in der Regel Hilfsmittel oder Bedienungshilfen, um mit einem Computer oder Smartphone interagieren zu können. Blinde Menschen nutzen einen Screenreader, der die Inhalte der Webseite vorliest. Manche motorisch eingeschränkten Menschen nutzen eine Tastatur anstatt einer Maus, um eine Webseite zu bedienen. Sehbehinderte Menschen passen den Desktop über die Bedienungshilfen so an, dass sie die Inhalte wahrnehmen gut können.

Das sind nur einige Beispiele, warum Menschen mit Behinderungen auf andere Bedienkonzepte angewiesen sind als nicht-eingeschränkte Menschen. Bei der Programmierung einer Webseite muss man diese Anforderungen berücksichtigen. Das gilt auch für den Einsatz von Cookie-Bannern.

Anforderungen an ein barrierefreies Cookie-Banner

Um diesen Anforderungen zu begegnen, gibt es Richtlinien und Normen, die alle Einschränkungsarten berücksichtigen.

In Europa bildet die EN 301549 das zentrale Werk, das sich auf den internationalen Standard der Web Content Accessibility Guidelines (WCAG) bezieht. Darunter verbergen sich eine Vielzahl an Erfolgskriterien, von denen ein Teil für Cookie-Banner wichtig ist.

Farbkontrast

Ein ausreichender Farbkontrast zwischen Text und Hintergrund ist entscheidend für die Lesbarkeit, insbesondere für Menschen mit Sehbehinderungen. Verwenden Sie Tools zur Überprüfung des Kontrasts, um sicherzustellen, dass Ihr Banner den Anforderungen der Web Content Accessibility Guidelines (WCAG) entspricht.

Informationsvermittlung über Farbe

In der Barrierefreiheit gilt der Grundsatz, dass keine Informationen ausschließlich über Farbe vermittelt werden dürfen.
Beispielsweise könnte man das Annehmen oder Ablehnen eines Cookie Banners über die Farben Rot und Grün vermitteln. Das ist für Menschen mit einer Farbfehlsichtigkeit wie einer Rot-Grün Schwäche nicht wahrnehmbar. Daher sollten solche Informationen immer zusätzlich in Textform oder durch eine Formveränderung wie ein Häkchen oder ein Kreuz hervorgehoben werden.

Tastaturbedienbarkeit

Stellen Sie sicher, dass alle Funktionen im Cookie-Banner auch ohne Maus und nur über die Tastatur erreichbar sind. Das Banner sollte zudem keine Tastaturfalle enthalten. Der Fokus muss also immer wieder vom ausgewählten Objekt mit der Tastatur weiterbewegt werden können.

Schlüssige Tastatur-Reihenfolge

Wenn die Webseite mit der Tastatur bedient wird, soll die Reihenfolge, in der Objekte oder Formularelemente angesteuert werden, schlüssig und nachvollziehbar sein. Beim Öffnen des Cookie-Banners soll der Tastaturfokus automatisch auf das erste interaktive Element gesetzt werden. Nach dem Schließen des Banners sollte der Fokus zur Anfangsposition auf der Webseite zurückkehren.

Wichtig: Manchmal kommt es vor, dass nicht das Cookie-Banner mit der Tastatur angesteuert wird, sondern die Webseite im Hintergrund. Das sollte nicht passieren. Das Banner muss in der Reihenfolge zuerst ausgewählt werden. Nach Schließen des Cookie Banner sollte der Tastatur Fokus wieder auf das erste Element der Webseite zurückspringen.

Fokussierbare Elemente

Ein wichtiger Teil der Tastaturbedienung ist die Hervorhebung des Tastaturfokus. Für Tastaturnutzende ist es wichtig zu sehen, wo sich der Tastaturfokus gerade befindet, also welcher Link oder Schalter ausgewählt ist oder welches andere Formularelement gerade den Fokus hat.

Überschriften und Titel

Auch ein Cookie-Banner sollte einen Titel haben – Das kann über eine Überschrift oder eine entsprechende ARIA-Auszeichnung erfolgen und einen verständlichen Namen haben. So erfährt ein Screenreader-Nutzender, dass man sich jetzt in einem Cookie-Banner befindet.

Landmarks

Landmarks sind vor allem für Personen sehr hilfreich, die einen Screenreader bzw. eine Tastatur benutzen, um über eine Webseite zu navigieren. Für diese Zielgruppe kann es hilfreich sein, wenn ein Cookie Banner ebenfalls mit einer Landmark versehen ist, um schneller darauf springen zu können.

Alternativtext

Sollten Icons oder sogar Bilder im Cookie-Banner eingebunden sein, müssen diese über einen Alternativtext beschrieben werden, insofern sie mit einer Funktionalität verbunden sind. Löst also ein Bild oder Icon eine Funktion aus oder beschreiben sie einen Zustand, muss die Funktion im Alternativtext beschrieben werden. Falls Icon oder Bild nur einen illustrierenden Charakter haben, reicht ein leerer Alternativtext.

Checkboxen oder Ein-/Aus-Schalter

Checkboxen oder Schalter kommen in Cookie Bannern häufig vor, um Trackingfunktionen für die Webseite ein- und auszuschalten. Natürlich müssen auch diese mit der Tastatur ansteuerbar sein. Damit auch blinde Menschen darauf zugreifen können, müssen sie aber noch Hintergrundinformationen enthalten.

Für Schalter, die man ein und ausschalten kann (Englisch Switch), muss eine Statusbeschreibung hinterlegt werden. Dies kann über natives HTML oder ARIA realisiert werden. Checkboxen sollten mit einem entsprechenden Label ausgezeichnet werden.

Detailliertere Beschreibungen zur barrierefreien Umsetzung finden Sie auf der Webseite der Web Accessibility Initiative unter Checkboxen und Switches.

Einfache Sprache

Versuchen Sie, Cookie-Banner auch sprachlich so zu gestalten, dass sie möglichst einfach verstanden werden können. Das beinhaltet auch das Erklären oder Vermeiden komplizierter Begriffe.

Eindeutige Begriffe

Benennen Sie die Schaltflächen eindeutig und konsistent. Klickbare Elemente sollten mit eindeutigen Begriffen wie "Akzeptieren" oder "Ablehnen" bezeichnet werden. Das gilt auch für die Benennung in der Überschrift oder im Titel.

Responsives Design

Das Cookie-Banner sollte auf verschiedenen Bildschirmgrößen und -auflösungen gut funktionieren und sich auch an Bildvergrößerungen anpassen.

Kompatibilität mit Hilfsmitteln

Hilfsmittel wie Screenreader sind auf eine robuste Programmierung angewiesen, da sie auf Hintergrundinformationen der Webseite zugreifen. Diese stecken im Code. Verwenden Sie semantisch korrekte HTML-Elemente und ARIA-Labels, um sicherzustellen, dass das Cookie-Banner von Screenreadern richtig interpretiert wird.

Weitere Usability-Tipps für Cookie-Banner

Neben den Kriterien für Barrierefreiheit, die sich aus den WCAG ableiten, kann man auch noch andere Aspekte berücksichtigen, damit Cookie-Banner für alle Menschen einfacher zu bedienen sind.

Layout

Überfrachtete Cookie-Banner mit vielen, komplizierten Funktionalitäten können ein Problem für kognitiv oder visuell eingeschränkte Menschen sein. Versuchen Sie daher, Ihr Banner einfach zu halten.

Große Bedienoberflächen

Alle interaktiven und klickbaren Elemente sollten ausreichend groß sein, damit diese auch von Menschen mit motorischen Einschränkungen wie einer Spastik gut erreicht werden können.

Einfaches Ablehnen

Es ist leider eher die Regel als die Ausnahme, dass der Button "Akzeptieren" direkt anklickbar ist, "Ablehnen" jedoch häufig schwer und über mehrere Schritte erreichbar ist. Zumeist muss man mehrere Häkchen setzen, viel lesen und scrollen. Für Menschen mit Behinderungen kann das sehr aufwendig sein und lange dauern. Das kann dazu führen, dass eingeschränkte Menschen eher dazu neigen, einen Cookie-Banner zu akzeptieren, als abzulehnen.

Cookie Banner Plugins

Es gibt zahlreiche fertige Plugins oder andere Integrationen in Content Management Systemen, die man installieren kann, um die Funktionalität eines Cookie Banner einfach zu integrieren.

Überprüfen Sie bei solchen Plugins stets die oben angeführten Kriterien, hören Sie sich das Banner mit einem Screenreader an und versuchen Sie mit der Tastatur durchzunavigieren. Sollten Probleme auftauchen, ist das Banner vermutlich nicht barrierefrei.

Achten Sie aber am besten schon bei der Auswahl des Banners darauf, dass entscheidende Begriffe wie "barrierefrei" nach "WCAG"- oder "EN301549"-Standard dokumentiert sind. Versuchen Sie diese Begriffe in ihrer Suchmaschinen-Suche mit einzubeziehen.

Da die meisten Entwicklungen in diesem Bereich international sind, suchen sie in englischer Sprache. Geben Sie beispielsweise folgendes ein: accessibility cookie banner plugin wcag.

Fazit

Cookie Banner sind aufgrund gesetzlicher Bestimmungen weit verbreitet. Für sie gelten die gleichen Anforderungen an Barrierefreiheit wie für alle anderen Elemente auf der Webseite.

Leider sind Cookie Banner häufig kompliziert gestaltet, um Nutzende dazu zu bewegen, aus Bequemlichkeit Akzeptieren zu klicken. Für Menschen mit Behinderung können solche komplizierten Mechanismen problematisch sein, weil beispielsweise kognitiv eingeschränkte Menschen sie nicht verstehen oder motorisch eingeschränkte Menschen sehr lange brauchen, um sie zu bedienen.

Wie beschrieben, neigen daher eingeschränkte Menschen eher dazu, den kürzeren Weg zu gehen. Aus Sicht der Gleichstellung ist das aber problematisch. Achten Sie also darauf ihren Cookie Banner barrierefrei und so einfach wie möglich zu gestalten.