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é pour vos visiteurs, un moteur de corrections WCAG automatiques appliquées au chargement de chaque page, et un générateur de déclaration d’accessibilité légale multilingue.

Installation

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 trois hooks (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) et crée une unique table de statistiques. Dès l’installation, le widget est actif en front-office avec les réglages par défaut et toutes les corrections automatiques sont activées, à l’exception de la correction de contraste.

Configuration

Widget d’accessibilité

• Activer le widget — affiche le bouton flottant sur toutes les pages du front-office.
• 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. Les préférences déjà enregistrées par le visiteur continuent de s’appliquer.

Corrections automatiques

Chaque correction est activable individuellement. Elles s’exécutent dans le navigateur du visiteur au chargement de la page : vos fichiers de thème ne sont jamais modifiés et une désinstallation restaure l’état d’origine à l’identique.

• Textes alternatifs manquants — voir le détail des heuristiques 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, le navigateur envoie après application des corrections un compteur anonyme par type de correction (via sendBeacon). Ces 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 proposant :

• Taille du texte — 5 paliers de 100% à 135%.
• Contraste élevé — mode intelligent qui éclaircit les fonds unis en préservant les images (voir ci-dessous).
• Police lisible — bascule vers une pile Verdana/Arial.
• Augmenter les espacements — interlignage 1.8, espacement des lettres et des mots augmentés (critère WCAG 1.4.12).
• Surligner les liens — fond jaune et soulignement systématique.
• Grand curseur — curseur agrandi à fort contraste.
• Guide de lecture — barre horizontale suivant la souris.
• Arrêter les animations — neutralise animations et transitions CSS (critère WCAG 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 rendu des pages suivantes — aucun flash visuel, aucune donnée transmise à vos serveurs.

Le contraste élevé intelligent

Contrairement aux widgets classiques qui forcent un fond blanc sur tous les éléments (et font disparaître sliders et bandeaux), le mode analyse le DOM à l’activation :

• les fonds de couleur unie opaques sont blanchis ;
• les éléments portant une image de fond sont préservés : leurs textes reçoivent une plaque blanche semi-opaque qui garantit la lisibilité par-dessus le visuel ;
• les textes passent en noir, les liens en bleu foncé souligné, les contrôles interactifs reçoivent une bordure noire de 2px.

La désactivation retire tous les styles appliqués et restaure le thème à l’identique.

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. si l’image est dans un lien déjà porteur de 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é (tirets remplacés, suites de chiffres retirées) si le résultat est signifiant.

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 humanisé.

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, et contour de focus imposé sur tous les éléments interactifs via :focus-visible.

Correction automatique du contraste (WCAG 1.4.3)

Le moteur parcourt les textes visibles, calcule la luminance relative du texte et de son fond effectif, puis assombrit ou éclaircit progressivement les couleurs dont le ratio est inférieur à 4,5. L’analyse est plafonnée à 1500 éléments et s’exécute via requestIdleCallback pendant les temps morts du navigateur.

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 active de votre boutique (modèles FR, EN, ES, DE, IT 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 ;
• 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. Après une mise à jour du module ou un changement de nom de boutique, cliquez sur Mettre à jour la page de déclaration pour actualiser la page existante sans changer son 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.

Dépannage

• Le bouton n’apparaît pas — vérifiez que le widget est activé, que le hook displayBeforeBodyClosingTag n’est pas désactivé par votre thème, et videz le cache PrestaShop (Paramètres avancés > Performances).
• 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.
• Le contraste élevé laisse une zone incohérente — certains éléments injectés dynamiquement après le chargement (widgets tiers) échappent à la passe d’analyse. Désactivez puis réactivez le mode, ou signalez le cas au support avec l’URL concernée.
• Aucune statistique ne remonte — vérifiez que la collecte est activée et qu’aucun bloqueur côté serveur ne filtre les requêtes vers le contrôleur track du module.

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.