# Accessibilité EAA : Widget & Corrections WCAG (dfaccessibility)

> DF Accessibility met votre boutique PrestaShop en conformité avec la directive européenne sur l'accessibilité (EAA, Directive (UE) 2019/882) en combinant trois briques : un widget d'accessibilité dont vous choisissez les…

- Page: <https://www.datafirefly.com/documentation/dfaccessibility/>
- Langue: fr
- Mis à jour le: 2026-10-12
- Autres langues: [en](https://www.datafirefly.com/en/documentation/dfaccessibility/index.md), [es](https://www.datafirefly.com/es/documentation/dfaccessibility/index.md), [de](https://www.datafirefly.com/de/documentation/dfaccessibility/index.md), [it](https://www.datafirefly.com/it/documentation/dfaccessibility/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfaccessibility/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfaccessibility/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfaccessibility/index.md)
- Index: <https://www.datafirefly.com/documentation/llms.txt>

DF Accessibility met votre boutique PrestaShop en conformité avec la directive européenne sur l'accessibilité (EAA, Directive (UE) 2019/882) en combinant trois briques : un widget d'accessibilité dont vous choisissez les options, un moteur de corrections WCAG automatiques appliquées sur chaque page, et un générateur de déclaration d'accessibilité légale en 8 langues.

Cette documentation couvre la version **1.3.0** du module, compatible PrestaShop **8.0.0 à 9.x**. Aucun override de classe, aucune dépendance Composer, aucune requête externe.

## Installation et mise à jour

1. Dans votre back-office PrestaShop, ouvrez **Modules > Gestionnaire de modules**.
2. Cliquez sur **Installer un module** et déposez le fichier `dfaccessibility.zip`.
3. Cliquez sur **Configurer** une fois l'installation terminée.

Le module s'enregistre sur les hooks `displayHeader`, `actionFrontControllerSetMedia`, `displayBeforeBodyClosingTag` et `displayFooter` (ce dernier sert de secours pour les thèmes qui n'appellent pas le précédent) et crée une table de statistiques. Dès l'installation, le widget est actif avec toutes ses options, et toutes les corrections automatiques sont activées sauf la correction de contraste.

Pour mettre à jour, déposez simplement le nouveau ZIP par-dessus le module installé, sans le désinstaller : les scripts de mise à jour ajoutent les nouveaux réglages et conservent votre configuration.

## Configuration

### Widget d'accessibilité

- **Activer le widget** : affiche le bouton flottant sur le front-office. Désactiver le widget arrête aussi l'application des préférences déjà enregistrées par les visiteurs.
- **Position du bouton** : en bas à droite ou en bas à gauche.
- **Couleur d'accent** : utilisée pour le bouton, les options actives du panneau et le contour de focus imposé. Choisissez une couleur suffisamment contrastée avec le blanc (le bleu par défaut `#2563EB` respecte le ratio AA).
- **Masquer le bouton sur mobile** : cache le bouton flottant sous 768px.
- **Masquer le bouton sur le panier et le checkout** : retire le bouton des pages panier et commande, y compris pour les modules de commande en une page qui reprennent le nom de page `order`.
- **Options affichées dans le widget** : une case par option (taille du texte, contraste élevé, police lisible, espacements, surlignage des liens, grand curseur, guide de lecture, arrêt des animations, masquage des images). Si aucune option n'est cochée, le bouton flottant est masqué.

Quand le bouton est masqué sur mobile, sur le panier ou sur le checkout, les préférences déjà activées par le visiteur et les corrections automatiques continuent de s'appliquer. Un visiteur en contraste élevé le reste jusqu'au paiement.

Une option décochée cesse aussi de s'appliquer chez les visiteurs qui l'avaient déjà activée. C'est voulu : sans son bouton, le visiteur n'aurait aucun moyen de la désactiver.

### Corrections automatiques

Chaque correction est activable individuellement. Elles s'exécutent dans le navigateur du visiteur au chargement de la page et sur les contenus ajoutés ensuite : vos fichiers de thème ne sont jamais modifiés.

- **Textes alternatifs manquants** : voir le détail plus bas.
- **Champs de formulaire sans étiquette** : ajoute un `aria-label` déduit du placeholder ou du nom du champ.
- **Liens ouvrant une nouvelle fenêtre** : ajoute `rel=noopener` et un avertissement audible pour les lecteurs d'écran.
- **Iframes sans titre** : ajoute un attribut `title` dérivé du domaine source.
- **Repères ARIA** : ajoute les rôles `banner`, `contentinfo` et un `aria-label` de navigation lorsqu'ils sont absents.
- **Lien d'évitement** : injecte un lien « Aller au contenu principal » révélé au premier appui sur Tab.
- **Contour de focus visible** : impose un contour au focus clavier (critère WCAG 2.4.7).
- **Correction automatique du contraste** : désactivée par défaut, voir la section dédiée.

### Statistiques

Lorsque la collecte est activée, chaque navigateur additionne les corrections appliquées et les envoie au plus une fois par minute, à la fermeture ou au changement de page. Les compteurs sont agrégés par jour et par boutique : aucun cookie, aucun identifiant, aucune donnée personnelle.

