Accessibility Template

Normes WCAG : offrir une privacy pleinement fonctionnelle pour les personnes en situation de handicap

Parmi les templates disponibles, l’un est dédié à l’accessibilité. Il garantit la compatibilité avec les normes RGAA et WCAG 2.2 niveau AA.

N’oubliez pas d’utiliser notre dernier template Privacy Center

Web Content Accessibility Guidelines (WCAG) est développé via le processus W3C en coopération avec des individus et des organisations du monde entier, dans le but de fournir une norme commune unique pour l’accessibilité du contenu web qui réponde aux besoins des individus, des organisations et des gouvernements à l’échelle internationale.

Plus d’informations ici : https://www.w3.org/WAI/standards-guidelines/wcag/

Qu’est-ce que l’accessibilité web ?

Lorsque les sites web et les outils web sont correctement conçus et codés, les personnes en situation de handicap peuvent les utiliser. Cependant, de nombreux sites et outils sont aujourd’hui développés avec des obstacles à l’accessibilité qui les rendent difficiles, voire impossibles à utiliser pour certaines personnes.

Rendre le web accessible profite aux individus, aux entreprises et à la société. Les normes web internationales définissent ce qui est nécessaire pour l’accessibilité.

L’accessibilité web signifie que les sites web, les outils et les technologies sont conçus et développés de manière à ce que les personnes en situation de handicap puissent les utiliser. Plus précisément, les personnes peuvent :

• percevoir, comprendre, naviguer et interagir avec le Web

• contribuer au Web

Avec ce template, le principal point clé est d’offrir une privacy pleinement fonctionnelle pour les personnes en situation de handicap.

Traduction

Le template Accessibilité fournit une traduction automatique de différents labels. Cette traduction est basée sur la langue du navigateur. Actuellement, elle prend en charge : italien, anglais, allemand, français, espagnol, portugais, néerlandais et russe.

Options :

1. Personnaliser la traduction

Banners

Vous pouvez soit ajouter une nouvelle traduction, soit remplacer les labels aria en utilisant la fonction tC.privacy.addTranslation() dans le custom JS.

Labels disponibles :

iframeTitle : attribut Title de l’iframe

privacyLabel : label aria du footer

acceptAria : label aria du bouton accept

refuseAria : label aria du bouton refuse

showPcAria : label aria du bouton “Show Privacy Center“

Exemple :

tC.privacy.addTranslation({
  en : {
    // overriding
    iframeTitle : 'le titre de l’iframe que vous souhaitez',
    privacyLabel : 'le label aria que vous souhaitez',
    acceptAria: 'le label aria que vous souhaitez pour le bouton accept',
    refuseAria: 'le label aria que vous souhaitez pour le bouton refuse',
    showPcAria: 'le label aria que vous souhaitez pour afficher le bouton pc'
  },
  ru: {
    // add new translation
    iframeTitle : 'le titre de l’iframe que vous souhaitez',
    privacyLabel : 'le label aria que vous souhaitez',
    acceptAria: 'le label aria que vous souhaitez pour le bouton accept',
    refuseAria: 'le label aria que vous souhaitez pour le bouton refuse',
    showPcAria: 'le label aria que vous souhaitez pour afficher le bouton pc'
  }
})

Privacy Center

⚠️ Pour traduire la privacy, vous devez utiliser une autre fonction : pc.addTranslation()

Clés disponibles et leurs valeurs :

