Curseurs de produits : navigation, accessibilité et extraction

Un curseur de produits est une rangée de fiches produits défilable horizontalement, utilisée pour exposer un petit ensemble connexe sans transformer cet ensemble en catalogue principal de la page. Il doit aider un acheteur à poursuivre un parcours d’achat défini — comme trouver des accessoires compatibles ou des alternatives comparables — tout en préservant l’identité, l’ordre et les faits de chaque article pour les humains et les machines.

Pourquoi cet élément est important

Un curseur gère l’attention en montrant quelques choix au moment où ils deviennent pertinents. Sur une page produit, un acheteur qui a compris l’article principal peut apprécier des accessoires compatibles. Une grille complète à ce stade entrerait en concurrence avec l’achat principal ; une rangée compacte préserve la décision originale tout en permettant l’exploration.

Cet avantage a un coût psychologique : tout ce qui dépasse le bord visible est plus facile à négliger. La première carte reçoit plus d’exposition que la septième, et une carte finale tronquée peut ressembler à une erreur si le design ne signale pas la continuité. Un curseur doit donc contenir un ensemble secondaire, ordonné intentionnellement. Il ne doit pas cacher un choix dont le lecteur a besoin pour comprendre le prix, la sécurité, la compatibilité ou l’étendue de l’offre elle-même.

L’extractibilité machine est la capacité des moteurs de recherche, assistants, flux et outils de contenu à isoler chaque produit et à conserver ses champs attachés. Une personne peut balayer pour révéler la carte six ; un robot d’exploration peut ne jamais exécuter cette interaction. Lorsque les diapositives suivantes n’arrivent qu’après JavaScript, utilisent display:none ou n’existent que comme images d’arrière-plan, le système voit une collection incomplète. Afficher chaque carte dans l’ordre source sémantique permet à une machine de retrouver les mêmes noms, URL, positions, prix, devises et disponibilités qu’un acheteur peut atteindre.

Suivez les règles de rédaction des éléments pour la précédence : classez le bloc par objectif avant de choisir son apparence. Si son rôle est d’exposer un parcours produit secondaire, cet élément s’applique. Si son rôle est d’afficher des résultats complets ou de permettre une évaluation côte à côte, la grille ou le tableau typé approprié a la priorité.

Quand l’utiliser

Utilisez un curseur de produits lorsque toutes ces conditions sont réunies :

• L’ensemble est secondaire par rapport à la tâche principale de la page.
• Les produits partagent une relation explicite unique, comme des accessoires compatibles, des alternatives de même catégorie, des articles récemment consultés ou une sélection éditoriale.
• Quatre à huit fiches concises offrent une largeur utile sans créer de catalogue caché.
• L’ordre peut être expliqué par la pertinence, la compatibilité, le classement éditorial, la récence ou une autre règle visible.
• Chaque produit reste compréhensible sous forme de fiche compacte et dispose d’une destination canonique pour les détails complets.

Un curseur est préférable à une grille lorsque l’espace vertical est limité et que les lecteurs n’ont pas besoin de voir tous les choix simultanément. Il peut préserver le contexte sur une page de détail produit, maintenir un court ensemble de recommandations ensemble sur mobile et exposer un prochain parcours sans placer huit descriptions complètes dans le flux de l’article.

Utilisez une grille lorsque l’ensemble est la destination. Les résultats de recherche, une catégorie de produits, une collection filtrée ou une collection qui doit être scannée intégralement nécessitent des comptes visibles, un tri, des filtres, une pagination et des URL stables. Utilisez un tableau comparatif lorsque les lecteurs doivent juger les mêmes spécifications entre plusieurs options. Utilisez une galerie d’images lorsque les éléments sont des vues d’un même sujet plutôt que des produits achetables distincts.

Les erreurs courantes incluent une rangée de deux articles forcée dans des contrôles de carrousel, une catégorie de 30 produits compressée dans un rail, un carrousel de bannière héros contenant des promotions au lieu de produits, et un curseur utilisé pour dissimuler des recommandations faibles sous la ligne de flottaison. « Récemment consultés » est également une erreur conditionnelle : utile uniquement lorsque le visiteur a effectivement un historique, que le titre explique pourquoi ces articles apparaissent et qu’un état vide ne fabrique pas d’activité.

