Productcarrousels: Navigeren, Toegankelijkheid en Extractie

Een productcarrousel is een horizontaal scrollbare rij productkaarten die wordt gebruikt om een kleine, gerelateerde set te tonen zonder die set tot de hoofdcatalogus van de pagina te maken. Het moet een shopper helpen een bepaald aankooppad te vervolgen — zoals het vinden van compatibele accessoires of vergelijkbare alternatieven — terwijl de identiteit, volgorde en feiten van elk item behouden blijven voor mensen en machines.

Waarom dit element ertoe doet

Een carrousel beheert aandacht door een paar keuzes te tonen op het moment dat ze relevant worden. Op een productpagina kan een koper die het hoofdproduct heeft begrepen, compatibele accessoires verwelkomen. Een volledig grid zou op dat punt concurreren met de primaire aankoop; één compacte rij behoudt de oorspronkelijke beslissing terwijl verkenning mogelijk blijft.

Dat voordeel heeft een psychologische kostenpost: alles wat voorbij de zichtbare rand ligt, wordt sneller over het hoofd gezien. De eerste kaart krijgt meer blootstelling dan de zevende, en een afgekapte laatste kaart kan op een fout lijken tenzij het ontwerp een vervolg signaleert. Een carrousel moet daarom een secundaire, doelbewust geordende set bevatten. Het mag geen keuze verbergen die de lezer nodig heeft om prijs, veiligheid, compatibiliteit of het assortiment zelf te begrijpen.

Machine-extractie is het vermogen van zoekmachines, assistenten, feeds en contenttools om elk product te isoleren en de bijbehorende velden te behouden. Een persoon kan vegen om kaart zes te onthullen; een crawler voert die interactie mogelijk nooit uit. Wanneer latere slides pas verschijnen na JavaScript, gebruikmaken van display:none, of slechts bestaan als achtergrondafbeeldingen, ziet het systeem een onvolledige verzameling. Door elke kaart in semantische brondvolgorde weer te geven, kan een machine dezelfde namen, URL’s, posities, prijzen, valuta’s en beschikbaarheid herleiden die een shopper kan bereiken.

Volg de element-schrijfregels voor voorrang: classificeer het blok op basis van het doel voordat je de verschijningsvorm kiest. Als het de taak is om een secundair productpad te tonen, is dit element van toepassing. Als het de taak is om volledige resultaten te tonen of vergelijking naast elkaar mogelijk te maken, heeft het juiste grid of de getypeerde tabel voorrang.

Wanneer te gebruiken

Gebruik een productcarrousel wanneer aan al deze voorwaarden is voldaan:

• De set is secundair aan de hoofdtaak van de pagina.
• De producten delen één expliciete relatie, zoals compatibele accessoires, alternatieven in dezelfde categorie, recent bekeken items of een redactionele shortlist.
• Vier tot acht beknopte kaarten geven nuttige breedte zonder een verborgen catalogus te creëren.
• De volgorde kan worden verklaard door relevantie, compatibiliteit, redactionele rangschikking, recentheid of een andere zichtbare regel.
• Elk product blijft begrijpelijk als compacte kaart en heeft een canonieke bestemming voor volledige details.

Een carrousel wint het van een grid wanneer de verticale ruimte beperkt is en lezers niet alle keuzes tegelijk hoeven te zien. Het kan context behouden op een productdetailpagina, een korte aanbevelingsset bij elkaar houden op mobiel, en een volgende route tonen zonder acht volledige beschrijvingen in de artikelstroom te plaatsen.

Gebruik een grid wanneer de set de bestemming is. Zoekresultaten, een productcategorie, een gefilterde collectie of een collectie die volledig moet worden gescand, hebben zichtbare aantallen, sortering, filters, paginering en stabiele URL’s nodig. Gebruik een vergelijkingstabel wanneer lezers dezelfde specificaties moeten beoordelen over verschillende opties. Gebruik een afbeeldingengalerij wanneer de items weergaven zijn van één onderwerp in plaats van afzonderlijke verkoopbare producten.

