Modèle d'accessibilité

Normes WCAG : offrir une confidentialité entièrement fonctionnelle pour les personnes en situation de handicap

Parmi les modèles disponibles, un est dédié à l'accessibilité. Il assure la compatibilité avec les normes RGAA et WCAG 2.2 niveau AA.

N'oubliez pas d'utiliser notre dernier modèle Privacy Center

Web Content Accessibility Guidelines (WCAG) est développé via le W3C process en coopération avec des individus et des organisations du monde entier, dans le but de fournir une norme partagée unique pour l'accessibilité du contenu web qui réponde aux besoins des individus, des organisations et des gouvernements au niveau international.

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, outils et technologies sont conçus et développés afin 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é entièrement fonctionnelle pour les personnes en situation de handicap.

Traduction

Le modèle Accessibility fournit une traduction automatique de différents libellés. Cette traduction est basée sur la langue du navigateur. Actuellement, il prend en charge : l'italien, l'anglais, l'allemand, le français, l'espagnol, le portugais, le néerlandais 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é.

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 libellé sous la forme {label}. Le libellé 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 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', 

  },
  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 souhaiter afficher une privacy en english 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 à utiliser 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, 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 les utilisateurs au clavier voient 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 aller sur votre site. C'est 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 dans le 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

• 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 entièrement conforme aux normes WCAG

• Évitez les positions de boutons « neutres », la bonne pratique est « Statut par défaut = Off »