Modèle d'accessibilité

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 assure la compatibilité avec les normes RGAA et WCAG 2.0 niveau AA.

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 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, actuellement de nombreux sites et outils sont développés avec des barrières d'accessibilité qui les rendent difficiles voire impossibles à utiliser pour certaines personnes.

Rendre le web accessible bénéficie 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, outils et technologies sont conçus et développés de sorte 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, l'objectif principal est d'offrir une privacy pleinement fonctionnelle pour les personnes en situation de handicap.

Traduction

Le template Accessibility fournit une traduction automatique de différents libellés. Cette traduction est basée sur la langue du navigator. Actuellement, il prend en charge : l'italien, l'anglais, l'allemand, le français et le russe.

Options :

1. Personnaliser la traduction

Bannières

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

Libellés disponibles :

iframeTitle : attribut Title de l'iframe

privacyLabel : Aria Label du footer

acceptAria : Aria Label du bouton d'acceptation

refuseAria : Aria Label du bouton de refus

showPcAria : Aria Label du bouton “Show Privacy Center”

Exemple :

tC.privacy.addTranslation({
  en : {
    // overriding
    iframeTitle : 'the iframe title you want',
    privacyLabel : 'the aria label you want',
    acceptAria: 'the aria label you want for accept button',
    refuseAria: 'the aria label you want for refuse button',
    showPcAria: 'the aria label you want for display the pc button'
  },
  ru: {
    // add new translation
    iframeTitle : 'the iframe title you want',
    privacyLabel : 'the aria label you want',
    acceptAria: 'the aria label you want for accept button',
    refuseAria: 'the aria label you want for refuse button',
    showPcAria: 'the aria label you want for display the pc button'
  }
})

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 traductions acceptent un label sous la forme {label}. Le label ici est toujours le libellé 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. Ces textes sont lisibles uniquement par un lecteur d'écran.

cookieSr sont utilisés lorsque la catégorie n'est pas verrouillée

cookieAlwaysOnSr remplace cookieSr si la catégorie est bloquée en activé

Exemple :

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

  },
  ru : {
    // you can also add a new language
    closePrivacyCenter: 'Close the privacy center',
      },
})

2. Forcer la traduction

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

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

pc.setLocale("fr");

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

Remarque : cette fonction doit être placée après la déclaration des traductions.

3. Focus Trap

Le focus trap est une option d'accessibilité conçue pour que les utilisateurs au clavier aient leur navigation verrouillée sur la bannière. Appuyer sur la touche TAB fera circuler le focus entre les différents éléments de navigation de la bannière sans aller sur 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 le snippet JavaScript suivant au custom JS de la bannière du template accessibility :

tC.privacy.enableFocusTrap(false);

Bonnes pratiques

• Évitez trop de personnalisations CSS sur vos bannières 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 le fond et les polices est trop faible. Vous pouvez utiliser des outils externes pour le vérifier, tels que https://coolors.co/contrast-checker/000000-ffffff

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