> For the complete documentation index, see [llms.txt](https://doc.commandersact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.commandersact.com/fr/fonctionnalites/consent-management/user-guides/privacy-banners/banner-templates/accessibility-template.md).
# Modèle d'accessibilité
## Audit d’accessibilité et certification de conformité
Nos modèles Accessibility ont fait l’objet d’un audit indépendant Third-party afin de vérifier leur conformité aux principales normes d’accessibilité Web. L’audit a confirmé un **score de conformité de 100 %** par rapport à :
* **RGAA 4.1.2** (Référentiel Général d'Amélioration de l'Accessibilité)
* **WCAG 2.2** (Web Content Accessibility Guidelines, niveau AA)
* **RAWeb 1.1** (Référentiel Accessibilité Web)
Ce résultat confirme que, lorsqu’il est implémenté tel que fourni, le modèle Accessibility répond aux critères techniques requis pour garantir un accès égal aux bannières de consentement et au Privacy Center pour les personnes en situation de handicap.
Vous pouvez consulter ici la déclaration d’accessibilité complète (déclaration de conformité) :
{% file src="/files/93e2c6a890fc25ea7194459c4837158137a4a1bc" %}
{% file src="/files/f25884b4103e00cdb3e7174afc79a65df6e434ba" %}
## Normes d’accessibilité : proposer un Privacy Center pleinement fonctionnel pour les personnes en situation de handicap
Parmi les modèles disponibles, 2 sont dédiés à l’accessibilité. Ils garantissent la compatibilité avec les normes RGAA 4.1.2, WCAG 2.2 niveau AA et RAWeb 1.1.
N’oubliez pas d’utiliser notre dernier modèle Privacy Center
Les Web Content Accessibility Guidelines (WCAG) sont élaborées dans le cadre du [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é des contenus Web qui réponde aux besoins des individus, des organisations et des gouvernements à l’international.
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 aujourd’hui développés avec des obstacles à l’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 standards Web internationaux 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 de proposer un Privacy Center pleinement fonctionnel 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 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 pied de page
`acceptAria` : Libellé Aria du bouton d’acceptation
`refuseAria` : Libellé Aria du bouton de refus
`showPcAria` : Libellé Aria du bouton “Afficher le Privacy Center“
Exemple :
```javascript
tC.privacy.addTranslation({
en: {
// remplacement
iframeTitle: 'le titre iframe que vous souhaitez',
privacyLabel: 'le libellé aria que vous souhaitez',
acceptAria: 'le libellé aria que vous souhaitez pour le bouton d’acceptation',
refuseAria: 'le libellé aria que vous souhaitez pour le bouton de refus',
showPcAria: 'le libellé aria que vous souhaitez pour afficher le bouton pc'
},
ru: {
// ajouter une nouvelle traduction
iframeTitle: 'le titre iframe que vous souhaitez',
privacyLabel: 'le libellé aria que vous souhaitez',
acceptAria: 'le libellé aria que vous souhaitez pour le bouton d’acceptation',
refuseAria: 'le libellé aria que vous souhaitez pour le bouton de refus',
showPcAria: 'le libellé aria que vous souhaitez pour afficher le bouton pc'
}
})
```
**Privacy Center**
**⚠️** Pour traduire le privacy, vous devez utiliser une autre fonction : `pc.addTranslation()`
Clés disponibles et leurs valeurs :
```javascript
var en = {
"allCookiesHaveBeenAccepted": "Tous les cookies ont été acceptés",
"allCookiesHaveBeenRefused": "Tous les cookies ont été refusés",
"pcAria": "Paramètres cookie",
"closePrivacyCenter": "Fermer la boîte de dialogue des paramètres cookie",
"acceptAll": "Tout accepter",
"refuseAll": "Tout refuser",
"saveLabel": "Enregistrer",
"saveAria": "Enregistrer les paramètres cookie actuels",
"acceptAllAria": "Accepter tous les cookies",
"refuseAllAria": "Refuser tous les cookies",
"showVendors": "Afficher les fournisseurs",
"showPurposes": "Afficher les finalités",
"vendors": "Fournisseurs",
"enableCookieLabel": "Activé :",
"enableCookieAria": "cookies {label} activés",
"disableCookieAria": "cookies {label} désactivés",
"turnOnCategoriesAria": "Activer les cookies {label}",
"turnOffCategoriesAria": "Désactiver les cookies {label}",
"turnOnSubCategoriesAria": "Activer les cookies {label}",
"turnOffSubCategoriesAria": "Désactiver les cookies {label}",
"cookieAlwaysOnSrPrefix": "",
"cookieAlwaysOnSrSuffix": "",
"cookieSrPrefix": "",
"cookieSrSuffix": "",
"showRelatedVendors": "Afficher les fournisseurs 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",
"neutralErrorMessage": "Vous devez faire un choix pour chaque catégorie"
// Les boutons neutres ne sont pas recommandés pour respecter les normes d’accessibilité
}
```
Certaines traductions acceptent un libellé sous la forme {label}. Le libellé ici correspond toujours au 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 sert de préfixe et de suffixe au nom de la catégorie. Ces textes ne sont lisibles 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: 'Fermer le centre de confidentialité',
},
})
```
### 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 un Privacy Center en anglais par exemple, même si la langue du navigateur est différente. Par exemple : avec un code de langue ISO dans l’URL
Vous pouvez forcer le privacy à utiliser une langue en utilisant la fonction setLocale dans Privacy Center > Champ JS personnalisé > Bloc JS avant :
```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. Piège au focus
Le piège au focus est une option d’accessibilité conçue pour que la navigation de l’utilisateur au clavier soit verrouillée sur la bannière. L’appui sur la touche TAB ferait défiler les différents éléments de navigation de la bannière sans quitter votre site. Il s’agit d’une recommandation d’accessibilité lors de l’utilisation d’une modale sur une page Web.
Vous pouvez désactiver le piège au focus 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 une personnalisation CSS excessive de 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 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 de type "switch" et "check box".\
Utilisez de vrais "boutons" : c’est une exigence pour être pleinement conforme aux normes WCAG
* Évitez la position des boutons "neutres" ; la bonne pratique est "Default status = Off"
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://doc.commandersact.com/fr/fonctionnalites/consent-management/user-guides/privacy-banners/banner-templates/accessibility-template.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.