## Le widget côté visiteur

Le bouton flottant ouvre un panneau qui propose les options que vous avez cochées :

- **Taille du texte** : 5 paliers de 100 à 150 %.
- **Contraste élevé** : mode intelligent détaillé ci-dessous.
- **Police lisible** : bascule vers une pile Verdana, Tahoma, Arial.
- **Augmenter les espacements** : lettres 0,12 em, mots 0,16 em, interligne 1,6 et paragraphes espacés de 2 em, soit les valeurs de test du critère WCAG 1.4.12.
- **Surligner les liens** : fond jaune et soulignement systématique.
- **Grand curseur** : flèche agrandie, et main agrandie sur les liens et boutons.
- **Guide de lecture** : barre horizontale qui suit la souris.
- **Arrêter les animations** : neutralise animations et transitions CSS, met en pause les vidéos en lecture automatique et les carrousels Bootstrap, Swiper, Slick et Owl (critères WCAG 2.2.2 et 2.3.3).
- **Masquer les images** : masque images, vidéos et images de fond.
- **Réinitialiser tous les réglages** : retour à l'état d'origine.

Le panneau est entièrement utilisable au clavier : piège de focus, fermeture par Échap, états `aria-pressed` sur chaque option. Les préférences sont stockées uniquement dans le `localStorage` du navigateur et réappliquées **avant le premier affichage** des pages suivantes, sans flash visuel ni donnée transmise à vos serveurs.

Les polices d'icônes (Material Icons du thème Classic, Font Awesome) sont exclues de la police lisible et des espacements, pour que les icônes ne se transforment pas en texte.

### Taille du texte

Le module agrandit la taille racine de la page à partir de la valeur définie par votre thème, ce qui fait grandir tous les textes en `rem` et en `em`, y compris sur les thèmes dont la racine est à 62,5 %. Les textes dimensionnés en pixels, qui ne suivent pas la racine, sont agrandis individuellement. Chaque texte n'est agrandi qu'une fois, quel que soit son mode de dimensionnement.

### Le contraste élevé intelligent

Les widgets classiques forcent un fond blanc et une opacité pleine sur tous les éléments, ce qui fait disparaître les visuels des sliders et réapparaître slides cachées, menus repliés et fonds de modale. Ici, le module analyse toute la page, par lots pour ne pas la figer :

- les fonds **unis** et les **dégradés** passent en blanc ;
- les éléments portant une **image de fond**, ainsi que les légendes posées sur une image de slider, sont conservés : leurs textes reçoivent une plaque blanche semi-opaque ;
- les textes passent en noir, les liens en bleu foncé souligné (jaune au survol), les boutons et champs reçoivent un fond blanc et une bordure noire de 2px ;
- rien de ce qui est caché par le thème ne réapparaît.

Les couleurs forcées ne s'appliquent qu'une fois l'analyse terminée, pour éviter un texte noir sur fond sombre pendant le chargement. La désactivation restaure les styles d'origine, y compris les styles inline posés par un constructeur de pages.

### Sur mobile

Sous 768px, le bouton passe à 44px (la taille de cible tactile du critère WCAG 2.5.5) et se place à 14px des bords. Le panneau occupe la largeur de l'écran, dans la limite de 320px.

## Les corrections automatiques en détail

### Textes alternatifs (WCAG 1.1.1)

Pour chaque image sans attribut `alt`, le module applique dans l'ordre :

1. image masquée aux technologies d'assistance, pixel de suivi, ou image dans un lien qui porte déjà du texte : `alt` vide (image décorative) ;
2. sinon, la légende `figcaption` ou l'attribut `title` ;
3. sinon, le titre du produit de la miniature environnante ;
4. en dernier recours, le nom de fichier nettoyé, s'il est signifiant.

Si aucune de ces sources n'est fiable, l'image n'est pas modifiée, plutôt que d'être cachée à tort aux lecteurs d'écran par un `alt` vide.

La correction automatique est un filet de sécurité. Pour vos images produits importantes, rédigez des textes alternatifs à la main dans votre catalogue : le module ne touche jamais aux `alt` existants.

### Formulaires (WCAG 1.3.1, 4.1.2)

Les champs sans `label` associé, sans `aria-label` ni `title` reçoivent un `aria-label` déduit du placeholder, ou à défaut du nom du champ.

### Liens et iframes (WCAG 3.2.5, 4.1.2)

Les liens `target=_blank` reçoivent `rel=noopener` et un `aria-label` complété par la mention « s'ouvre dans une nouvelle fenêtre ». Les iframes sans titre reçoivent un `title` mentionnant le domaine embarqué.

### Structure et navigation (WCAG 1.3.1, 2.4.1, 2.4.7)

Rôles ARIA ajoutés lorsque le thème ne les déclare pas, lien d'évitement injecté en tout début de page, contour de focus imposé via `:focus-visible`. Sur le thème Classic, où la balise `