Où le placer

Le placement doit répondre à une question que le lecteur vient de se poser. Placez les accessoires compatibles après les informations de compatibilité et les articles inclus, les alternatives après les limites du produit principal ou le résumé de la décision, et les produits connexes après la liste principale de la catégorie plutôt qu’avant. Dans le contenu éditorial, placez le rail après les critères et les preuves, pas avant que les lecteurs ne sachent pourquoi les produits sont qualifiés.

Gardez le titre, la déclaration de relation, le nombre d’articles, les contrôles et les cartes dans une seule région. Mettez un lien « Voir tout » à côté du titre ou après la rangée lorsqu’une collection complète existe. Le lien doit mener vers une page canonique explorable par les robots, et non étendre un rail côté client illimité.

Ne placez pas un curseur à côté d’un autre curseur, d’une bannière à rotation automatique, d’un tableau de prix ou des contrôles d’achat principaux de la page. Des gestes horizontaux adjacents créent de l’ambiguïté, tandis que des prix concurrents peuvent rendre flou le fait de savoir quelle offre le CTA principal achète. N’interrompez pas les étapes procédurales, un avertissement, les conditions de paiement ou les mentions légales requises avec des recommandations. Ne mettez jamais de variantes essentielles à l’intérieur d’un curseur si le choix d’une variante modifie le prix, la disponibilité ou la configuration du produit principal ; les variantes appartiennent aux contrôles du produit propriétaire.

Sur les petits écrans, permettez une carte complète plus un aperçu délibéré de la carte suivante, ou une carte complète avec une étiquette de position explicite. La région peut défiler horizontalement, mais le document lui-même ne le doit pas. Préservez un chemin visible au-delà du curseur afin qu’un utilisateur de clavier ou tactile ne soit jamais piégé dans une navigation horizontale répétée.

Anatomie

1. Titre de section : nomme l’ensemble, par exemple « Accessoires compatibles », plutôt que le générique « Vous pourriez aussi aimer ».
2. Déclaration de relation : explique pourquoi les produits sont qualifiés et si l’ordre est éditorial, comportemental ou commercial.
3. Nombre d’articles : indique la taille finie avant l’interaction, par exemple « 6 produits ».
4. Zone d’affichage : ne fait que rogner la présentation ; elle ne supprime pas les cartes hors écran du document.
5. Fiche produit : préserve le nom d’un produit, sa destination, son qualificatif décisif et ses faits commerciaux actuels en une seule unité.
6. Indice de continuation : utilise une carte partielle suivante, un texte de position, ou les deux ; l’ombre seule est trop facile à manquer.
7. Boutons précédent et suivant : utilisent des boutons nommés pour leur effet et affichent un état désactivé aux extrémités.
8. Indicateur de position : annonce une plage telle que « Produits 1–3 sur 6 », pas une rangée de points non étiquetés.
9. Lien Voir tout : ouvre la collection complète canonique lorsqu’elle existe.
10. Traitement du focus : reste visible sur chaque contrôle et lien de carte sans être rogné par la zone d’affichage.

Chaque carte suit le contrat de la fiche produit . Le curseur possède la signification de la collection et la navigation plutôt que de redéfinir localement les faits produits.

Exemples de conception

Sélection éditoriale : à utiliser pour quatre à huit produits sélectionnés selon des critères énoncés. L’ordre peut représenter un classement uniquement lorsque la page contient les preuves de ce classement ; sinon, étiquetez-le « Options sélectionnées » et évitez les affirmations ordinales.

Produits connexes : à utiliser pour des articles de même catégorie ou de substitution après que le produit principal a été expliqué. Énoncez la propriété partagée, comme le facteur de forme ou la gamme de prix, plutôt que d’impliquer une personnalisation.

Accessoires compatibles : à utiliser lorsque chaque article a une relation vérifiée avec le produit propriétaire. Répétez le modèle ou la gamme compatible dans le texte de la carte ; la proximité n’est pas une garantie de compatibilité.

