Creative Elements 2.14 : une avancée majeure pour l’accessibilité et la performance

Creative Elements 2.14 : une avancée majeure pour l’accessibilité et la performance

Dans un e-commerce en constante évolution, deux enjeux dominent aujourd’hui : l’inclusivité et la vitesse. Avec l’arrivée du European Accessibility Act (EAA) et des exigences toujours plus strictes des Core Web Vitals de Google, votre boutique ne doit plus seulement être esthétique — elle doit être accessible à tous et se charger plus rapidement que jamais.

Avec la sortie de Creative Elements v2.14, nous introduisons une mise à jour majeure qui répond directement à ces défis. Il ne s’agit pas d’un simple correctif : nous avons repensé en profondeur l’architecture du module afin d’optimiser l’accessibilité (a11y) et de réduire significativement le poids du code pour des performances supérieures.

Voici en détail pourquoi la version 2.14 marque un tournant pour votre boutique PrestaShop.

Refonte complète de l’accessibilité

L’accessibilité n’est plus une option, c’est une nécessité. Rendre votre boutique accessible signifie permettre à tous les utilisateurs — y compris ceux utilisant des lecteurs d’écran, la navigation clavier ou ayant des déficiences visuelles — de naviguer, comprendre et acheter facilement.

Dans la version 2.14, nous avons réalisé un audit complet de nos éléments et composants. Nous avons amélioré la navigation clavier et optimisé les rôles ARIA sur l’ensemble du module.

Voici les nouveautés côté inclusivité :

  • Nouveau widget : Liens d’évitement : Il s’agit d’une amélioration majeure pour la navigation clavier. Nous avons introduit un widget dédié permettant aux utilisateurs naviguant au clavier de passer directement au contenu principal, sans devoir parcourir les menus répétitifs. C’est une exigence essentielle pour atteindre un haut niveau de conformité WCAG, évitant aux utilisateurs d’avoir à appuyer des dizaines de fois sur la touche Tab.
  • Comportement optimisé des lecteurs d’écran: Nous avons affiné le code afin que les lecteurs d’écran se concentrent uniquement sur les éléments importants. Les éléments purement décoratifs — comme les séparateurs ou les vidéos d’arrière-plan — ont été retirés de l’arbre d’accessibilité. Cela réduit le bruit pour les utilisateurs non-voyants et améliore la compréhension globale. 
  • Améliorations sémantiques : Nous avons optimisé les rôles et attributs ARIA sur la quasi-totalité des éléments. Qu’il s’agisse d’une barre de recherche, d’un panier ou d’un simple bouton, le code communique désormais beaucoup plus clairement sa fonction aux technologies d’assistance.
Nouveau widget: Liens d’évitement

Construire un site accessible : une responsabilité partagée

Même si Creative Elements v2.14 fournit une base technique solide pour un site accessible, le résultat final dépend aussi de la manière dont vous construisez vos pages. L’accessibilité est une collaboration entre l’outil et le créateur.

Lorsque vous concevez vos pages ou vos fiches produits, gardez ces bonnes pratiques à l’esprit :

  • Maîtrisez la hiérarchie des titres : Une erreur fréquente consiste à utiliser un H1 uniquement pour obtenir un texte plus grand. Cela perturbe les moteurs de recherche et les lecteurs d’écran. Utilisez toujours les titres de manière logique : H1 pour le titre principal, H2 pour les sections, H3 pour les sous-sections.
  • Soignez les contrastes : Lors de la conception de boutons ou de textes superposés, veillez à garantir un contraste suffisant entre le texte et l’arrière-plan. Un contraste trop faible rend la lecture difficile, en particulier sur mobile ou en plein soleil.
  • Utilisez des liens explicites : Évitez les textes génériques comme “Cliquez ici”. Préférez des formulations descriptives comme “Voir le produit” ou “Contacter le support”. Cela aide les utilisateurs de lecteurs d’écran à comprendre immédiatement la destination du lien.
  • Renseignez les balises ALT: Lorsque vous utilisez le widget Image, prenez le temps de remplir le champ ALT. Cela permet de décrire l’image aux utilisateurs qui ne peuvent pas la voir, et reste l’une des techniques les plus efficaces pour améliorer le SEO.
Astuce : Vous avez besoin d’un titre visuellement très grand, mais qui n’est qu’un sous-titre ?

Ne cassez pas la structure. Utilisez plutôt les tailles d’affichage (S, M, L, XL, XXL), configurables globalement dans le thème.

Performance : plus léger, plus intelligent, plus rapide

La vitesse est un facteur clé : elle améliore l’expérience utilisateur, booste le SEO et augmente les conversions. Dans cette mise à jour, nous avons mis l’accent sur un chargement plus intelligent des ressources et une réduction du poids global des pages.

CSS modulaire et chargement conditionnel

Le changement le plus important concerne la gestion des styles. Auparavant, une grande partie du CSS était regroupée dans un seul fichier volumineux. Dans la version 2.14, nous avons divisé le CSS en modules indépendants.

Désormais, grâce au chargement conditionnel, le CSS d’un widget n’est chargé que si ce widget est réellement utilisé sur la page. Par exemple, si vous n’utilisez pas d’accordéon ou de slider, le navigateur de l’utilisateur ne téléchargera pas leur code. Cela réduit considérablement le poids total de la page.

Bfcache (Back/Forward Cache)

Nous avons activé le support du Bfcache sur les pages de listing. Cette fonctionnalité moderne permet au navigateur de stocker les pages en mémoire. Concrètement, lorsqu’un utilisateur consulte un produit puis revient en arrière vers la liste, la page s’affiche instantanément, sans rechargement. Cela rend la navigation extrêmement fluide et rapide.

Réduction du DOM (code plus propre)

Nous avons également simplifié la structure HTML en supprimant certains éléments inutiles. Par exemple, des wrappers superflus ont été retirés de plusieurs widgets. Même si cet impact est plus léger que celui du CSS, un DOM plus propre contribue à un rendu légèrement plus rapide — et chaque optimisation compte.

Nouvelles fonctionnalités design et outils SEO

Comme toujours, cette mise à jour apporte également de nouveaux outils pour enrichir vos boutiques.

  • Widget Quantité produit : Suite à de nombreuses demandes, nous avons ajouté un widget Quantité dédié au constructeur Product Miniature. Vous pouvez désormais permettre à vos clients de choisir la quantité directement depuis la grille de produits avant l’ajout au panier.
  • Support du FAQ Schema : Les widgets Accordéon et Toggle intègrent désormais une option permettant de générer automatiquement du FAQ Schema. En activant cette fonctionnalité, vous indiquez à Google que votre contenu est structuré sous forme de questions-réponses, ce qui augmente significativement vos chances d’obtenir des rich snippets (résultats enrichis) dans les résultats de recherche.
Support du FAQ Schema

Comment mettre à jour ?

Creative Elements v2.14 est disponible dès maintenant. Vous pouvez effectuer la mise à jour directement via votre gestionnaire de modules afin de profiter immédiatement de ces nouvelles fonctionnalités.

Le processus de mise à jour prend tout en charge automatiquement, vous permettant de reprendre rapidement la création de vos pages sans interruption.

Créez pour tous. Chargez instantanément. Convertissez davantage.

Explorer d’autres mises à jour