` englobe aussi l'en-tête et le pied de page, le lien d'évitement cible la colonne de contenu `#content-wrapper`. Si votre thème fournit déjà un lien d'évitement, le module n'en ajoute pas.

### Correction automatique du contraste (WCAG 1.4.3)

Le moteur calcule la luminance relative de chaque texte et de son fond réel, puis assombrit ou éclaircit progressivement les couleurs sous le ratio requis : 4,5, ou 3 pour les grands textes (24px, ou 18,66px en gras). Il s'exécute pendant les temps morts du navigateur.

Les textes posés sur une image, un dégradé, un fond semi-transparent ou dans un slider sont ignorés : leur fond réel ne peut pas être calculé et la correction risquerait de les rendre moins lisibles. Les textes désactivés sont aussi ignorés.

Cette correction modifie les couleurs de texte définies par votre thème. Activez-la, vérifiez le rendu sur vos pages clés, puis conservez-la si le résultat vous convient. Elle est désactivée par défaut pour cette raison.

### Contenus chargés après la page

Les corrections s'appliquent aussi aux contenus insérés après le chargement : listes de produits des filtres à facettes, aperçu rapide, modale d'ajout au panier, pagination infinie. Le contraste élevé et la taille du texte y sont appliqués de la même façon.

## Déclaration d'accessibilité EAA

La publication d'une déclaration d'accessibilité est une obligation formelle de la directive. Depuis la configuration du module, cliquez sur **Générer la page de déclaration** : une page CMS est créée dans chaque langue de votre boutique (modèles FR, EN, ES, DE, IT, NL, PL et PT inclus, repli anglais pour les autres langues), avec :

- l'état de conformité au regard de la Directive (UE) 2019/882 et de la norme EN 301 549 ;
- la liste des fonctionnalités d'accessibilité proposées ;
- le canal de signalement pointant vers votre formulaire de contact, dans la langue de la page ;
- les voies de recours vers l'autorité nationale compétente.

Le lien vers la déclaration apparaît automatiquement en bas du panneau du widget, uniquement si la page existe et est active. Après une mise à jour du module ou un changement de nom de boutique, cliquez sur **Mettre à jour la page de déclaration** : une confirmation vous prévient que vos retouches manuelles seront remplacées, puis la page est actualisée sans changer d'URL.

## Statistiques et preuve de diligence

Le tableau de la page de configuration affiche, sur les 30 derniers jours et par type, le nombre de corrections appliquées : textes alternatifs, étiquettes de formulaires, liens externes, titres d'iframes, repères ARIA, liens d'évitement et corrections de contraste. En cas de contrôle ou de signalement, ces compteurs documentent les mesures techniques mises en place. Le bouton **Réinitialiser les statistiques** purge les compteurs de la boutique courante.

En multiboutique, les statistiques et la déclaration sont gérées par contexte de boutique.

## Bonnes pratiques et limites

Le module corrige les défauts techniques les plus fréquents, mais certains critères WCAG restent de nature éditoriale et vous appartiennent :

- hiérarchie logique des titres h1 à h6 dans vos contenus CMS et fiches produits ;
- qualité rédactionnelle des textes alternatifs de vos images clés ;
- sous-titrage de vos vidéos ;
- intelligibilité des libellés de vos boutons et liens.

Aucun outil automatique ne rend un site « 100% conforme ». Le module vous donne une base technique solide et documentée ; complétez-la par une relecture éditoriale de vos pages clés.

## Dépannage

- **Le bouton n'apparaît pas** : vérifiez que le widget est activé, qu'au moins une option est cochée, que vous n'êtes pas sur une page où il est masqué (mobile, panier, checkout), puis videz le cache PrestaShop (Paramètres avancés > Performances).
- **Une option a disparu chez un visiteur** : elle a été décochée dans la configuration, ce qui retire aussi la préférence enregistrée.
- **Les préférences ne persistent pas** : le visiteur navigue probablement en mode privé ou son navigateur bloque le `localStorage` ; le widget reste utilisable, seule la persistance est perdue.
- **Une zone reste sombre en contraste élevé** : un élément change de fond après coup par un script (en-tête collant qui s'assombrit au défilement, par exemple). Désactivez puis réactivez le mode, ou signalez le cas au support avec l'URL concernée.
- **L'installation ou la mise à jour échoue** : déposez la dernière version du ZIP par-dessus le module, sans désinstaller. Les versions antérieures à 1.2.1 pouvaient échouer avec « Undefined array key DFACCESS_WIDGET_OPTIONS ».
- **Aucune statistique ne remonte** : vérifiez que la collecte est activée et qu'aucun pare-feu ne filtre les requêtes vers le contrôleur `track` du module. Les compteurs arrivent par lots, avec un délai possible de quelques minutes.

## Désinstallation

La désinstallation supprime la table de statistiques et les clés de configuration. La page CMS de déclaration d'accessibilité est volontairement conservée (elle reste une obligation légale) : supprimez-la manuellement depuis **Apparence > Pages** si vous ne souhaitez pas la garder.