RWEB 4030 Limiter le recours aux carrousels

Description

Le carrousel souvent utilisé pour mettre en avant de multiples contenus montrent rapidement ses limites en terme de conversion avec un impact négatif sur l’expérience utilisateur. Sa présence implique plusieurs points critiques :

• Un alourdissement du poids des pages par la présence de CSS et JavaScript dédié mais également par le contenu présent sur chaque écran du carrousel.
• Une complexité en terme d’assurance qualité web et d’accessibilité numérique.
• Une utilisation plus importante des ressources processeurs dans le cas d’un carrousel automatique.

Exemple

Les balises <img /> possèdent un attribut HTML loading qui permet nativement un chargement progressif des images. <img src="mon_image.webp" alt="" loading="lazy" />

Les animations de certains attributs CSS impliquent un repaint/reflow des navigateurs qui demande des ressources machines. Pour limiter cela, préférez les animations des carrousels par la propriété CSS transform.

Solution alternative

Limiter au maximum l’utilisation des carrousels en privilégiant du contenu statique mis à jour régulièrement. Dans le cas contraire :

• Mettre en place un contrôle simple et complet du composant (arrêt, écran suivant/précédent)
• Préférez un chargement progressif des images présentes dans les différents écrans.
• Préférez les animations impliquant une utilisation des ressources processeurs.
• Limiter le nombre d’écrans présents dans le carrousel.

Principe de validation