Historique comportemental : à utiliser pour les articles récemment consultés ou sauvegardés uniquement lorsque le visiteur a créé cet état. Étiquetez la base, préservez l’ordre de récence, fournissez une suppression le cas échéant, et n’émettez pas d’historique personnalisé dans des caches partagés ou des données structurées.

Paramètres

Une image est conditionnelle car une fiche produit priorisant le texte peut être complète sans elle. Si utilisée, son fichier doit exister, les dimensions doivent réserver de l’espace et le texte alternatif doit correspondre à son objectif. Si une carte affiche le prix ou la disponibilité, chaque carte similaire doit afficher un champ actuel équivalent ou un statut explicite.

Syntaxe et exemples de code

Directive Markdown portable

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="Voir tous les accessoires" viewAllUrl="/accessories/"}
## Accessoires de bureau compatibles

Vérifié pour l'ordinateur portable Arc 14 ; quatre produits.

::item{id=arc-stand name="Support ordinateur Arc" url="/products/arc-stand/" price="69 USD" availability="in-stock"}
Surélève les ordinateurs portables 13–16 pouces et dégage les ports de charge.
::

::item{id=dock-7 name="Hub Dock 7" url="/products/dock-7/" price="89 USD" availability="in-stock"}
Ajoute sept ports et prend en charge la charge pass-through de 100 W.
::
:::

Mappage de shortcode Hugo

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="Voir tous les accessoires" viewAllUrl="/accessories/" >}}
## Accessoires de bureau compatibles

Vérifié pour l'ordinateur portable Arc 14 ; quatre produits.

{{< product-slide id="arc-stand" name="Support ordinateur Arc" url="/products/arc-stand/" price="69 USD" availability="in-stock" >}}
Surélève les ordinateurs portables 13–16 pouces et dégage les ports de charge.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Hub Dock 7" url="/products/dock-7/" price="89 USD" availability="in-stock" >}}
Ajoute sept ports et prend en charge la charge pass-through de 100 W.
{{< /product-slide >}}
{{< /product-slider >}}

Il s’agit de la spécification d’adaptateur prévue, et non d’une invocation de shortcode enregistrée. Elle utilise uniquement des paramètres nommés. Jusqu’à ce que l’adaptateur existe, implémentez la collection en HTML sémantique ou en rangée non interactive sans inventer un shortcode non pris en charge.

Bloc WordPress

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"Voir tous les accessoires","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Accessoires de bureau compatibles</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Vérifié pour l'ordinateur portable Arc 14 ; quatre produits.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Support ordinateur Arc","url":"/products/arc-stand/","price":"69 USD","availability":"in-stock","qualifier":"Surélève les ordinateurs portables 13–16 pouces et dégage les ports de charge."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Hub Dock 7","url":"/products/dock-7/","price":"89 USD","availability":"in-stock","qualifier":"Ajoute sept ports et prend en charge la charge pass-through de 100 W."} /-->
<!-- /wp:amicited/product-slider -->

Exemples

Bon : la compatibilité est explicite

Accessoires vérifiés pour Arc 14 — 4 produits Support ordinateur Arc — 69 USD — En stock. S’adapte aux ordinateurs portables 13–16 pouces ; tous les ports Arc 14 restent accessibles. Hub Dock 7 — 89 USD — En stock. Prend en charge la spécification de charge USB-C Arc 14 et la charge pass-through de 100 W. Ensemble clavier silencieux — 74 USD — Stock faible. Se connecte via Bluetooth ; aucun récepteur n’occupe un port Arc 14. Lampe de bureau Mini — 45 USD — En stock. Utilise une alimentation USB-C séparée ; elle ne tire pas d’énergie de l’ordinateur portable.

Cet exemple réussit parce que la relation est nommée et vérifiée, chaque carte fait une déclaration de compatibilité distincte, les champs commerciaux sont parallèles et le nombre fini est visible. Les quatre articles peuvent exister dans l’ordre source même lorsque seulement trois tiennent dans la zone d’affichage.

Mauvais : recommandations cachées sans fondement

Vous pourriez aussi aimer BESTSELLER — 69 $ — Acheter maintenant TRENDING — 89 $ — Acheter maintenant [Trois cartes supplémentaires se chargent après le deuxième balayage.]

