Modèle d'accessibilité

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

Parmi les modèles 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 unique et partagée 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 ou 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 modèle, l'objectif principal est d'offrir une confidentialité pleinement fonctionnelle pour les personnes en situation de handicap.

Traduction

Le modèle Accessibility fournit une traduction automatique de différents labels. Cette traduction est basée sur la langue du navigateur. 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 JS personnalisé.

Labels 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 = {
    "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"
}

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

Les dernières clés avec SrPrefix/SrSuffix ont une traduction vide par défaut. Ces clés sont utilisées pour du texte « sr-only » qui préfixe et suffixe le nom de la catégorie. Ces textes sont uniquement lisibles 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 sur on

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 navigateur. Dans certains cas, vous pouvez vouloir afficher une privacy en anglais par exemple même si la langue du navigateur est une autre. ex : avec un code de langue ISO dans l'URL

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

pc.setLocale("fr");

Les valeurs peuvent ê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 ferait défiler les différents éléments de navigation de la bannière sans accéder à 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 JS personnalisé de la bannière du modèle 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

Dans le 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