Een toegankelijke cookiebanner

• de banner staat in de code helemaal onderaan, terwijl hij op het scherm bovenop alles ligt;
• de focus gaat niet naar de banner, waardoor een toetsenbordgebruiker eerst door de hele pagina moet tabben;
• de rest van de pagina is visueel geblokkeerd, maar voor een screenreader niet;
• de knoppen zijn kleine linkjes in een lichte kleur;
• bij vergroting of op een smal scherm bedekt de banner het hele scherm, en de knoppen vallen eronder weg.

Voor de vraag of en welke melding u nodig heeft, verwijzen wij naar heeft u een cookiemelding nodig. Hier gaat het erom dat de melding die u heeft, door iedereen te bedienen is.

Focus en volgorde

Blokkeert de banner de pagina, dan gedraagt hij zich als een dialoogvenster: de focus gaat bij het openen naar de banner, blijft daarbinnen tot er een keuze is gemaakt, en gaat daarna naar het begin van de pagina. Blokkeert hij de pagina niet, dan staat hij bij voorkeur vooraan in de code, zodat hij als eerste wordt bereikt en voorgelezen.

Bediening met het toetsenbord

Alle knoppen, schakelaars en links in de banner werken met Tab, Enter en de spatiebalk. Het detailscherm met cookiecategorieën ook. Een zichtbare focusrand is er ook binnen de banner, niet alleen op de rest van de site.

Begrijpelijke knoppen en schakelaars

Een knop heet "Alle cookies accepteren" of "Alleen noodzakelijke cookies", niet "OK" of een kruisje zonder naam. Schakelaars per categorie laten horen of ze aan of uit staan. Een dialoog heeft een kop of naam, zodat een screenreader zegt waar de bezoeker is.

Contrast en grootte

Tekst in de banner haalt 4,5:1 contrast, knoppen en schakelaars minstens 3:1 tegen hun achtergrond. Keuzeknoppen zijn ruim genoeg om op een telefoon te raken; WCAG 2.2 noemt 24 bij 24 CSS-pixels als ondergrens. Uitleg over die regel staat in knoppen groot genoeg om te raken. Het meten van contrast behandelen wij op kleurcontrast verbeteren.

Werkt bij vergroting en op een smal scherm

Bij 400 procent zoom of een breedte van 320 CSS-pixels moet de bezoeker de tekst en de knoppen nog kunnen bereiken, desnoods door binnen de banner te scrollen. Waarom dat ertoe doet, leest u in reflow op 400 procent zoom.

Geen verstopte focus

Een banner die vast onderaan het scherm blijft staan, mag het element waar de focus op staat niet volledig bedekken. Dat is een van de eisen die met WCAG 2.2 is bijgekomen.

Later terug te vinden

De link om cookie-instellingen te wijzigen, meestal in de footer, is een gewone, toegankelijke link of knop, en geen klein zwevend icoontje zonder naam.

1. Open uw site in een privévenster, zodat de banner verschijnt.
2. Raak de muis niet aan. Druk op Tab. Komt u in de banner terecht, en ziet u waar de focus staat?
3. Open de instellingen of voorkeuren. Kunt u een categorie aan- en uitzetten en de keuze opslaan?
4. Maak een keuze. Waar staat de focus daarna?
5. Zoom in tot 400 procent, of open de site op een telefoon in liggende stand. Zijn de knoppen nog bereikbaar?

Valt u bij een van deze stappen uit, dan heeft u een probleem dat op elke pagina en bij elke nieuwe bezoeker terugkomt. Meer over testen zonder muis leest u op uw website bruikbaar maken met alleen een toetsenbord.

1. Test. Wij testen de banner en het voorkeurenscherm met toetsenbord, screenreader, vergroting en op mobiel.
2. Instellingen. Veel cookieplugins hebben opties voor de positie, de vorm van de knoppen, kleuren en of de banner de pagina blokkeert. Wij stellen die zo in dat de banner zo goed mogelijk werkt.
3. Aanvullende code. Waar instellingen tekortschieten, verbeteren wij kleuren, focusstijl en knopteksten met eigen CSS of kleine aanpassingen, zonder de plugin zelf te wijzigen.
4. Alternatief. Is een banner niet te repareren, dan stellen wij een andere plugin voor en richten die in.
5. Video's en kaarten. Wij controleren ook de meldingen op plekken waar ingesloten inhoud wacht op toestemming, zoals bij YouTube-video's of kaarten. Voor video's is er een aparte aanpak bij video's toegankelijk maken.

Wat wij niet doen: beoordelen of uw cookiebeleid juridisch klopt of welke cookies toestemming nodig hebben. Daarvoor kunt u bij een privacyjurist terecht.

• Houd de tekst in de banner kort en begrijpelijk. Een lange juridische tekst hoort op de cookiepagina, niet in de banner.
• Kies voor knoppen met duidelijke namen, die gelijkwaardig zijn in grootte en leesbaarheid.
• Herhaal de vijf testjes hierboven na elke update van de cookieplugin.
• Laat de banner niet bovenop een pop-up voor uw nieuwsbrief komen. Twee lagen tegelijk is voor iedereen verwarrend.

De cookiebanner is maar één onderdeel van een toegankelijke site. Waar u verder begint, staat op audit, herstel en toegankelijkheidsverklaring.