Veelvoorkomende bijna-ongelukken zijn een rij van twee items die in carrouselbediening wordt gedwongen, een categorie met 30 producten die in een rail wordt geperst, een hero-bannercarrousel met promoties in plaats van producten, en een carrousel die wordt gebruikt om zwakke aanbevelingen onder de vouw te verbergen. Ook ‘Recent bekeken’ is een conditionele bijna-misser: het is alleen nuttig wanneer de bezoeker daadwerkelijk geschiedenis heeft, de kop zegt waarom die items verschijnen, en een lege toestand geen activiteit verzint.

Waar te plaatsen

De plaatsing moet een vraag beantwoorden die de lezer net heeft ontwikkeld. Plaats compatibele accessoires na compatibiliteits- en meegeleverde-iteminformatie, alternatieven na de beperkingen of beslissingssamenvatting van het primaire product, en gerelateerde producten na de hoofdlijst van de categorie in plaats van ervoor. Plaats in redactionele content de rail na criteria en bewijs, niet voordat lezers weten waarom de producten in aanmerking komen.

Houd de kop, relatiestatement, itemtelling, bediening en kaarten in één regio. Plaats een ‘Bekijk alle’-link naast de kop of na de rij wanneer er een complete collectie bestaat. De link moet naar een crawlbare canonieke pagina leiden, niet naar een onbegrensde client-side rail.

Plaats geen carrousel naast een andere carrousel, een automatisch roterende banner, een prijstabel of de primaire aankoopbediening van de pagina. Aangrenzende horizontale gebaren creëren dubbelzinnigheid, terwijl concurrerende prijzen onduidelijk kunnen maken welk aanbod de hoofd-CTA aanschaft. Onderbreek geen procedurele stappen, waarschuwing, afrekenvoorwaarden of vereiste wettelijke openbaarmaking met aanbevelingen. Plaats nooit essentiële varianten in een carrousel als het kiezen ervan de prijs, beschikbaarheid of configuratie van het primaire product verandert; varianten horen bij de bediening van het eigenlijke product.

Op kleine schermen, sta één complete kaart plus een weloverwogen glimp van de volgende kaart toe, of één complete kaart met een expliciete positieaanduiding. De regio mag horizontaal scrollen, maar het document zelf niet. Zorg voor een zichtbaar pad voorbij de carrousel, zodat een toetsenbord- of touch-gebruiker nooit vast komt te zitten in herhaalde horizontale navigatie.

Anatomie

1. Sectiekop: benoemt de set, zoals ‘Compatibele accessoires’, in plaats van het generieke ‘Wellicht vind je dit ook leuk.’
2. Relatiestatement: legt uit waarom de producten in aanmerking komen en of de volgorde redactioneel, gedragsmatig of commercieel is.
3. Itemtelling: vermeldt de eindige omvang vóór interactie, bijvoorbeeld ‘6 producten.’
4. Zichtvenster: knipt alleen de presentatie bij; het verwijdert kaarten buiten het scherm niet uit het document.
5. Productkaart: behoudt de naam, bestemming, beslissende kwalificatie en actuele commerciële feiten van één product als één eenheid.
6. Vervolgindicatie: gebruikt een gedeeltelijke volgende kaart, positietekst of beide; alleen schaduw is te gemakkelijk te missen.
7. Vorige- en volgende-knoppen: gebruiken knoppen die naar hun effect zijn vernoemd en geven een uitgeschakelde toestand aan de uiteinden weer.
8. Positie-indicator: kondigt een bereik aan zoals ‘Producten 1–3 van 6,’ niet een rij ongelabelde stippen.
9. Bekijk alle-route: opent de canonieke volledige collectie wanneer deze bestaat.
10. Focusweergave: blijft zichtbaar op elke knop en kaartlink zonder te worden afgekapt door het zichtvenster.

Elke kaart volgt het productkaart -contract. De carrousel heeft de betekenis van de collectie en navigatie, niet het lokaal herdefiniëren van productfeiten.

Ontwerpvoorbeelden

