# Modèle d’accessibilité ## Normes WCAG : offrir une privacy entièrement fonctionnelle pour les personnes en situation de handicap Parmi les modèles 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 modèle de Privacy Center
Les Web Content Accessibility Guidelines (WCAG) sont développées selon le [processus W3C](https://www.w3.org/WAI/standards-guidelines/w3c-process/) 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 : ## **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 actuellement 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 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 modèle, le point clé principal est d’offrir une privacy 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 : italien, anglais, allemand, français, espagnol, portugais, néerlandais et russe. ## Options : ### 1. Personnaliser la traduction Bannières Vous pouvez soit ajouter une nouvelle traduction, soit remplacer les libellés aria en utilisant la fonction `tC.privacy.addTranslation()` dans le JS personnalisé. Libellés disponibles : `iframeTitle` : Attribut title de l’iframe `privacyLabel` : Libellé aria du footer `acceptAria` : Libellé aria du bouton accepter `refuseAria` : Libellé aria du bouton refuser `showPcAria` : Libellé aria du bouton « Afficher le Privacy Center » Exemple : ```javascript tC.privacy.addTranslation({ en : { // remplacement iframeTitle : 'le title de l’iframe que vous souhaitez', privacyLabel : 'le libellé aria que vous souhaitez', acceptAria: 'le libellé aria que vous souhaitez pour le bouton accepter', refuseAria: 'le libellé aria que vous souhaitez pour le bouton refuser', showPcAria: 'le libellé aria que vous souhaitez pour afficher le bouton pc' }, ru: { // ajouter une nouvelle traduction iframeTitle : 'le title de l’iframe que vous souhaitez', privacyLabel : 'le libellé aria que vous souhaitez', acceptAria: 'le libellé aria que vous souhaitez pour le bouton accepter', refuseAria: 'le libellé aria que vous souhaitez pour le bouton refuser', showPcAria: 'le libellé 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 : ```javascript var en = { "allCookiesHaveBeenAccepted": "All cookies have been accepted", "allCookiesHaveBeenRefused": "All cookies have been refused", "pcAria": "Cookie settings", "closePrivacyCenter": "Fermer la boîte de dialogue des paramètres de cookie", "acceptAll": "Tout accepter", "refuseAll": "Tout refuser", "saveLabel": "Enregistrer", "saveAria": "Enregistrer les paramètres de cookie actuels", "acceptAllAria": "Accepter tous les cookie", "refuseAllAria": "Refuser tous les cookie", "showVendors": "Afficher les vendors", "showPurposes": "Afficher les finalités", "vendors": "Vendors", "enableCookieLabel": "Activé :", "enableCookieAria": "cookie {label} activés", "disableCookieAria": "cookie {label} désactivés", "turnOnSubCategoriesAria": "Activer les cookie {label}", "turnOffSubCategoriesAria": "Désactiver les cookie {label}", "cookieAlwaysOnSrPrefix": "", "cookieAlwaysOnSrSuffix": "", "cookieSrPrefix": "", "cookieSrSuffix": "", "showRelatedVendors": "Afficher les vendors associés", "privacyPolicy": "Politique de confidentialité", "categories": "Catégories", "acmVendors": "Fournisseurs de technologies publicitaires Google", "nonIabVendors": "Fournisseurs non IAB", "iabVendors": "Fournisseurs IAB TCF", "purposes": "Finalités", "specialPurposes": "Finalités spéciales", "features": "Fonctionnalités", "specialFeatures": "Fonctionnalités spéciales", "legitimateInterest": "Intérêt légitime", "examples": "Exemples", "showDetails": "Afficher les détails", "seeDetails": "Voir les détails", "hideDetails": "Masquer les détails" } ``` Certaines traductions acceptent un libellé sous la forme {label}. Le libellé ici est toujours celui 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écède et suit le nom de la catégorie. Ce texte n’est lisible que par un lecteur d’écran. `cookieSr` sont utilisées lorsque la catégorie n’est pas verrouillée `cookieAlwaysOnSr` remplace `cookieSr` si la catégorie est bloquée sur activé Exemple : ```javascript pc.addTranslation({ en : { // Remplacer le libellé aria anglais closePrivacyCenter: 'Fermer le privacy center', }, pt : { // vous pouvez aussi ajouter une nouvelle langue 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 différente. Par exemple : 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 > bloc JS Before : ```javascript pc.setLocale("fr"); ``` > La valeur peut être : fr, it, de, ru, es, pt, nl ou en Remarque : 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 de l’utilisateur au clavier soit limitée à la bannière. Appuyer sur la touche TAB ferait défiler les différents éléments de navigation de la bannière sans quitter votre site web. 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 l’extrait JavaScript suivant au JS personnalisé de la bannière du modèle d’accessibilité : ```javascript 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 des 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 * Dans votre privacy center, évitez les styles de boutons « switch » et « check box ».\ Utilisez les vrais « boutons » : c’est une exigence pour être pleinement conforme aux normes WCAG * Évitez la position de boutons « neutre », la bonne pratique est « État par défaut = Off »
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc.commandersact.com/fr/fonctionnalites/consent-management/user-guides/privacy-banners/banner-templates/accessibility-template.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.