var en = {
    "allCookiesHaveBeenAccepted": "All cookies have been accepted",
    "allCookiesHaveBeenRefused": "All cookies have been refused",
    "pcAria": "Cookie settings",
    "closePrivacyCenter": "Close the cookie setting dialog",
    "acceptAll": "Accept all",
    "refuseAll": "Refuse all",
    "saveLabel": "Save",
    "saveAria": "Save the current cookie settings",
    "acceptAllAria": "Accept all cookies",
    "refuseAllAria": "Refuse all cookies",
    "showVendors": "Show vendors",
    "showPurposes": "Show purposes",
    "vendors": "Vendors",
    "enableCookieLabel": "Enabled:",
    "enableCookieAria": "{label} cookies enabled",
    "disableCookieAria": "{label} disabled cookies",
    "turnOnSubCategoriesAria": "Enable {label} cookies",
    "turnOffSubCategoriesAria": "Disable {label} cookies",
    "cookieAlwaysOnSrPrefix": "",
    "cookieAlwaysOnSrSuffix": "",
    "cookieSrPrefix": "",
    "cookieSrSuffix": "",
    "showRelatedVendors": "Show related vendors",
    "privacyPolicy": "Privacy policy",
    "categories": "Categories",
    "acmVendors": "Google Ad Technology Providers",
    "nonIabVendors": "Non IAB vendors",
    "iabVendors": "IAB TCF vendors",
    "purposes": "Purposes",
    "specialPurposes": "Special Purposes",
    "features": "Features",
    "specialFeatures": "Special Features",
    "legitimateInterest": "Legitimate interest",
    "examples": "Examples",
    "showDetails": "Show details",
    "seeDetails": "See details",
    "hideDetails": "Hide details"
}

Certaines des traductions acceptent un label sous la forme {label}. Le label ici est toujours le label de la catégorie.

Les clés avec SrPrefix/SrSuffix ont une traduction vide par défaut. Ces clés sont utilisées pour le texte “sr-only”, qui préfixe et suffixe le nom de la catégorie. Ce texte est uniquement lisible par un lecteur d’écran.

cookieSr est utilisé lorsque la catégorie n’est pas verrouillée

cookieAlwaysOnSr remplace cookieSr si la catégorie est bloquée sur on

Exemple :

pc.addTranslation({
  en : {
    // Override english Aria Label
    closePrivacyCenter: 'Close the privacy center', 

  },
  pt : {
    // you can also add a new language
    closePrivacyCenter: 'Fechar o centro de privacidade',
      },
})

2. Forcer la traduction

Par défaut, les textes fournis aux lecteurs d’écran sont traduits en fonction de la langue du navigateur. Dans certains cas, vous pouvez vouloir afficher une privacy en anglais par exemple, même si la langue du navigateur est une autre langue. Par exemple : avec un code de langue ISO dans l’URL

Vous pouvez forcer la privacy à utiliser une langue en utilisant la fonction setLocale dans Privacy Center > champ Custom JS > bloc JS Before :

pc.setLocale("fr");

La valeur peut être : fr, it, de, ru, es, pt, nl ou en

Note : cette fonction doit être placée après la déclaration de traduction.

3. Focus Trap

Le focus trap est une option d’accessibilité conçue pour que la navigation au clavier de l’utilisateur reste verrouillée sur le banner. L’appui sur la touche TAB ferait défiler les différents éléments de navigation du banner sans quitter votre site. Il s’agit d’une recommandation d’accessibilité lors de l’utilisation d’une modal sur une page web.

Vous pouvez désactiver le focus trap en ajoutant l’extrait JavaScript suivant au custom JS du banner du template d’accessibilité :

tC.privacy.enableFocusTrap(false);

Bonnes pratiques

• Évitez trop de personnalisations CSS sur vos banners d’accessibilité

• Si vous ajoutez une image (comme un logo), n’oubliez pas d’ajouter des attributs aria-label

• Faites attention au contraste de vos couleurs : certains éléments peuvent être impossibles à lire si le contraste entre l’arrière-plan et les polices est trop faible. Vous pouvez utiliser des outils externes pour le vérifier, comme https://coolors.co/contrast-checker/000000-ffffff

• Dans votre privacy center, évitez les styles de boutons "switch" et "check box". Utilisez les vrais "buttons" : c’est une exigence pour être pleinement conforme aux normes WCAG

• Évitez une position de boutons "neutral" ; la bonne pratique est "Default status = Off"