Redactionele shortlist: gebruik voor vier tot acht producten geselecteerd op basis van vastgestelde criteria. De volgorde mag alleen rangorde vertegenwoordigen wanneer de pagina het bewijs voor die rangorde bevat; noem het anders ‘Geselecteerde opties’ en vermijd ordinale claims.

Gerelateerde producten: gebruik voor producten in dezelfde categorie of vervangende items nadat het hoofdproduct is uitgelegd. Vermeld de gedeelde eigenschap, zoals vormfactor of prijsklasse, in plaats van personalisatie te impliceren.

Compatibele accessoires: gebruik wanneer elk item een geverifieerde relatie heeft met het bijbehorende product. Herhaal het compatibele model of bereik in de kaarttekst; nabijheid is geen compatibiliteitsgarantie.

Gedragsgeschiedenis: gebruik voor recent bekeken of opgeslagen items alleen wanneer de bezoeker die toestand heeft gecreëerd. Benoem de basis, behoud de volgorde van recentheid, bied verwijdering waar passend en stuur geen gepersonaliseerde geschiedenis naar gedeelde caches of gestructureerde data.

Parameters

Een afbeelding is voorwaardelijk omdat een tekstgerichte productkaart compleet kan zijn zonder. Indien gebruikt, moet het bestand bestaan, moeten afmetingen ruimte reserveren en moet alternatieve tekst overeenkomen met het doel. Als één kaart prijs of beschikbaarheid toont, moet elke vergelijkbare kaart een equivalent actueel veld of expliciete status tonen.

Syntax en codevoorbeelden

Draagbare Markdown-richtlijn

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::

Hugo shortcode-toewijzing

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}

Dit is de beoogde adapter-specificatie, geen geregistreerde shortcode-aanroep. Het gebruikt alleen benoemde parameters. Tot de adapter bestaat, implementeer je de collectie als semantische HTML of een niet-interactieve rij zonder een niet-ondersteunde shortcode te verzinnen.

WordPress-blok

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->

Voorbeelden

Goed: compatibiliteit is expliciet

Accessoires geverifieerd voor Arc 14 — 4 producten Arc laptopstandaard — USD 69 — Op voorraad. Past op 13–16 inch laptops; alle Arc 14-poorten blijven bereikbaar. Dock 7 hub — USD 89 — Op voorraad. Ondersteunt de Arc 14 USB-C-laadspecificatie en 100 W doorlaadvermogen. Stille toetsenset — USD 74 — Beperkte voorraad. Maakt verbinding via Bluetooth; geen ontvanger bezet een Arc 14-poort. Taaklamp Mini — USD 45 — Op voorraad. Gebruikt een aparte USB-C-voeding; het onttrekt geen stroom aan de laptop.

Dit is geslaagd omdat de relatie wordt benoemd en geverifieerd, elke kaart een duidelijke compatibiliteitsverklaring geeft, commerciële velden parallel zijn en het eindige aantal zichtbaar is. Alle vier items kunnen in bronvolgorde bestaan, zelfs als er maar drie in het zichtvenster passen.

Slecht: verborgen aanbevelingen zonder basis

Wellicht vind je dit ook leuk BESTSELLER — $69 — Nu winkelen TRENDING — $89 — Nu winkelen [Drie extra kaarten laden na de tweede veegbeweging.]

Dit faalt omdat de kop de relatie niet uitlegt, ‘bestseller’ en ’trending’ geen gedefinieerde bron of periode hebben, de valuta wordt afgeleid en herhaalde ‘Nu winkelen’-labels de productidentiteit uit context verliezen. Ernstiger: drie producten bestaan pas na interactie, dus een toetsenbordgebruiker, crawler of mislukt script krijgt een andere set.

Schema-opmaak en toegankelijkheid

Een redactionele productcarrousel kan ItemList voeden wanneer de samenstelling en volgorde betekenisvol zijn. Gebruik één ListItem per zichtbaar productentiteit, met position, canonieke URL en de productverwijzing. Posities moeten overeenkomen met DOM- en visuele volgorde. Markeer gepersonaliseerde recent bekeken geschiedenis niet als een openbare ItemList, omdat de set geen stabiele paginainhoud is.

