Travailler avec l'accessibilité / WCAG
Par défaut, la couche de consentement est préparée pour être accessible aux lecteurs d'écran et aux outils similaires, mais dans certains cas, des ajustements aux paramètres de conception peuvent être nécessaires.
Activer la prise en charge WCAG pour les bannières de cookies
Afin d'activer la prise en charge des WCAG (Web Content Accessibility Guidelines 2.2), veuillez vous connecter à votre compte et accéder à Menu > Modèles et modifiez la conception correspondante. Développez les paramètres dans « Paramètres de la boîte » et activez WCAG :
Modifications WCAG apportées à la sortie de la couche de consentement
Si le paramètre WCAG est activé pour une conception, les modifications suivantes seront appliquées à la couche de consentement :
- La couche de consentement sera enveloppée dans un élément shadowRoot
- Les titres dans la couche de consentement utiliseront l'élément et au lieu de
- Les textes à bascule utiliseront l'élément au lieu de
- Le menu sur la couche de paramètres personnalisés utilisera l'élément au lieu de
- Les éléments de vérification de l'âge seront accompagnés d'une étiquette
- Les tableaux seront sous-titrés
- Les éléments recevront les attributs aria-label, aria-checked, aria-modal, role et similaires
- L'option Gatekeeper est disponible (voir ci-dessous)
Option gardien
Lorsque WCAG est activé, l'option Gatekeeper peut également être activée. Cela empêche la couche de consentement de perdre le focus : si l'utilisateur appuie sur la touche TAB (ou un élément de navigation similaire sur son clavier), le focus restera toujours dans la couche de consentement et ne passera pas à des positions dans le site Web.
Considérations sur la conception
Veuillez noter que les modifications techniques peuvent également nécessiter des modifications supplémentaires dans la conception elle-même afin de devenir entièrement conformes aux WCAG. En voici quelques exemples :
- Utiliser une taille de police appropriée (par exemple em ou pt au lieu de px)
- Utiliser une police de caractères sans empattement largement disponible (par exemple Times New Roman, Verdana, Arial, ...)
- Utiliser un rapport de couleur et de contraste facilement distinguable (par exemple, un rapport de contraste de 3:1 entre le texte et l'arrière-plan)
- Utilisez un espacement de texte qui permet une lecture facile du contenu (par exemple, une hauteur de ligne de 1.5 em)
Outre les modifications purement graphiques, certaines exigences WCAG peuvent nécessiter l'utilisation de certains paramètres dans la conception. Par exemple, pour répondre aux exigences WCAG, vous devrez peut-être activer les menus dans la conception de votre couche de consentement.
Lectures complémentaires
- Directives WCAG sur w3.org : https://www.w3.org/TR/WCAG22/
