Login

Try consentmanager
Book a call

Respect de l'accessibilité / WCAG

Par défaut, la couche de consentement est conçue pour être accessible aux lecteurs d'écran et aux outils similaires, mais dans certains cas, des ajustements des paramètres de conception peuvent s'avérer nécessaires.

Activer la prise en charge des WCAG pour les bannières de cookies

Pour activer la prise en charge des WCAG (Web Content Accessibility Guidelines 2.2), connectez-vous à votre compte, accédez à Menu > Designs, puis modifiez le design correspondant. Développez les paramètres sous « Afficher les paramètres avancés » et activez les WCAG :

Modifications des WCAG concernant la présentation de la couche de consentement

Si le paramètre WCAG est activé pour un design, les modifications suivantes seront appliquées à la couche de consentement :

  • La couche de consentement sera encapsulée dans un élément shadowRoot
  • Les titres de la couche de consentement utiliseront les éléments <h1> et <h2> au lieu de <div>.
  • Les textes des boutons basculants utiliseront l'élément <label> au lieu de <div>
  • Le menu de la couche des paramètres personnalisés utilisera l'élément <nav> au lieu de <div>
  • Des éléments de vérification de l'âge seront ajoutés avec une étiquette
  • Les tableaux seront accompagnés de légendes
  • Les éléments recevront les attributs aria-label, aria-checked, aria-modal, role et autres attributs similaires
  • L'option « Gatekeeper » est disponible (voir ci-dessous)

Option « Gatekeeper »

Lorsque les WCAG sont activées, 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 au sein de la couche de consentement et ne passera pas à d'autres positions du site web.

Considérations relatives à la conception

Veuillez noter que les modifications techniques peuvent également nécessiter des changements supplémentaires au niveau de la conception elle-même afin d'être pleinement conformes aux WCAG. Voici quelques exemples :

  • Utilisez une taille de police appropriée (par exemple em ou pt au lieu de px)
  • Utilisez une police sans empattement couramment utilisée (par exemple Times New Roman, Verdana, Arial, …)
  • Utilisez des couleurs et un rapport de contraste facilement discernables (par exemple, un rapport de contraste de 3:1 entre le texte et l'arrière-plan).
  • Utilisez un espacement du texte qui facilite la lecture du contenu (par exemple, une hauteur de ligne de 1,5 em).

Outre les modifications purement graphiques, certaines exigences WCAG peuvent vous obliger à utiliser des paramètres spécifiques dans la conception. Par exemple, pour respecter les exigences WCAG, vous devrez peut-être activer les menus dans la conception de votre couche de consentement.

Pour en savoir plus

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!