Elke kaart mag alleen Product- en Offer-gegevens voeden wanneer de zichtbare pagina dezelfde feiten ondersteunt. Een naam en bestemming rechtvaardigen geen verzonnen prijs, beoordeling, merk, beschikbaarheid of reviewgegevens. Genereer zichtbare velden en gestructureerde data uit dezelfde goedgekeurde productbron en laat vluchtige eigenschappen weg die niet gesynchroniseerd kunnen blijven. Er is geen speciaal carrousel-schematype.

Gebruik een benoemde <section> of role="region" alleen wanneer de kop nog niet voldoende oriëntatiepunt-semantiek biedt. Geef de collectie weer als een <ul>, <ol> of gelijkwaardige lijst; elke kaart is één lijstitem. Houd kaarten buiten het scherm in de DOM en toegankelijkheidsboom. Horizontaal bijsnijden is presentatie, terwijl display:none, aria-hidden="true", inert of client-only virtualisatie inhoud ontoegankelijk maakt.

Gebruik native knoppen voor vorige en volgende. Noem ze ‘Vorige producten’ en ‘Volgende producten’, schakel ze correct uit aan de uiteinden en behoud focus na verplaatsing. Kondig ‘Producten 4–6 van 8’ aan in een beleefd statusgebied zonder focus naar de nieuw getoonde kaart te verplaatsen. Pijltjestoetsen mogen een verbetering zijn, maar Tab moet normaal bij knoppen en links komen. Vegen mag worden ondersteund, maar nooit als enige invoermethode.

Ga niet automatisch door. Respecteer voorkeuren voor beperkte beweging en gebruik direct of ingetogen scrollen. Een kaartlink heeft een duidelijke toegankelijke naam nodig die de productnaam bevat. Voorkom dubbele focuselementen wanneer zowel afbeelding als titel naar dezelfde URL leiden. Bij 200% zoom kunnen kaarten een één-kaart-zichtvenster worden, maar tekst, bediening en focusringen moeten compleet blijven en de pagina mag niet horizontaal overlopen.

Schrijfregels

De schrijfstijl moet de samenstelling verdedigbaar maken voordat de rij aantrekkelijk wordt gemaakt.

• Een specifieke kop verklaart de route. Gebruik 3–10 woorden: ‘Compatibele Arc 14-accessoires’ of ‘Alternatieven onder USD 100.’ Vertrouw nooit alleen op ‘Meer,’ ‘Trending’ of ‘Wellicht vind je dit ook leuk.’
• Eén zin bepaalt de selectie. Gebruik 8–30 woorden om gedeelde criteria, doelgroep, compatibiliteit of geschiedenisbron te vermelden. Als rangorde of populariteit de volgorde bepaalt, noem dan de metriek, markt en periode.
• Eindige sets blijven inspecteerbaar. Gebruik normaal 4–8 producten en maximaal 12. Twee of drie kaarten moeten een statische rij vormen; grotere assortimenten hebben een grid en canonieke collectieroute nodig.
• Kaartnamen behouden identiteit. Gebruik de officiële productnaam in 1–8 woorden. Vervang deze niet door ‘Beste prijs-kwaliteit’, ‘Onze keuze’ of een campagneslogan.
• Kwalificaties beantwoorden één beslisvraag. Gebruik 4–18 woorden voor pasvorm, onderscheidend vermogen, compatibiliteit of beperking. Vermijd algemene lof zoals ‘premium kwaliteit.’
• Parallelle feiten ondersteunen scannen. Als één kaart prijs, valuta, beschikbaarheid, beoordeling of levering toont, tonen vergelijkbare kaarten equivalente velden of expliciete niet-beschikbare toestanden uit dezelfde bron en markt.
• Volgorde heeft een verantwoordelijke basis. Compatibiliteitsvolgorde mag de beste match eerst plaatsen; rangorde vereist gepubliceerde criteria; recentheid weerspiegelt de geschiedenis van de bezoeker. Betaalde plaatsing moet worden openbaar gemaakt en mag niet doorgaan voor redactionele relevantie.
• Acties behouden context. Gebruik ‘Bekijk Arc laptopstandaard,’ niet vijf keer ‘Meer informatie.’ Een kaart-CTA opent de canonieke detailpagina van dat product, tenzij de actie expliciet een bekende variant aan een winkelmandje toevoegt.
• Vluchtige claims hebben eigenaarschap. Prijzen, voorraad, levering, kortingen, beoordelingen en populariteit komen van goedgekeurde systemen en hebben het vereiste versheidsgedrag. Redactioneel proza mag geen tegenstrijdige waarde hardcoderen.

