WCAG-Audit-Discussions / producten-bevindingen

Hier verzamelen we toegankelijkheidsproblemen die vaker voorkomen en bekend zijn bij producten en webdiensten.
4 stars 0 forks source link

Cookiebot #4

Open JuliaZjochova opened 2 months ago

JuliaZjochova commented 2 months ago

Getest op 24-04-2024 op https://snellerpoort.nl/  www.cookiebot.com Last update: March 31, 2024

1.1.1

Wanneer de website voor het eerst wordt bezocht, verschijnt er een pop-up met een cookiemelding. In deze cookiebanner staat bovenaan een logo met de zichtbare tekst 'Snellere poort'. Echter, het alt-attribuut van het logo bevat enkel de tekst 'logo'. De alternatieve tekst moet de zichtbare tekst 'Snellere poort' bevatten.

1.3.1

Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Onder de tab "Details" staan een aantal interactieve kopteksten, namelijk "Noodzakelijk", "Voorkeuren", "Statistieken" enzovoort. Deze kopteksten zijn nu niet herkenbaar als koppen doordat geen heading elementen zijn gebruikt. Er zijn label-elementen gebruikt. Deze teksten staan nu ook al binnen een button element. Door deze button elementen binnen een heading element te plaatsen wordt de tekst van de knop ook als koptekst herkend door hulpsoftware. 

In de cookiebanner bevinden zich tabbladen met de labels 'Toestemming', 'Details' en 'Over'. Binnen het tabblad 'Over' staan zes alinea’s, bijvoorbeeld beginnend met 'Cookies zijn kleine tekstbestanden...'. Momenteel zijn alle paragrafen binnen een div-element geplaatst en gescheiden door het br-element. Om de inhoud correct te structureren, dient elke alinea omsloten te worden door een p-element. Zie https://snellerpoort.nl/.

In de cookiebanner op het tabblad 'Details', onder 'Noodzakelijk' en specifiek onder 'Cookiebot', worden tussenkopjes niet als kopteksten opgemaakt. Zo worden bijvoorbeeld '1.gif' en 'CookieConsent' opgemaakt met het strong-element, dat bedoeld is om inhoud te benadrukken, en niet als een alternatief voor koppen. Gebruik in plaats daarvan echte kopteksten.

1.4.10

Als de website voor het eerst bezocht wordt ,verschijnt een popup met een cookiemelding. Wanneer wordt ingezoomd naar 400% bij een schermgrootte van 1280px breed, verdwijnt in de cookiebanner alle inhoud onder de tabbladen "Toestemming", "Details" en "Over".

2.4.3

Als de website voor het eerst bezocht wordt, verschijnt een popup met een cookiemelding. In de cookiebanner zijn er tabbladen "Toestemming", "Details" en "Over". Als een bezoeker de tab "Details" activeert, dan gaat de focus eerst nog langs de opties "Over" of "Toestemming" voor de focus in het tabblad komt, wat bij "Details" hoort. Dat is dus niet de bedoeling. De toetsenbordbediening voor tabs moet bestaan uit een combinatie van gebruik van de TAB-toets en de pijltjestoetsen. Met de Tab-toets moet de toetsenbordfocus op de actieve tab geplaatst worden. Met de pijltjes toetsen moet ik dan kunnen wisselen tussen de tabs. Als ik dan een andere tab activeer moet ik vervolgens met de TAB-toets naar de inhoud van het bijbehorende tabpanel gaan. Dan werkt het logisch en zoals verwacht.  

In de cookiebanner bevinden zich de tabbladen 'Toestemming', 'Details' en 'Over'. Wanneer een bezoeker navigeert met het toetsenbord, krijgt een onzichtbaar element de focus na het tabblad 'Over'.

2.4.6

Als de website voor het eerst bezocht wordt verschijnt een cookiemelding in een popup. In deze melding staan twee knoppen, namelijk "Weigeren" en "Alles toestaan”. Visueel is duidelijk wat het doel is van deze knoppen, omdat deze visueel in de context staan van de popup. Voor mensen die blind zijn en hulpsoftware gebruiken en met de Tab-toets van de ene interactieve component naar de volgende springen zijn deze knop teksten niet heel duidelijk. Hulpsoftware kan er niet automatisch de context bij voorlezen. Het is dus beter om hier voor hulpsoftware het doel van de knoppen duidelijker te maken. Visueel mag dit dus wel hetzelfde blijven, maar mag ook aangepast worden. Zolang het voor hulpsoftware maar duidelijker is. In plaats van "Weigeren" kan dan bijvoorbeeld met een aria-label de tekst "Weigeren van alle cookies" gebruikt worden. Belangrijk is in ieder geval dat de zichtbare tekst altijd terugkomt in het aria-label om te blijven voldoen aan succescriterium 2.5.3. In plaats van "Alles toestaan" zou er beter visueel kunnen staan "Alle cookies toestaan”. Als er visueel wel "Alles toestaan” blijft staan, dan moet in het aria-label attribuut iets staan als "Alles toestaan: alle cookies toestaan (let op dat dus de zichtbare tekst letterlijk en bij elkaar terug moet komen in het aria-label voor SC 2.5.3).

2.4.11

Als de website voor het eerst bezocht wordt verschijnt een cookiemelding in een popup. Wanneer tot 400% wordt ingezoomd bij een schermresolutie van 1280px, is de focus niet meer zichtbaar op de interactieve elementen in de cookiebanner.

3.1.2

Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. In de cookiebanner bevinden zich de tabbladen 'Toestemming', 'Details' en 'Over'. Op het tabblad "Details" onder “Noodzakelijk" en dan vervolgens onder het kopje "Cookiebot" staat een link "Meer informatie over deze aanbieder". De naam van de link bevat "opens in a new window”. Deze tekst is in het Engels, terwijl de hoofdtaal Nederlands is.

gjccopinga commented 2 months ago

@JuliaZjochova Kun je ook een website URL er bij zetten waar deze Cookiebot wordt gebruikt (één voorbeeld is voldoende)? Dan kunnen we 'zien' waar het over gaat.