Werken met toegankelijkheid / WCAG
Standaard is de toestemmingslaag toegankelijk voor schermlezers en vergelijkbare hulpmiddelen, maar in sommige gevallen zijn aanpassingen aan de ontwerpinstellingen noodzakelijk.
WCAG-ondersteuning voor Cookie Banners inschakelen
Om de ondersteuning voor WCAG (Web Content Accessibility Guidelines 2.2) in te schakelen, logt u in op uw account en gaat u naar Menu > Ontwerpen en bewerk het bijbehorende ontwerp. Vouw de instellingen op "Box Settings" uit en schakel WCAG in:
WCAG-wijzigingen in de uitvoer van de toestemmingslaag
Als de WCAG-instelling voor een ontwerp is ingeschakeld, worden de volgende wijzigingen toegepast op de toestemmingslaag:
- De toestemmingslaag wordt in een shadowRoot-element verpakt
- Koppen in de toestemmingslaag gebruiken elementen En in plaats van
- Schakelteksten gebruiken elementen in plaats van
- Menu op aangepaste instellingenlaag zal element gebruiken in plaats van
- Leeftijdsverificatie-elementen worden voorzien van een label
- Tabellen worden voorzien van ondertiteling
- Elementen ontvangen aria-label, aria-checked, aria-modal, role en soortgelijke kenmerken
- Gatekeeper-optie is beschikbaar (zie hieronder)
Gatekeeper-optie
Wanneer WCAG is ingeschakeld, kan de optie Gatekeeper ook worden ingeschakeld. Dit voorkomt dat de toestemmingslaag de focus verliest: als de gebruiker op de TAB-toets (of een vergelijkbaar navigatie-element op het toetsenbord) drukt, blijft de focus altijd binnen de toestemmingslaag en springt niet naar posities binnen de website.
Ontwerp Overwegingen
Houd er rekening mee dat de technische wijzigingen mogelijk ook aanvullende wijzigingen in het ontwerp zelf vereisen om volledig WCAG-conform te worden. Voorbeelden hiervan zijn:
- Gebruik een juiste lettergrootte (bijvoorbeeld em of pt in plaats van px)
- Gebruik een schreefloos lettertype dat algemeen verkrijgbaar is (bijv. Times New Roman, Verdana, Arial, ...)
- Gebruik een kleur- en contrastverhouding die gemakkelijk te onderscheiden is (bijv. contrastverhouding 3:1 tussen tekst en achtergrond)
- Gebruik een tekstafstand die het gemakkelijk leesbaar maakt (bijvoorbeeld een regelhoogte van 1.5 em)
Naast puur grafische wijzigingen, vereisen sommige WCAG-vereisten mogelijk dat u bepaalde instellingen in het ontwerp gebruikt. Om bijvoorbeeld aan de WCAG-vereisten te voldoen, moet u mogelijk menu's inschakelen in uw toestemmingslaagontwerp.
Verdere lezing
- WCAG-richtlijnen op w3.org: https://www.w3.org/TR/WCAG22/
