Snap Carousel — Block Style

Description

La plupart des extensions de carrousel WordPress chargent des bibliothèques lourdes (Slick, Swiper, jQuery) et échouent aux vérifications de base en matière d’accessibilité. Les lecteurs d’écran ne peuvent pas les parcourir, les utilisateurs au clavier sont bloqués, et les audits WCAG les signalent systématiquement.

Snap Carousel adopte une approche différente : CSS scroll-snap gère le défilement, les attributs ARIA appropriés font le reste. Pas de bibliothèque JavaScript, pas de panneau de configuration, pas de courbe d’apprentissage — juste un style de bloc à appliquer en un clic.

Développé par WeAre[WP], une agence WordPress spécialisée dans les sites web accessibles et les audits RGAA. Cette extension existe parce que nous avions besoin d’un carrousel qui réussisse réellement nos propres audits.

Blocs pris en charge

Appliquez l’un des 4 styles de carrousel à :

• Bloc Groupe (core/group) — tous les blocs enfants deviennent des diapositives
• Bloc Boucle de requête (core/query) — les publications défilent comme des diapositives
• Bloc Galerie (core/gallery) — les images défilent comme des diapositives

Variantes

• Carrousel (3 éléments) — 3 éléments visibles + aperçu
• Carrousel (1 élément) — diaporama pleine largeur
• Carrousel (2 éléments) — 2 éléments visibles + aperçu
• Carrousel (4 éléments) — 4 éléments visibles + aperçu

Fonctionnalités

• 100 % CSS scroll-snap — pas de Slick, Swiper ni jQuery
• Boutons de navigation précédent/suivant
• Navigation clavier (touches fléchées, Début, Fin)
• Attributs ARIA complets (role= »region », aria-roledescription, aria-live)
• Effet peek : visibilité partielle de l’élément suivant, signalant du contenu défilable
• Responsive (adaptation automatique tablette/mobile)
• Respect de prefers-reduced-motion
• Compatible avec les blocs Groupe, Boucle de requête et Galerie
• Compatible avec tous les blocs enfants (images, colonnes, groupes, WooCommerce…)
• Léger : ~2 Ko CSS + ~2 Ko JS, aucune dépendance externe
• Prise en charge complète des langues RTL (droite à gauche)
• Entièrement internationalisé (traduction française incluse)
• Personnalisable via les propriétés CSS personnalisées

Accessibilité (WCAG 2.2 AA)

• role="region" + aria-roledescription="carousel" sur le conteneur
• role="group" + aria-roledescription="slide" sur chaque élément
• aria-label="X sur Y" pour le contexte de position
• tabindex="0" pour le focus clavier
• aria-live="polite" pour annoncer les changements
• Boutons avec aria-label et aria-controls
• Cibles tactiles 44×44 px minimum
• Indicateur de focus visible

Utilisation

Avec un bloc Groupe

1. Dans l’éditeur, créez un bloc Groupe
2. Définissez la mise en page du groupe en Rangée
3. Ajoutez des blocs enfants (images, groupes, colonnes…)
4. Dans la colonne latérale des réglages → Styles → choisissez Carrousel (3 éléments) (ou une autre variante)
5. Publiez

Avec un bloc Boucle de requête

1. Insérez un bloc Boucle de requête
2. Configurez la requête (type de publication, filtres, nombre d’éléments…)
3. Dans la colonne latérale des Réglages → Styles → choisissez une variante Carrousel
4. Publiez — les publications défilent horizontalement comme des diapositives

Avec un bloc Galerie

1. Insérez un bloc Galerie et ajoutez des images
2. Dans la colonne latérale des Réglages → Styles → choisissez une variante Carrousel
3. Publiez — les images défilent horizontalement comme des diapositives

Les boutons de navigation et les attributs d’accessibilité sont automatiquement ajoutés côté interface publique.

Personnalisation

Le carrousel est conçu pour fonctionner tel quel, mais vous pouvez facilement surcharger les styles dans le fichier style.css de votre thème ou via l’Outil de personnalisation WordPress > CSS additionnel.

Désactiver l’effet peek

Par défaut, les éléments sont légèrement plus étroits que la zone visible afin que l’élément suivant « apparaisse » — signalant qu’il y a davantage de contenu à faire défiler. Pour désactiver cet effet et afficher des éléments en pleine largeur :

/* Disable peek — 3 items variant */
.is-style-snap-carousel > * {
    flex-basis: calc(33.333% - 1rem) !important;
}

/* Disable peek — 1 item variant */
.is-style-snap-carousel-single > * {
    flex-basis: 100% !important;
}

/* Disable peek — 2 items variant */
.is-style-snap-carousel-duo > * {
    flex-basis: calc(50% - 0.75rem) !important;
}

/* Disable peek — 4 items variant */
.is-style-snap-carousel-quad > * {
    flex-basis: calc(25% - 1.125rem) !important;
}

Personnaliser les flèches de navigation

/* Arrow color and background */
.snap-carousel-prev,
.snap-carousel-next {
    background: #0073aa;
    color: #ffffff;
    border-color: #0073aa;
}

/* Arrow hover state */
.snap-carousel-prev:hover,
.snap-carousel-next:hover {
    background: #005177;
    color: #ffffff;
}

/* Arrow size (default: 44px — WCAG minimum touch target) */
.snap-carousel-prev,
.snap-carousel-next {
    width: 48px;
    height: 48px;
}

/* Square arrows instead of round */
.snap-carousel-prev,
.snap-carousel-next {
    border-radius: 8px;
}

Personnaliser l’espacement

/* Gap between items */
[class*="is-style-snap-carousel"] {
    gap: 2rem;
}

/* Space above carousel (room for navigation) */
.snap-carousel-wrapper {
    padding-top: 4rem;
}

Personnaliser l’indicateur de focus

/* Custom focus color for keyboard navigation */
[class*="is-style-snap-carousel"]:focus-visible {
    outline-color: #ff6600;
    outline-width: 3px;
}

.snap-carousel-prev:focus-visible,
.snap-carousel-next:focus-visible {
    outline-color: #ff6600;
}

Utilisation avec les jetons de design theme.json

Le carrousel utilise déjà les jetons --wp--preset--color--base, --wp--preset--color--contrast et --wp--preset--color--primary. Vous pouvez les surcharger par bloc dans theme.json ou via CSS :

/* Example: dark themed carousel */
.snap-carousel-wrapper {
    --wp--preset--color--base: #1a1a2e;
    --wp--preset--color--contrast: #e0e0e0;
    --wp--preset--color--primary: #e94560;
}<h3>Technical Notes</h3>

– La surcharge CSS flex-wrap: nowrap sur le conteneur Rangée force le défilement horizontal
– Les éléments utilisent un flex-basis légèrement réduit pour créer l’effet peek (élément suivant partiellement visible)
– Les boutons de navigation sont positionnés en absolute en haut à droite (ajustez la valeur top pour votre thème)
– Le JS utilise un debounce de 150 ms au défilement pour la mise à jour des boutons et de 300 ms pour les annonces aux lecteurs d’écran
– Compatible avec les blocs WooCommerce (produits, etc.)

À propos

Snap Carousel est développé et maintenu par WeAre[WP], une agence WordPress française spécialisée dans les sites web accessibles et les audits de conformité RGAA. Cette extension a été créée pour résoudre un vrai problème : chaque extension de carrousel que nous avons auditée échouait aux exigences de base en matière d’accessibilité. Nous en avons donc créé une qui réussit nos propres audits.

Besoin d’aide pour votre projet WordPress ? Contactez-nous.