Cet exemple échoue parce que le titre n’explique pas la relation, « bestseller » et « tendance » n’ont ni source ni période définies, la devise est implicite, et les étiquettes répétées « Acheter maintenant » perdent l’identité du produit hors contexte. Plus grave encore, trois produits n’existent que par interaction, donc un utilisateur de clavier, un robot d’exploration ou un script défaillant reçoit un ensemble différent.

Balisage schéma et accessibilité

Un curseur de produits éditorial peut alimenter ItemList lorsque son appartenance et son ordre sont significatifs. Utilisez un ListItem par entité produit visible, avec position, URL canonique et la référence produit. Les positions doivent correspondre au DOM et à l’ordre visuel. Ne marquez pas l’historique personnalisé récemment consulté comme un ItemList public, car l’ensemble n’est pas un contenu de page stable.

Chaque carte peut alimenter des données Product et Offer uniquement lorsque la page visible prend en charge les mêmes faits. Un nom et une destination ne justifient pas un prix, une note, une marque, une disponibilité ou des données d’avis inventés. Générez les champs visibles et les données structurées à partir de la même source produit approuvée, et omettez les propriétés volatiles qui ne peuvent pas rester synchronisées. Il n’existe pas de type de schéma spécial pour les carrousels.

Utilisez une <section> nommée ou role="region" uniquement lorsque le titre ne fournit pas déjà des repères sémantiques suffisants. Représentez la collection sous forme de <ul>, <ol> ou liste équivalente ; chaque carte est un élément de liste. Gardez les cartes hors écran dans le DOM et l’arbre d’accessibilité. Le rognage horizontal est une question de présentation, tandis que display:none, aria-hidden="true", inert ou la virtualisation côté client rend le contenu indisponible.

Utilisez des boutons natifs pour précédent et suivant. Nommez-les « Produits précédents » et « Produits suivants », désactivez-les correctement aux extrémités et conservez le focus après le déplacement. Annoncez « Produits 4–6 sur 8 » dans une région de statut polie sans déplacer le focus vers la carte nouvellement exposée. Les touches fléchées peuvent être une amélioration, mais Tab doit atteindre les contrôles et les liens normalement. Le balayage peut être pris en charge, mais jamais comme seul moyen d’entrée.

N’avancez pas automatiquement. Respectez les préférences de mouvement réduit et utilisez un défilement immédiat ou restreint. Un lien de carte nécessite un nom accessible distinct contenant le nom du produit. Évitez les cibles de focus en double lorsque l’image et le titre mènent à la même URL. À 200 % de zoom, les cartes peuvent devenir une zone d’affichage d’une seule carte, mais le texte, les contrôles et les anneaux de focus doivent rester complets et la page ne doit pas déborder horizontalement.

Règles de rédaction

La rédaction doit rendre l’appartenance défendable avant de rendre la rangée attrayante.

• Un titre spécifique explique le parcours. Utilisez 3–10 mots : « Accessoires compatibles Arc 14 » ou « Alternatives à moins de 100 USD. » Ne vous fiez jamais uniquement à « Plus », « Tendance » ou « Vous pourriez aussi aimer. »
• Une phrase établit la sélection. Utilisez 8–30 mots pour énoncer les critères partagés, le public, la compatibilité ou la source de l’historique. Si le classement ou la popularité détermine l’ordre, nommez la métrique, le marché et la période.
• Les ensembles finis restent inspectables. Utilisez normalement 4–8 produits et pas plus de 12. Deux ou trois cartes devraient former une rangée statique ; les assortiments plus importants nécessitent une grille et un chemin de collection canonique.
• Les noms de cartes préservent l’identité. Utilisez le nom officiel du produit en 1–8 mots. Ne le remplacez pas par « Meilleur rapport qualité-prix », « Notre sélection » ou un slogan de campagne.
• Les qualificatifs répondent à une question de décision. Utilisez 4–18 mots pour l’ajustement, la capacité distinctive, la compatibilité ou la limitation. Évitez les éloges génériques comme « qualité premium. »
• Les faits parallèles facilitent le balayage visuel. Si une carte montre le prix, la devise, la disponibilité, la note ou la livraison, les cartes similaires affichent des champs équivalents ou des états indisponibles explicites provenant de la même source et du même marché.
• L’ordre nécessite une base responsable. L’ordre de compatibilité peut placer la correspondance la plus forte en premier ; le classement nécessite des critères publiés ; la récence reflète l’historique du visiteur. Le placement payant doit être divulgué et ne peut pas se faire passer pour une pertinence éditoriale.
• Les actions conservent le contexte. Utilisez « Voir le support ordinateur Arc », pas cinq occurrences de « En savoir plus. » Un CTA de carte ouvre la page de détail canonique de ce produit, sauf si l’action ajoute explicitement une variante connue à un panier.
• Les affirmations volatiles nécessitent une propriété. Les prix, stocks, livraison, remises, notes et popularité proviennent de systèmes approuvés et portent le comportement de fraîcheur requis. La prose éditoriale ne doit pas coder en dur une valeur contradictoire.

