Een voorbeeldimplementatie is te vinden op de website vrhm.nl
Datum: 2 maart 2024
Disclaimer: Controleer altijd in de praktijk of alle problemen nog steeds van toepassing zijn of dat er al problemen zijn opgelost. Als er problemen al zijn opgelost dan graag in de opmerkingen hieronder aangeven, dan pas ik het aan in dit overzicht. Ook als er problemen gemist zijn of bijgekomen zijn graag in de opmerkingen hieronder aangeven. Ook dan pas ik het aan in het overzicht hieronder.
SC 1.1.1
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het Tabblad bij "Instellingen" staan naast de vetgedrukte kopjes "Noodzakelijk", "Prestaties" en "Functioneel" kleine icoontjes van een pijltje naar beneden (of naar boven). Deze icoontjes zijn informatief en functioneel omdat deze als knop fungeren. Deze afbeelding moet dan dus een alternatieve tekst krijgen die de functie ervan aangeeft. Die ontbreekt op dit moment.
Hier is een SVG element gebruikt voor deze icoontjes. Een alternatieve tekst kan hier bij de SVG zelf worden toegepast door een title element (dus niet attribuut) binnen het SVG element. Binnen het title element kan dan aangegeven worden wat de functie is. Maar dit kan ook opgelost worden door een title attribuut (!) bij het button element (of een aria-label attribuut bij het button element). Let op dat bij elk icoon de functie duidelijk moet zijn. Bij het pijltje naast "Noodzakelijk" kan dit iets zijn als "Toon extra informatie voor Noodzakelijk". Bij het pijltje naast Prestatie kan dit dan iets zijn als "Toon extra informatie voor Prestatie". Als het pijltje omgedraaid wordt kan de tekst aangepast worden naar bijvoorbeeld "Verberg extra informatie voor ...". In plaats van deze status informatie over het tonen of verbergen in de alternatieve tekst te verwerken kan dit ook met een aria-expanded attribuut bij het button element gedaan worden.
SC 1.3.1
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Hierin staat bovenaan een koptekst "Privacy instellingen". Deze tekst is echter in de HTML code niet te herkennen als koptekst. Gebruik hier bijvoorbeeld een h2 element in plaats van een span element.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Onder de tab "Instellingen" staan een aantal (interactieve) kopteksten, namelijk "Noodzakelijk", "Prestatie" en "Functioneel". Deze kopteksten zijn nu niet herkenbaar als koppen doordat geen heading elementen zijn 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. Gebruik hier bij voorkeur een h3 element.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In de content van het tabblad van "Cookies" wordt een definitielijst gebruikt, maar niet op een goede manier. De keuze voor een definitielijst is hier wel geschikt, maar de codering in de HTML klopt niet. Zo staat er allemaal content tussen het dt en dd element in die nu 'zweeft'. Deze moet of binnen de dt of binnen de dd geplaatst worden. Deze lijkt het beste binnen het dd element geplaatst te kunnen worden.
Binnen elk dt element wordt een strong element gebruikt. Die lijkt hier niet op z'n plaats, omdat het alleen visuele opmaak gebruikt wordt, maar daar is een strong element niet voor bedoeld. Gebruik hier bij voorkeur CSS voor de visuele weergave.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In de content van het tabblad van "Cookieverklaring" staat bovenaan een vetgedrukte tekst "Bijgewerkt". Deze is met een strong element opgemaakt, maar een strong element is niet bedoeld voor visuele opmaak. Gebruik hier CSS voor de visuele weergave van deze tekst.
SC 1.4.11
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het tabblad "Instellingen" staan een drietal schuifregelaars om cookies aan en uit te zetten. De eerste kan niet aangepast worden en is dus een inactief onderdeel van de gebruikersinterface. Deze hoeft dan niet voldoende contrast te hebben.
De andere twee zijn wel actieve interactieve componenten en moeten dus ook voldoende contrast hebben. Dat betekent dat zowel het grijze bolletje minimaal een contrast moet hebben van 3,0:1 met de lichtgrijze achtergrond van het schuifgedeelte, maar ook het schuifgedeelte moet voldoende contrast hebben met de witte achtergrond van de popup. Beide zijn nu te laag. Een oplossing voor het schuifgedeelte kan ook zijn om er een donkere rand om heen te zetten; dan is ook het schuifoppervlak duidelijk aangegeven.
Daarnaast is het beter om ook onderscheid te maken tussen de inactieve en de actieve schuifregelaars. Ze zien er nu hetzelfde uit, waardoor het lijkt of de tweede en derde ook niet aangepast kunnen worden (omdat ze zo licht zijn van kleur). Het contrast vergroten van de tweede en derde regelaar lost dit probleem al op.
SC 2.1.1
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Binnen deze popup staan meerdere interactieve componenten, zoals links, tabs, knoppen, checkboxen, enz. Deze zijn niet allemaal goed te bedienen met het toetsenbord. Bij de meeste gaat de bediening op zich
nog wel goed, maar is een bij-effect dat ook de tweede popup direct sluit, wat niet altijd wenselijk is. Als ik bijvoorbeeld de privacyverklaring in een apart venster wil lezen, wil ik daarna gewoon terug naar de tweede popup om daar verder te gaan. Dat kan nu niet, omdat die ook gesloten is.
Maar, wat helemaal niet werkt is om een andere tab bovenaan te activeren. Als ik bijvoorbeeld de tab "Cookies" wil activeren kan ik daar de toetsenbordfocus wel op zetten, maar zowel bij een klik met de spatiebalk als met de Enter toets sluit mijn tweede popup venster en als ik die daarna weer opnieuw open met de knop "Nee, pas aan", dan is nog steeds het tabblad van "Instellingen" zichtbaar. Ik kan dus met het toetsenbord niet de tabbladen voor "Cookies" en "Cookieverklaring" in beeld krijgen.
SC 2.4.3
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. De toetsenbordfocus gaat als eerste naar deze melding. Dat is op zich goed, maar werkt niet altijd. Er is gebruik gemaakt van een tabindex attribuut en die heeft ook bij alle interactieve componenten dezelfde waarde "1" gekregen. Dit is niet logisch, maar werkt ook niet goed met screenreaders. Als bijvoorbeeld NVDA als screenreader aan staat en de website wordt bekeken in Firefox of in Chrome, dan gaat de focus al niet meer direct als eerste naar de popupmelding. De tabindex attributen worden dan genegeerd. Dit moet dus op een andere manier opgelost worden, zodat het ook goed werkt als een screenreader aan staat.
Een bijkomend probleem is dat het ook nog steeds mogelijk is om met de toetsenbordfocus buiten deze popup te komen als iemand verder navigeert en geen keuzes maakt. Dat is eigenlijk niet de bedoeling. Als de popup namelijk niet eerst gesloten wordt is er de kans dat interactieve elementen die de focus krijgen niet zichtbaar zijn als die onder de popup staat (wat ook een probleem is voor SC 2.4.11 [WCAG 2.2] als de interactieve component helemaal verborgen zou zijn achter de popup). Zorg er dus voor dat de toetsenbordfocus pas naar de rest van de pagina kan gaan als deze popup gesloten is. Of, sluit de popup automatisch als iemand buiten de popup komt met de toetsenbordfocus.
Dit werkt wel goed in de tweede popup die verschijnt als de link "Nee, pas aan" wordt geactiveerd. Daar blijft de focus netjes binnen de popup totdat deze wordt gesloten. Die oplossing zou ook bij de eerste popup moeten worden toegepast. Dan zijn ook geen tabindex attributen nodig. Gebruik hier dus een modal dialog (zie ook https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. De focus gaat nu niet naar het begin van de inhoud van deze tweede popup, maar de focus gaat direct naar de link "Privacybeleid" binnen de popup. Nadeel hiervan is dat dus een deel van de content binnen deze tweede popup wordt overgeslagen. Als hulpsoftware nu gaat voorlezen begint het met voorlezen vanaf deze link. Daarmee wordt de titel van de popup ("Privacy instellingen") overgeslagen. Dat is niet logisch. Zorg er dus voor dat de focus op het dialog modal zelf komt te staan, of aan het begin van de inhoud ervan.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Binnen deze popup staan bovenaan drie 'tabs' met de teksten "Instellingen", "Cookies", en "Cookieverklaring". Voor elke tab is een button element met een role="tab" gebruikt. Voor deze tabs met de bijbehorende tabpanels is de juiste HTML code gebruikt en zijn de juiste aria-attributen gebruikt. Dat is heel goed. De toetsenbordbediening klopt hier echter nog niet en is niet logisch voor 'tabs'. Als ik met de TAB-toets naar een tab navigeer en deze activeer moet ik met een volgende keer TAB-toets de focus naar de inhoud van het tabblad kunnen navigeren. Dat zou logisch zijn, omdat als ik een tabblad open ik er ook direct in moet kunnen navigeren. Dat kan nu niet. Als ik bijvoorbeeld de tab "Instellingen" activeer, dan ga ik met de Tab-toets eerst nog langs de opties "Cookies" en "Cookieverklaring" voor ik in het tabblad kom wat bij "Instellingen" 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. Zie pagina https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction voor meer informatie.
SC 2.4.6
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Binnen deze melding staat een knop om de popup te sluiten ("X"). Deze heeft nu als toegankelijkheidsnaam de tekst "Doorgaan zonder te accepteren". Deze tekst is niet duidelijk voor mensen die hulpsoftware gebruiken. De enige informatie die ze tot dan toe hebben gehoord als voorleessoftware de content voorleest van de popup is een link naar het "privacybeleid". Vervolgens krijgen ze dan deze knop voorgelezen. Buiten de context van de rest van de popup inhoud is deze knop dan niet duidelijk. Wat accepteren ze dan niet als ze de knop activeren? De knoptekst moet dus duidelijker. Dit kan iets zijn als "Sluit cookiemelding", of "Sluit cookiemelding zonder voorkeuren op te geven". Dan weet je ten minste wat je sluit. Zeker als er een dialog modal wordt gebruikt is ook al duidelijk dat je in een popup zit en is het 'sluiten' ervan ook duidelijk.
Als de website voor het eerst bezocht wordt verschijnt een cookiemelding in een popup. In deze melding staan drie knoppen, namelijk "Weigeren", "Nee, pas aan" en "Accepteer alles". 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 "Accepteer alles" zou er beter visueel kunnen staan "Accepteer alle cookies". Als er visueel wel "Accepteer alles" blijft staan, dan moet in het aria-label attribuut iets staan als "Accepteer alles: alle cookies accepteren" (let op dat dus de zichtbare tekst letterlijk en bij elkaar terug moet komen in het aria-label voor SC 2.5.3). De knoptekst "Nee, pas aan" is om meedere redenen niet duidelijk. In de tekst erboven wordt verwezen naar "opent u de instellingen". Een knoptekst als "Nee, pas aan" is niet duidelijk dat je dan naar de instellingen gaat". Daarnaast lijkt "Nee" een antwoord te zijn op een vraag om te accepteren, maar die vraag wordt in de tekst erboven nergens gesteld. Dus waar is "nee" een "nee" op? Hier kan dan beter iets staan als "cookievoorkeuren" (en dan in de tekst erboven ook verwijzen naar 'cookievoorkeuren' en niet naar instellingen). Of iets als "Aanpassen voorkeuren" en dan in het aria-label "Aanpassen voorkeuren van te plaatsen cookies".
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Ook binnen deze popup staan onderaan knoppen met teksten die niet buiten de context duidelijk genoeg zijn. Het gaat hier om de knoppen met de teksten "Accepteer alles" en "Weigeren". Deze zijn vergelijkbaar met de knoppen die binnen de eerste popup staan. De oplossing is dan ook hetzelfde. De knop "Instellingen opslaan" is duidelijker, maar kan nog duidelijker. Bijvoorbeeld als "Instellingen opslaan van de cookievoorkeuren". Dit kan dan eventueel met een aria-label attribuut bij die knop worden toegevoegd.
SC 3.2.2
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In deze popup staan drie schuifregelaars waarvan de tweede en derde actief zijn. Als iemand met het toetsenbord deze bedient door de toetsenbordfocus er op te zetten en dan de spatiebalk gebruikt om de onderliggende checkbox (deze shuifregelaar is in de HTML code een button element met een role="checkbox" en dus een checkbox), dan wordt niet alleen de schuifregelaar verschoven en de checkbox 'aangevinkt' ook wordt het hele popupvenster gesloten. Dit laatste is eigenlijk niet de bedoeling, maar zorgt dus wel voor een contextwijziging bij een verandering van de instelling van deze checkbox. Bij het klikken met de muisaanwijzer op deze schuifregelaar treedt dit probleem niet op. Zorg er dus voor dat de focus gewoon op de schuifregelaar zelf blijft staan bij het bedienen ervan. Dan kan iemand er direct voor kiezen om de keuze ongedaan te maken (indien gewenst).
SC 4.1.2
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Het is voor hulpsoftware niet direct duidelijk dat het hier om een popup gaat. Dit kan duidelijk gemaakt worden door middel van de attributen "role" met de waarde "dialog" en aria-modal met de waarde "true". Zorg er ook voor dat het element met role="dialog" een toegankelijkheidsnaam krijgt, bijvoorbeeld door middel van aria-labelledby. Zodra de knop "Nee, pas aan" wordt aangeklikt verschijnt nog een popupvenster. Ook hier gelden dezelfde uitgangspunten.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het Tabblad bij "Instellingen" staan naast de vetgedrukte kopjes "Noodzakelijk", "Prestaties" en "Functioneel" kleine icoontjes van een pijltje naar beneden (of naar boven). Deze afbeelding is interactief en staat in een button element. Hulpsoftware kan geen toegankelijkheidsnaam bepalen van dit button element, omdat een alternatieve tekst voor de icoontjes ontbreekt. Zie succescriterium 1.1.1 voor een oplossing voor dit probleem.
Daarnaast kan zo'n icoontje twee toestanden hebben, namelijk een pijl omhoog of een pijl omlaag. Dit geeft een status weer. Deze moet ook door hulpsoftware bepaald kunnen worden. Dat is op dit moment ook nog niet het geval. Dat kan door dit in de alternatieve tekst mee te nemen (zie ook succescriterium 1.1.1) of door een aria-expanded attribuut toe te voegen bij deze button elementen. Als de extra informatie getoond wordt moet de waarde "true" zijn en als de extra informatie verborgen is moet de waarde "false" zijn.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het Tabblad bij "Instellingen" staan knoppen met de teksten "Noodzakelijk", "Prestaties" en "Functioneel". Met deze button elementen kan extra informatie eronder getoond worden en weer verborgen worden (net als met de icoontjes die er naast staan). Ook bij deze knoppen is het belangrijk dat de 'status' voor hulpsoftware bekend is. Dus, of de extra informatie getoond wordt of juist verborgen is. Dat kan nu niet door hulpsoftware bepaald worden. Dit kan opgelost worden door een aria-expanded attribuut te gebruiken bij deze button elementen.
Onderstaande is niet fout, maar kan wel beter.
Als de website voor het eerst bezocht wordt verschijnt een cookiemelding in een popup. Hier staan een aantal knoppen in met de teksten "Weigeren", "Nee, pas aan" en "Accepteer alles". Bij deze button elementen zijn aria-labels gebruikt die precies dezelfde tekst hebben als al binnen het button element zelf staat. Deze aria-labels zijn dan overbodig en moeten dan ook niet gebruikt worden. Dit wordt niet afgekeurd, maar er wordt wel geadviseerd om geen aria-labels te gebruiken als dat niet nodig is (dat is namelijk de eerste regel van ARIA zelf). Om te voldoen aan succescriterium 2.4.6 zijn aria-labels waarschijnlijk wel nodig, maar dan om aanvullende informatie mee te geven over het doel van deze knoppen. Zie de uitleg bij dat succescriterium.
Gangbare problemen Cookiefirst
Een voorbeeldimplementatie is te vinden op de website vrhm.nl
Datum: 2 maart 2024
Disclaimer: Controleer altijd in de praktijk of alle problemen nog steeds van toepassing zijn of dat er al problemen zijn opgelost. Als er problemen al zijn opgelost dan graag in de opmerkingen hieronder aangeven, dan pas ik het aan in dit overzicht. Ook als er problemen gemist zijn of bijgekomen zijn graag in de opmerkingen hieronder aangeven. Ook dan pas ik het aan in het overzicht hieronder.
SC 1.1.1
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het Tabblad bij "Instellingen" staan naast de vetgedrukte kopjes "Noodzakelijk", "Prestaties" en "Functioneel" kleine icoontjes van een pijltje naar beneden (of naar boven). Deze icoontjes zijn informatief en functioneel omdat deze als knop fungeren. Deze afbeelding moet dan dus een alternatieve tekst krijgen die de functie ervan aangeeft. Die ontbreekt op dit moment. Hier is een SVG element gebruikt voor deze icoontjes. Een alternatieve tekst kan hier bij de SVG zelf worden toegepast door een title element (dus niet attribuut) binnen het SVG element. Binnen het title element kan dan aangegeven worden wat de functie is. Maar dit kan ook opgelost worden door een title attribuut (!) bij het button element (of een aria-label attribuut bij het button element). Let op dat bij elk icoon de functie duidelijk moet zijn. Bij het pijltje naast "Noodzakelijk" kan dit iets zijn als "Toon extra informatie voor Noodzakelijk". Bij het pijltje naast Prestatie kan dit dan iets zijn als "Toon extra informatie voor Prestatie". Als het pijltje omgedraaid wordt kan de tekst aangepast worden naar bijvoorbeeld "Verberg extra informatie voor ...". In plaats van deze status informatie over het tonen of verbergen in de alternatieve tekst te verwerken kan dit ook met een aria-expanded attribuut bij het button element gedaan worden.
SC 1.3.1
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Hierin staat bovenaan een koptekst "Privacy instellingen". Deze tekst is echter in de HTML code niet te herkennen als koptekst. Gebruik hier bijvoorbeeld een h2 element in plaats van een span element.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Onder de tab "Instellingen" staan een aantal (interactieve) kopteksten, namelijk "Noodzakelijk", "Prestatie" en "Functioneel". Deze kopteksten zijn nu niet herkenbaar als koppen doordat geen heading elementen zijn 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. Gebruik hier bij voorkeur een h3 element.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In de content van het tabblad van "Cookies" wordt een definitielijst gebruikt, maar niet op een goede manier. De keuze voor een definitielijst is hier wel geschikt, maar de codering in de HTML klopt niet. Zo staat er allemaal content tussen het dt en dd element in die nu 'zweeft'. Deze moet of binnen de dt of binnen de dd geplaatst worden. Deze lijkt het beste binnen het dd element geplaatst te kunnen worden. Binnen elk dt element wordt een strong element gebruikt. Die lijkt hier niet op z'n plaats, omdat het alleen visuele opmaak gebruikt wordt, maar daar is een strong element niet voor bedoeld. Gebruik hier bij voorkeur CSS voor de visuele weergave.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In de content van het tabblad van "Cookieverklaring" staat bovenaan een vetgedrukte tekst "Bijgewerkt". Deze is met een strong element opgemaakt, maar een strong element is niet bedoeld voor visuele opmaak. Gebruik hier CSS voor de visuele weergave van deze tekst.
SC 1.4.11
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het tabblad "Instellingen" staan een drietal schuifregelaars om cookies aan en uit te zetten. De eerste kan niet aangepast worden en is dus een inactief onderdeel van de gebruikersinterface. Deze hoeft dan niet voldoende contrast te hebben. De andere twee zijn wel actieve interactieve componenten en moeten dus ook voldoende contrast hebben. Dat betekent dat zowel het grijze bolletje minimaal een contrast moet hebben van 3,0:1 met de lichtgrijze achtergrond van het schuifgedeelte, maar ook het schuifgedeelte moet voldoende contrast hebben met de witte achtergrond van de popup. Beide zijn nu te laag. Een oplossing voor het schuifgedeelte kan ook zijn om er een donkere rand om heen te zetten; dan is ook het schuifoppervlak duidelijk aangegeven. Daarnaast is het beter om ook onderscheid te maken tussen de inactieve en de actieve schuifregelaars. Ze zien er nu hetzelfde uit, waardoor het lijkt of de tweede en derde ook niet aangepast kunnen worden (omdat ze zo licht zijn van kleur). Het contrast vergroten van de tweede en derde regelaar lost dit probleem al op.
SC 2.1.1
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Binnen deze popup staan meerdere interactieve componenten, zoals links, tabs, knoppen, checkboxen, enz. Deze zijn niet allemaal goed te bedienen met het toetsenbord. Bij de meeste gaat de bediening op zich nog wel goed, maar is een bij-effect dat ook de tweede popup direct sluit, wat niet altijd wenselijk is. Als ik bijvoorbeeld de privacyverklaring in een apart venster wil lezen, wil ik daarna gewoon terug naar de tweede popup om daar verder te gaan. Dat kan nu niet, omdat die ook gesloten is. Maar, wat helemaal niet werkt is om een andere tab bovenaan te activeren. Als ik bijvoorbeeld de tab "Cookies" wil activeren kan ik daar de toetsenbordfocus wel op zetten, maar zowel bij een klik met de spatiebalk als met de Enter toets sluit mijn tweede popup venster en als ik die daarna weer opnieuw open met de knop "Nee, pas aan", dan is nog steeds het tabblad van "Instellingen" zichtbaar. Ik kan dus met het toetsenbord niet de tabbladen voor "Cookies" en "Cookieverklaring" in beeld krijgen.
SC 2.4.3
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. De toetsenbordfocus gaat als eerste naar deze melding. Dat is op zich goed, maar werkt niet altijd. Er is gebruik gemaakt van een tabindex attribuut en die heeft ook bij alle interactieve componenten dezelfde waarde "1" gekregen. Dit is niet logisch, maar werkt ook niet goed met screenreaders. Als bijvoorbeeld NVDA als screenreader aan staat en de website wordt bekeken in Firefox of in Chrome, dan gaat de focus al niet meer direct als eerste naar de popupmelding. De tabindex attributen worden dan genegeerd. Dit moet dus op een andere manier opgelost worden, zodat het ook goed werkt als een screenreader aan staat. Een bijkomend probleem is dat het ook nog steeds mogelijk is om met de toetsenbordfocus buiten deze popup te komen als iemand verder navigeert en geen keuzes maakt. Dat is eigenlijk niet de bedoeling. Als de popup namelijk niet eerst gesloten wordt is er de kans dat interactieve elementen die de focus krijgen niet zichtbaar zijn als die onder de popup staat (wat ook een probleem is voor SC 2.4.11 [WCAG 2.2] als de interactieve component helemaal verborgen zou zijn achter de popup). Zorg er dus voor dat de toetsenbordfocus pas naar de rest van de pagina kan gaan als deze popup gesloten is. Of, sluit de popup automatisch als iemand buiten de popup komt met de toetsenbordfocus. Dit werkt wel goed in de tweede popup die verschijnt als de link "Nee, pas aan" wordt geactiveerd. Daar blijft de focus netjes binnen de popup totdat deze wordt gesloten. Die oplossing zou ook bij de eerste popup moeten worden toegepast. Dan zijn ook geen tabindex attributen nodig. Gebruik hier dus een modal dialog (zie ook https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. De focus gaat nu niet naar het begin van de inhoud van deze tweede popup, maar de focus gaat direct naar de link "Privacybeleid" binnen de popup. Nadeel hiervan is dat dus een deel van de content binnen deze tweede popup wordt overgeslagen. Als hulpsoftware nu gaat voorlezen begint het met voorlezen vanaf deze link. Daarmee wordt de titel van de popup ("Privacy instellingen") overgeslagen. Dat is niet logisch. Zorg er dus voor dat de focus op het dialog modal zelf komt te staan, of aan het begin van de inhoud ervan.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Binnen deze popup staan bovenaan drie 'tabs' met de teksten "Instellingen", "Cookies", en "Cookieverklaring". Voor elke tab is een button element met een role="tab" gebruikt. Voor deze tabs met de bijbehorende tabpanels is de juiste HTML code gebruikt en zijn de juiste aria-attributen gebruikt. Dat is heel goed. De toetsenbordbediening klopt hier echter nog niet en is niet logisch voor 'tabs'. Als ik met de TAB-toets naar een tab navigeer en deze activeer moet ik met een volgende keer TAB-toets de focus naar de inhoud van het tabblad kunnen navigeren. Dat zou logisch zijn, omdat als ik een tabblad open ik er ook direct in moet kunnen navigeren. Dat kan nu niet. Als ik bijvoorbeeld de tab "Instellingen" activeer, dan ga ik met de Tab-toets eerst nog langs de opties "Cookies" en "Cookieverklaring" voor ik in het tabblad kom wat bij "Instellingen" 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. Zie pagina https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction voor meer informatie.
SC 2.4.6
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Binnen deze melding staat een knop om de popup te sluiten ("X"). Deze heeft nu als toegankelijkheidsnaam de tekst "Doorgaan zonder te accepteren". Deze tekst is niet duidelijk voor mensen die hulpsoftware gebruiken. De enige informatie die ze tot dan toe hebben gehoord als voorleessoftware de content voorleest van de popup is een link naar het "privacybeleid". Vervolgens krijgen ze dan deze knop voorgelezen. Buiten de context van de rest van de popup inhoud is deze knop dan niet duidelijk. Wat accepteren ze dan niet als ze de knop activeren? De knoptekst moet dus duidelijker. Dit kan iets zijn als "Sluit cookiemelding", of "Sluit cookiemelding zonder voorkeuren op te geven". Dan weet je ten minste wat je sluit. Zeker als er een dialog modal wordt gebruikt is ook al duidelijk dat je in een popup zit en is het 'sluiten' ervan ook duidelijk.
Als de website voor het eerst bezocht wordt verschijnt een cookiemelding in een popup. In deze melding staan drie knoppen, namelijk "Weigeren", "Nee, pas aan" en "Accepteer alles". 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 "Accepteer alles" zou er beter visueel kunnen staan "Accepteer alle cookies". Als er visueel wel "Accepteer alles" blijft staan, dan moet in het aria-label attribuut iets staan als "Accepteer alles: alle cookies accepteren" (let op dat dus de zichtbare tekst letterlijk en bij elkaar terug moet komen in het aria-label voor SC 2.5.3). De knoptekst "Nee, pas aan" is om meedere redenen niet duidelijk. In de tekst erboven wordt verwezen naar "opent u de instellingen". Een knoptekst als "Nee, pas aan" is niet duidelijk dat je dan naar de instellingen gaat". Daarnaast lijkt "Nee" een antwoord te zijn op een vraag om te accepteren, maar die vraag wordt in de tekst erboven nergens gesteld. Dus waar is "nee" een "nee" op? Hier kan dan beter iets staan als "cookievoorkeuren" (en dan in de tekst erboven ook verwijzen naar 'cookievoorkeuren' en niet naar instellingen). Of iets als "Aanpassen voorkeuren" en dan in het aria-label "Aanpassen voorkeuren van te plaatsen cookies".
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. Ook binnen deze popup staan onderaan knoppen met teksten die niet buiten de context duidelijk genoeg zijn. Het gaat hier om de knoppen met de teksten "Accepteer alles" en "Weigeren". Deze zijn vergelijkbaar met de knoppen die binnen de eerste popup staan. De oplossing is dan ook hetzelfde. De knop "Instellingen opslaan" is duidelijker, maar kan nog duidelijker. Bijvoorbeeld als "Instellingen opslaan van de cookievoorkeuren". Dit kan dan eventueel met een aria-label attribuut bij die knop worden toegevoegd.
SC 3.2.2
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In deze popup staan drie schuifregelaars waarvan de tweede en derde actief zijn. Als iemand met het toetsenbord deze bedient door de toetsenbordfocus er op te zetten en dan de spatiebalk gebruikt om de onderliggende checkbox (deze shuifregelaar is in de HTML code een button element met een role="checkbox" en dus een checkbox), dan wordt niet alleen de schuifregelaar verschoven en de checkbox 'aangevinkt' ook wordt het hele popupvenster gesloten. Dit laatste is eigenlijk niet de bedoeling, maar zorgt dus wel voor een contextwijziging bij een verandering van de instelling van deze checkbox. Bij het klikken met de muisaanwijzer op deze schuifregelaar treedt dit probleem niet op. Zorg er dus voor dat de focus gewoon op de schuifregelaar zelf blijft staan bij het bedienen ervan. Dan kan iemand er direct voor kiezen om de keuze ongedaan te maken (indien gewenst).
SC 4.1.2
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Het is voor hulpsoftware niet direct duidelijk dat het hier om een popup gaat. Dit kan duidelijk gemaakt worden door middel van de attributen "role" met de waarde "dialog" en aria-modal met de waarde "true". Zorg er ook voor dat het element met role="dialog" een toegankelijkheidsnaam krijgt, bijvoorbeeld door middel van aria-labelledby. Zodra de knop "Nee, pas aan" wordt aangeklikt verschijnt nog een popupvenster. Ook hier gelden dezelfde uitgangspunten.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het Tabblad bij "Instellingen" staan naast de vetgedrukte kopjes "Noodzakelijk", "Prestaties" en "Functioneel" kleine icoontjes van een pijltje naar beneden (of naar boven). Deze afbeelding is interactief en staat in een button element. Hulpsoftware kan geen toegankelijkheidsnaam bepalen van dit button element, omdat een alternatieve tekst voor de icoontjes ontbreekt. Zie succescriterium 1.1.1 voor een oplossing voor dit probleem. Daarnaast kan zo'n icoontje twee toestanden hebben, namelijk een pijl omhoog of een pijl omlaag. Dit geeft een status weer. Deze moet ook door hulpsoftware bepaald kunnen worden. Dat is op dit moment ook nog niet het geval. Dat kan door dit in de alternatieve tekst mee te nemen (zie ook succescriterium 1.1.1) of door een aria-expanded attribuut toe te voegen bij deze button elementen. Als de extra informatie getoond wordt moet de waarde "true" zijn en als de extra informatie verborgen is moet de waarde "false" zijn.
Als de website voor het eerst bezocht wordt verschijnt een popup met een cookiemelding. Als hier de knop "Nee, pas aan" wordt geactiveerd verschijnt een tweede popup. In het Tabblad bij "Instellingen" staan knoppen met de teksten "Noodzakelijk", "Prestaties" en "Functioneel". Met deze button elementen kan extra informatie eronder getoond worden en weer verborgen worden (net als met de icoontjes die er naast staan). Ook bij deze knoppen is het belangrijk dat de 'status' voor hulpsoftware bekend is. Dus, of de extra informatie getoond wordt of juist verborgen is. Dat kan nu niet door hulpsoftware bepaald worden. Dit kan opgelost worden door een aria-expanded attribuut te gebruiken bij deze button elementen.
Onderstaande is niet fout, maar kan wel beter.
Als de website voor het eerst bezocht wordt verschijnt een cookiemelding in een popup. Hier staan een aantal knoppen in met de teksten "Weigeren", "Nee, pas aan" en "Accepteer alles". Bij deze button elementen zijn aria-labels gebruikt die precies dezelfde tekst hebben als al binnen het button element zelf staat. Deze aria-labels zijn dan overbodig en moeten dan ook niet gebruikt worden. Dit wordt niet afgekeurd, maar er wordt wel geadviseerd om geen aria-labels te gebruiken als dat niet nodig is (dat is namelijk de eerste regel van ARIA zelf). Om te voldoen aan succescriterium 2.4.6 zijn aria-labels waarschijnlijk wel nodig, maar dan om aanvullende informatie mee te geven over het doel van deze knoppen. Zie de uitleg bij dat succescriterium.