Accessible Carousel - démo en direct
Voir les blocs en action
Comment essayer ces démos au clavier
- TabPasser dans une démo (le focus est toujours visible).
- ←→Diapositive précédente / suivante.
- AccueilFinPremière / dernière diapositive.
- EspaceMettre en pause ou relancer le défilement automatique.
Bandeau - Éditorial
Bandeau - Doux (défilement automatique, rythme calé sur le temps de lecture)
Celui-ci défile automatiquement, mais chaque diapositive reste désormais affichée assez longtemps pour lire son texte (rythme adapté au temps de lecture), et la commande de pause est toujours disponible. Il se met aussi en pause au survol et au focus.
Bandeau - Minimal
Nouveau : navigation titrée et modes de lecture facilitée
La dernière version ajoute des options qu’un propriétaire de site peut activer pour chaque carrousel. Le bandeau ci-dessous utilise une liste d’onglets titrés au lieu de points : chaque bouton affiche le titre propre à sa diapositive, ce qui est bien plus facile à reconnaître et à mémoriser qu’une rangée de ronds identiques. Au-dessus, vous trouverez deux boutons destinés aux visiteurs : « Afficher en liste » déploie tout le carrousel en une simple liste verticale statique pour celles et ceux qui préfèrent tout lire d’un coup, et « Lecture facilitée » augmente l’espacement des lettres, des mots et des lignes et aligne le texte à gauche pour un affichage adapté à la dyslexie. Le lien d’évitement « Passer le carrousel » (visible lorsque vous y accédez avec la touche Tab) permet aux utilisateurs du clavier de passer directement à la suite. Les trois sont facultatifs et désactivés par défaut.
Deux blocs accessibles, six compositions soignées
L’extension vous offre deux blocs. Le carrousel de bandeaux sert à présenter de grandes diapositives mises en avant, avec un titre, un court texte et un appel à l’action. Le défilement de cartes est une rangée de cartes à accrochage de défilement natif, qui fonctionne aussi bien au toucher, au pavé tactile qu’au clavier. Les deux partagent les mêmes réglages de design (couleurs, typographie, bordures, espacements et styles de boutons), ce qui vous permet de les accorder à votre thème sans écrire une ligne de CSS. Une vérification d’accessibilité intégrée à l’éditeur affiche en direct une mesure du contraste WCAG et vous avertit des textes alternatifs manquants ou des textes de bouton trop vagues pendant que vous construisez.
Pour démarrer rapidement, l’extension est livrée avec six compositions prêtes à l’emploi réparties en trois styles : Éditorial, Doux et Minimal. Insérez une composition, remplacez les images et les textes par les vôtres, et vous obtenez une section terminée en une minute environ. Vous préférez partir de zéro ? Un sélecteur de disposition vous permet de choisir un style ou de commencer avec un bloc vide. Les défilements de cartes ci-dessous présentent les trois mêmes styles.
Cartes - Éditorial
Cartes - Doux
Cartes - Minimal
Nouveau : produits mis en avant avec WooCommerce
Vous utilisez WooCommerce ? Ces deux mêmes composants accessibles peuvent reprendre les produits que vous marquez comme Mis en avant directement depuis votre boutique, présentés ici sous forme de défilement de cartes et de carrousel de bandeaux. Chaque produit devient une carte avec son image, un badge de catégorie au contraste vérifié, le titre, le prix et un lien « Voir » clairement libellé, avec la même utilisation au clavier, la même gestion du focus et la même prise en charge des lecteurs d’écran que toutes les autres démos de cette page.
Dans l’éditeur, vous choisissez les éléments de chaque carte à afficher (image, badge, titre, description, prix et lien), réglez la longueur de la description, triez et filtrez les produits, et choisissez la couleur du badge en mode Auto (toujours conforme aux WCAG) ou Personnalisée, avec une vérification de contraste en direct qui valide votre choix sur-le-champ. Un code court correspondant est fourni pour un placement rapide.
Produits mis en avant - défilement de cartes
Produits mis en avant - carrousel de bandeaux
Testé comme les vraies personnes naviguent
Chaque version est vérifiée selon les WCAG 2.2 AA avec les outils que nous utilisons au quotidien : JAWS, NVDA, VoiceOver et TalkBack pour les lecteurs d’écran, sans oublier axe, Google Lighthouse et les outils de contraste de WebAIM. Les tests au clavier seul, les tests avec zoom du navigateur et le mode Contraste élevé de Windows (couleurs forcées) font partie de la même routine. Pour en savoir plus sur notre approche de la conception inclusive, consultez notre étude de cas sur l’accessibilité web, et parcourez d’autres démos de blocs accessibles sur ce site vitrine.
Comme le carrousel WordPress accessible repose sur du code simple, écrit à la main, sans étape de compilation et sans bibliothèque tierce, il reste léger et prévisible. Rien ne communique avec un serveur distant, aucun suivi, aucun cookie : seulement un balisage propre et le petit script qui le fait fonctionner. C’est ce qui permet aux mêmes blocs de réussir un audit sur votre site aussi bien qu’ici.
Questions fréquentes
L’extension est-elle vraiment gratuite ?
Oui. Elle est publiée dans le répertoire d’extensions de WordPress.org sous licence GPL, sans offre payante nécessaire pour utiliser les blocs présentés sur cette page.
Les visiteurs peuvent-ils passer à un affichage plus simple ou plus facile à lire ?
Oui, si le propriétaire du site active les options. Un bouton « Afficher en liste » déploie le carrousel en une simple liste verticale pour tout lire d’un coup, sans mouvement, et un bouton « Lecture facilitée » élargit l’espacement et aligne le texte à gauche pour un affichage adapté à la dyslexie. Les deux sont désactivés par défaut, et le script supplémentaire ne se charge que lorsqu’ils sont activés.
Réussira-t-elle un audit d’accessibilité ?
Elle est conçue selon les WCAG 2.2 AA et testée avec des lecteurs d’écran, une navigation au clavier seul et des outils automatisés. Comme toujours, testez-la aussi dans votre propre thème, car un thème peut influer sur le contraste des couleurs et les styles de focus autour de n’importe quel bloc.
Peut-elle afficher mes produits WooCommerce ?
Oui. Si WooCommerce est actif, un bloc Produits mis en avant affiche les produits que vous marquez comme mis en avant, dans le défilement de cartes ou dans le carrousel de bandeaux, avec la même prise en charge du clavier, du focus et des lecteurs d’écran. Vous choisissez les éléments de chaque carte à afficher, définissez la longueur de la description et choisissez la couleur du badge grâce à une vérification de contraste WCAG en direct. Un code court correspondant est fourni pour un placement rapide.
Fonctionne-t-elle sans JavaScript ?
Oui. Lorsque JavaScript est désactivé, chaque carrousel devient une simple liste empilée de diapositives : le contenu reste entièrement lisible et aucune information n’est cachée derrière une commande qui ne peut pas fonctionner.
Obtenir le carrousel WordPress accessible
L’extension est disponible gratuitement dans le répertoire d’extensions de WordPress.org. Installez-la depuis votre tableau de bord, sous Extensions → Ajouter, recherchez « Ananyoo Accessible Carousel » et commencez dès aujourd’hui à créer des carrousels inclusifs. Les démos ci-dessus sont les vrais blocs : essayez-les au clavier, puis voyez comment les mêmes compositions s’intègrent dans votre propre thème.