Ne placez jamais de longs avis, matrices de comparaison, sélecteurs de variantes, contrôles de quantité, conditions de paiement, témoignages, minuteries de compte à rebours, fenêtres contextuelles, lecteurs vidéo ou avertissements obligatoires à l’intérieur d’une diapositive. Ne présélectionnez pas d’extras, n’ajoutez pas de produits à un panier simplement en naviguant et ne dissimulez pas un ordre sponsorisé. Un curseur prévisualise des parcours ; la destination ou le composant principal adjacent contient la décision complète.

Types d’articles qui l’utilisent

Le champ postTypes dans le frontmatter alimente ce tableau. L’inclusion signifie que l’élément est conditionnel lorsqu’un ensemble secondaire compact de produits améliore la page spécifiée.

Liste de contrôle QA

• L’ensemble est secondaire par rapport à la tâche principale de la page et a une relation produit explicite unique.
• Une grille ou un tableau comparatif ne servirait pas mieux la tâche réelle du lecteur.
• Le curseur contient normalement 4–8 produits et ne dépasse jamais 12.
• Le titre, la base de sélection, le nombre d’articles, les contrôles, le statut de position et le lien Voir tout sont visibles le cas échéant.
• Chaque carte a un identifiant stable, un nom officiel, une destination canonique et un qualificatif pertinent pour la décision.
• Les champs de prix, devise, disponibilité, note, livraison et promotion sont parallèles et sourcés lorsqu’ils sont affichés.
• Les affirmations de compatibilité, classement, popularité, personnalisation et sponsoring divulguent leur base.
• L’ordre DOM, l’ordre visuel, la position annoncée, l’ordre clavier et les éventuelles positions ItemList correspondent.
• Chaque produit est rendu côté serveur et utilisable sans JavaScript ; aucune diapositive ultérieure ne dépend d’une interaction ou d’une requête client.
• Les cartes hors écran restent dans l’arbre d’accessibilité et ne sont ni masquées, ni inertes, ni représentées uniquement par des images d’arrière-plan.
• Les boutons précédent et suivant ont des noms distincts, des états désactivés corrects, un focus visible et un focus stable après le déplacement.
• Le balayage tactile et les touches fléchées sont des améliorations ; les boutons standard et la navigation par Tab fournissent un accès complet.
• Il n’y a pas de mouvement automatique, de vol de focus, de piège clavier ni de débordement horizontal au niveau de la page.
• Les changements de position sont annoncés sous forme de texte, et la couleur, le rognage, les ombres ou les points ne portent jamais seuls la continuation.
• Chaque chemin d’image est résolu avant publication, les dimensions réservent de l’espace et le texte alternatif reflète l’objectif de la carte.
• À 200 % de zoom et sur un écran étroit, une carte, son texte, ses contrôles et son anneau de focus restent complets.
• Les données structurées répètent des faits visibles et actuels et omettent l’historique personnalisé ou les propriétés commerciales inventées.
• La collection complète a une URL Voir tout explorable par les robots lorsque les lecteurs ont raisonnablement besoin de parcourir au-delà du rail.
• Les représentations Markdown portable, Hugo et WordPress préservent les mêmes produits, ordre, champs et solution de repli.

FAQ

Le modèle d’académie affiche les cinq questions examinées stockées dans le frontmatter [[faq]].