Plaats nooit lange reviews, vergelijkingsmatrices, variantkiezers, hoeveelheidsbediening, afrekenvoorwaarden, getuigenissen, afteltimers, pop-ups, videospelers of vereiste waarschuwingen in een slide. Selecteer geen add-ons vooraf, voeg geen producten aan een winkelmandje toe door alleen te navigeren, en verberg geen gesponsorde ordening. Een carrousel toont routes; de bestemming of het aangrenzende primaire component bevat de volledige beslissing.

Posttypes die het gebruiken

Het postTypes-veld in de frontmatter stuurt deze tabel. Opname betekent dat het element voorwaardelijk is wanneer een compacte secundaire productset de gespecificeerde pagina verbetert.

QA-checklist

• De set is secundair aan de hoofdtaak van de pagina en heeft één expliciete productrelatie.
• Een grid of vergelijkingstabel zou de werkelijke taak van de lezer niet beter dienen.
• De carrousel bevat normaal 4–8 producten en overschrijdt nooit 12.
• De kop, selectiebasis, itemtelling, bediening, positiestatus en Bekijk alle-route zijn zichtbaar waar van toepassing.
• Elke kaart heeft een stabiele identificatie, officiële naam, canonieke bestemming en beslissingsrelevante kwalificatie.
• Prijs, valuta, beschikbaarheid, beoordeling, levering en promotievelden zijn parallel en gebronneerd wanneer getoond.
• Claims over compatibiliteit, ranking, populariteit, personalisatie en sponsoring maken hun basis bekend.
• DOM-volgorde, visuele volgorde, aangekondigde positie, toetsenbordvolgorde en eventuele ItemList-posities komen overeen.
• Elk product wordt server-side gegenereerd en bruikbaar zonder JavaScript; geen latere slide hangt af van interactie of een client-verzoek.
• Kaarten buiten het scherm blijven in de toegankelijkheidsboom en worden niet verborgen, inert gemaakt of alleen weergegeven door achtergrondafbeeldingen.
• Vorige- en volgende-knoppen hebben duidelijke namen, correcte uitgeschakelde toestanden, zichtbare focus en stabiele focus na verplaatsing.
• Aanraakvegen en pijltjestoetsen zijn verbeteringen; standaardknoppen en Tab-navigatie bieden volledige toegang.
• Er is geen automatische beweging, focusdiefstal, toetsenbordval of horizontale overloop op paginaniveau.
• Positieveranderingen worden als tekst aangekondigd en kleur, bijsnijden, schaduwen of stippen dragen nooit alleen de continuïteit.
• Elk afbeeldingspad is resolvable vóór publicatie, afmetingen reserveren ruimte en alternatieve tekst weerspiegelt het doel van de kaart.
• Bij 200% zoom en op een smal scherm blijven één kaart, de tekst, de bediening en de focusring compleet.
• Gestructureerde data herhaalt zichtbare, actuele feiten en laat gepersonaliseerde geschiedenis of verzonnen commerciële eigenschappen weg.
• De complete collectie heeft een crawlable Bekijk alle-URL wanneer lezers redelijkerwijs verder dan de rail moeten kunnen browsen.
• Draagbare Markdown-, Hugo- en WordPress-representaties behouden dezelfde producten, volgorde, velden en fallback.

FAQ

De academysjabloon geeft de vijf beoordeelde vragen weer die zijn opgeslagen in [[faq]] frontmatter.