Accordion: Progressive Disclosure-regels en voorbeelden

Een accordion is een gegroepeerde set van gelabelde openbaarmakingsbedieningen waarmee een lezer ondersteunende inhoud ter plekke kan tonen of verbergen. Gebruik het voor optionele referentiedetails, niet voor het hoofdantwoord van de pagina.

Dit weergegeven paar demonstreert progressive disclosure: de labels blijven scanbaar, één paneel is geopend en beide antwoorden zijn aanwezig in de HTML van de pagina, ongeacht of een bezoeker interactie heeft.

Waarom dit element belangrijk is

Progressive disclosure betekent het tonen van de informatie die nodig is voor de huidige beslissing, terwijl diepere of minder gangbare details op aanvraag beschikbaar blijven. Het helpt wanneer een pagina lezers met verschillende kennisniveaus bedient. Een terugkerende klant kan langs implementatienotities scrollen; een eerste gebruiker kan ze openen. De bediening verlaagt de visuele dichtheid zonder inhoud te verwijderen of elke lezer door elke uitzondering te dwingen.

Hetzelfde gemak kan verhulling worden. Een lezer die zoekt naar een direct antwoord, op de pagina terechtkomt en acht gesloten labels ziet, moet raden welk paneel het bevat en een extra handeling verrichten. Op mobiel verplaatst herhaaldelijk openen en sluiten ook de inhoud over de viewport. De accordion verdient daarom alleen zijn plaats wanneer de meeste lezers hun primaire taak kunnen voltooien zonder elk paneel te openen.

Machine-extraheerbaarheid voegt een strengere test toe. Extraheerbaarheid is het vermogen van zoekmachines, AI-antwoordsystemen, parsers en ondersteunende tools om de tekst te ontvangen en de relatie met het label te behouden. Elk antwoord moet aanwezig zijn in het initiële server-gerenderde Document Object Model (DOM), de gestructureerde weergave van de pagina door de browser. CSS mag een aanwezig paneel visueel inklappen; JavaScript mag het antwoord niet pas na een klik ophalen of fabriceren. Een crawler mag nooit klikken, de clientcode uitvoeren of wachten op een secundair verzoek.

Volg de schrijfregels voor elementen voordat u dit patroon gebruikt. Als het doel van de inhoud overeenkomt met een specifieker getypeerd element, heeft dat element voorrang. Een accordion mag toegestane ondersteunende inhoud bevatten, maar mag een waarschuwing, vergelijking, definitie of stappenreeks niet hernoemen of afvlakken alleen om de pagina korter te maken.

Wanneer gebruiken

Gebruik een accordion wanneer aan alle vier voorwaarden is voldaan:

1. De lezer kan de inhoud van het paneel voorspellen op basis van het label.
2. De inhoud is nuttig voor een subset van lezers in plaats van noodzakelijk voor iedereen.
3. Alle paneelinhoud wordt meegeleverd in de initiële HTML en blijft bereikbaar zonder aanwijsapparaat.
4. Inklappen verbetert het scannen op de verwachte viewport wezenlijk.

Goede kandidaten zijn optionele compatibiliteitsdetails, ongebruikelijke foutentakken, ondersteunende definities, secundaire beleidsclausules, verzenduitzonderingen en gegroepeerde referentieantwoorden. Een accordion kan ook werken voor een grote FAQ-collectie wanneer elke vraag zichtbaar blijft en elk antwoord op zichzelf staat.

Bijna-raakgevallen tonen het meest voorkomende misbruik:

• Een korte pagina met twee korte secties: zichtbare koppen en alinea’s zijn sneller te scannen dan twee bedieningen.
• Een lang artikel dat korter lijkt: tien omvangrijke secties inklappen vermindert de waargenomen hoogte, maar verhoogt de interactie en verbergt de reikwijdte van de pagina.
• Primaire productinformatie: prijs, beschikbaarheid, materiële beperkingen, annuleringsvoorwaarden en kerneigenschappen beïnvloeden de beslissing en mogen niet afhankelijk zijn van uitklappen.
• Een sequentiële procedure: stappen vereisen volgorde en context. Een gesloten paneel kan lezers een vereiste laten overslaan of stappen in de verkeerde volgorde laten uitvoeren.
• Een vergelijking: lezers hebben gelijktijdig zicht nodig op dezelfde criteria. Aparte panelen dwingen tot een op geheugen gebaseerde vergelijking.
• Een veiligheidswaarschuwing of juridische kwalificatie: de consequentie van het missen ervan is groter dan het visuele voordeel van het verbergen.
• Een navigatiesubstituut: een accordion is geen inhoudsopgave. Het onthult inhoud op dezelfde locatie in plaats van te verplaatsen naar stabiele paginasecties.

Twijfelt u? Publiceer de inhoud dan zichtbaar. Extra scrollen is meestal herstelbaar; een gemist antwoord, niet-gemelde beperking of ontoegankelijk DOM-knooppunt is dat niet.

Waar plaatsen

Plaats de accordion nadat de pagina het directe antwoord heeft gegeven en voldoende zichtbare uitleg heeft geboden zodat de lezer begrijpt wat de groep bevat. Introductie met een H2 en één reikwijdtezin. De groep fungeert vervolgens als een aanvullende referentielaag binnen die sectie.

Exacte positie regels:

• Plaats het na de zichtbare uitleg waar het bij hoort, nooit tussen een bewering en het bewijs dat die bewering ondersteunt.
• Houd het binnen de bovenliggende sectie waarvan het onderwerp elk item benoemt. Als de labels alleen zin hebben met een ontbrekende kop, is de groep verkeerd geplaatst.
• Plaats een accordion met productdetails na de kernwaarde, prijscontext en aankoopvoorwaarden; plaats probleemoplossingstakken na de gedeelde diagnose en de veiligste eerste controle.
• Houd een afsluitende FAQ-accordion na de hoofdconclusie en vóór de laatste volgende actie, mits het resterende in plaats van herhaalde vragen beantwoordt.
• Geef de groep een stabiele sectie-anker wanneer lezers ernaar kunnen linken. Individuele paneellinks zijn optioneel, maar als ze worden aangeboden, moeten ze het juiste item openen en focussen.

Een accordion mag niet direct naast tabbladen, een tweede accordion of een dichte vergelijkingstabel staan. Aangrenzende interactiepatronen dwingen lezers een mechanisme te kiezen voordat ze inhoud kunnen kiezen. Het mag geordende stappen niet onderbreken, een waarschuwing niet scheiden van de consequentie, of tussen een productprijs en de voorwaarden die die prijs bepalen komen te staan. Plaats geen promotionele banner in de groep of onmiddellijk na elk paneel; promotie concurreert met de referentietaak en maakt uitklappen tot een verkooptrap.

Anatomie

De gelabelde anatomie bevat zeven onderdelen:

1. Groepskop: benoemt het gedeelde onderwerp in de omringende documenthiërarchie.
2. Itemlabel: voorspelt de specifieke inhoud zonder vage labels zoals “Meer informatie”.
3. Openbaarmakingsbediening: een native summary of een button die toetsenbordfocus ontvangt en één paneel schakelt.
4. Statusindicator: communiceert visueel geopend of gesloten, terwijl de programmatische status wordt blootgesteld via native semantiek of aria-expanded.
5. Paneel: bevat het antwoord of referentiedetail en blijft in de initiële DOM.
6. Bedieningsrelatie: native <details>/<summary> semantiek of aria-controls plus overeenkomende ID’s koppelen elke bediening aan exact één paneel.
7. Itemgrens: witruimte, rand en DOM-groepering zorgen dat één label niet lijkt een naburig antwoord te bedienen.

Het zichtbare chevron is decoratief. Verberg het voor ondersteunende technologie, omdat de uitgevouwen status de betekenis al geeft. Rotatie alleen kan de status niet communiceren; de bedieningssemantiek moet dat doen.

Ontwerpvoorbeelden

Elke variant gebruikt dezelfde velden en DOM-aanwezigheidsregel. Kies de variant op basis van de leestaak, niet op basis van decoratie.

Standaard enkel-open groep

Het openen van één item sluit het eerder geopende item. Gebruik dit wanneer panelen alternatieven zijn en lezers normaal gesproken één tegelijk nodig hebben, zoals elkaar uitsluitende probleemoplossingssymptomen.

Multi-open referentiegroep

Lezers kunnen meerdere panelen open houden. Gebruik dit wanneer ze aanvullende details kunnen vergelijken of combineren, zoals ondersteunde bestandstypen en accountmachtigingen. Als gelijktijdige vergelijking de primaire taak is, gebruik dan een zichtbare tabel.

Standaard geopende oriëntatie

Open het eerste of meest voorkomende item bij initiële belading wanneer het het inhoudspatroon demonstreert en nuttige oriëntatie biedt. Open nooit meer dan één item alleen om ruimte te vullen.

Compacte FAQ-variant

Gebruik vraaglijsten en beknopte zelfstandige antwoorden. De interactie rechtvaardigt op zichzelf geen gestructureerde data; schema hangt af van het inhoudstype en exacte zichtbare records.

Lange-inhoud stress-status

Een paneel met meer dan twee korte alinea’s geeft aan dat het materiaal mogelijk een zichtbare sectie verdient. De stressvariant bestaat voor het testen van tekstomloop, links, lijsten, focus en responsieve flow, niet als het normale redactionele doel.

Parameters

Het contract scheidt groepgedrag van iteminhoud, zodat elk platform dezelfde labels, statussen en relaties kan behouden.

De eerste bovenliggende kop wordt toegewezen aan heading. De eerste kop van elk genest item wordt toegewezen aan label, en alles daarna aan de content van dat item. Dit is een expliciete geneste-item-toewijzing, consistent met de basisvoorrangs- en bodyregels. open=true stelt alleen de initiële presentatie in; het verandert het inhoudsbelang niet. Wanneer linkable=true, moet navigeren naar een itemfragment het uitvouwen, de focus voorspelbaar verplaatsen en de kop zichtbaar laten onder een eventuele sticky header.

Syntax en codevoorbeelden

Alle drie notaties vertegenwoordigen één canonieke groep. Ze kunnen verschillende wrapperklassen renderen, maar moeten inhoud in de initiële HTML, bronvolgorde, toegankelijke namen en status behouden.

Draagbare Markdown-richtlijn

:::accordion{mode=multiple linkable=true}
## Exportdetails

::item{id="included-fields" open=true}
### Welke velden zijn inbegrepen?

De export bevat de velden die momenteel beschikbaar zijn voor uw account en rapportbereik.
::

::item{id="filter-behavior"}
### Hebben filters invloed op de export?

Ja. Bevestig de actieve datumbereik-, markt- en statusfilters voordat u het bestand maakt.
::
:::

Hugo shortcode

{{< accordion heading="Exportdetails" mode="multiple" linkable="true" >}}
{{< accordion-item id="included-fields" label="Welke velden zijn inbegrepen?" open="true" >}}
De export bevat de velden die momenteel beschikbaar zijn voor uw account en rapportbereik.
{{< /accordion-item >}}
{{< accordion-item id="filter-behavior" label="Hebben filters invloed op de export?" >}}
Ja. Bevestig de actieve datumbereik-, markt- en statusfilters voordat u het bestand maakt.
{{< /accordion-item >}}
{{< /accordion >}}

Dit is de Hugo-adapter specificatie. Een repository voldoet er niet aan door klassen toe te voegen aan willekeurige koppen; het heeft een renderer nodig die native openbaarmakings-HTML of een equivalente knop-en-paneelrelatie produceert.

WordPress-blok

<!-- wp:amicited/accordion {"heading":"Exportdetails","mode":"multiple","linkable":true} -->
<!-- wp:amicited/accordion-item {"id":"included-fields","label":"Welke velden zijn inbegrepen?","open":true} -->
<p>De export bevat de velden die momenteel beschikbaar zijn voor uw account en rapportbereik.</p>
<!-- /wp:amicited/accordion-item -->
<!-- wp:amicited/accordion-item {"id":"filter-behavior","label":"Hebben filters invloed op de export?"} -->
<p>Ja. Bevestig de actieve datumbereik-, markt- en statusfilters voordat u het bestand maakt.</p>
<!-- /wp:amicited/accordion-item -->
<!-- /wp:amicited/accordion -->

Het geregistreerde WordPress-blok slaat de canonieke velden op in plaats van te vertrouwen op een visuele groep van niet-gerelateerde Details-blokken. De server-render moet elk antwoord uitgeven vóór interactie.

Voorbeelden

Goed voorbeeld

Accountverwijderingsdetails verschijnt na een zichtbare uitleg van wat verwijderen doet en een zichtbare waarschuwing dat het onomkeerbaar is. De drie labels zijn “Wat gebeurt er met geplande exports?”, “Hoe lang blijft een aangevraagd archief beschikbaar?” en “Kan een andere beheerder het verzoek annuleren?” Elk paneel bevat één optionele tak, alle antwoorden staan in HTML en de toetsenbordfocus is zichtbaar.

Dit werkt omdat de belangrijkste consequentie en vereiste actie zichtbaar blijven. De accordion bevat secundaire vragen die van toepassing zijn op verschillende lezers, en elk label laat een lezer voorspellen of openen de moeite waard is.

Slecht voorbeeld

Kies uw plan bevat gesloten panelen met de labels “Starter”, “Team” en “Enterprise”. Prijs, gebruikslimieten, contractduur, annuleringsvoorwaarden en beschikbaarheid bevinden zich in de panelen. Slechts één plan kan tegelijk open zijn.

Dit faalt omdat aankoopcriteria nevenzichtbaarheid vereisen. De lezer moet herhaaldelijk panelen openen en feiten onthouden, terwijl een niet-interactieve extractor mogelijk door de client geladen prijzen mist. Vervang het door een zichtbare prijs- of specificatietabel en reserveer openbaarmaking voor optionele details zoals factuurformaten of ongebruikelijke geschiktheidsregels.

Schema-opmaak en toegankelijkheid

Accordion heeft geen toegewezen Schema.org-type. De interactie levert geen gestructureerde data op alleen door te bestaan. Als de records echte vragen en antwoorden zijn, kan het FAQ-inhoudscontract FAQPage voeden; als de groep productdetails, beleidsregels of probleemoplossingsnotities bevat, gebruik dan alleen het schema dat gerechtvaardigd wordt door de pagina en inhoud. Zichtbare tekst en elke gestructureerde weergave moeten overeenkomen.

Gebruik bij voorkeur native <details> en <summary> voor eenvoudige openbaarmakingen, omdat de browser toetsenbordbediening en statussemantiek levert. Waar ontwerp of enkel-open gedrag een aangepaste implementatie vereist, moet elke bediening een button zijn, aria-expanded="true" of "false" blootstellen, naar het paneel verwijzen met aria-controls, en een unieke ID hebben waarnaar het paneel kan verwijzen met aria-labelledby. Plaats de bediening niet op een div met een klikhandler.

Enter of Spatie moet de gefocuste bediening bedienen. Tab beweegt door bedieningen en interactieve inhoud in het open paneel; focus mag niet in gesloten inhoud komen. Het openen of sluiten van een paneel laat focus normaal op de bediening. Pijltjestoetsnavigatie tussen koppen is optioneel, maar als geïmplementeerd mag het normaal Tab-gedrag niet vervangen.

Houd alle labels in de toegankelijkheidsboom en alle antwoorden in bron-HTML. Een visueel gesloten paneel mag native openbaarmakingsgedrag of een ondersteunde verborgen status gebruiken, maar de inhoud moet beschikbaar worden wanneer uitgevouwen zonder een tweede ophaalactie. De ingeklapte status mag geen duplicate inhoud veroorzaken via aparte desktop- en mobiele kopieën. Test op 200% zoom, met lange labels, alleen toetsenbord, verminderde beweging en een schermlezer. Animeer hoogte of pictogramrotatie alleen wanneer de beweging kan worden onderdrukt en inhoud niet wordt vertraagd.

Schrijfregels

Het label draagt de kosten van de interactie, dus het moet een precieze belofte doen. Schrijf 3–14 woorden en meestal niet meer dan 120 tekens. Gebruik een directe vraag voor FAQ-inhoud en een beschrijvende zelfstandig-naamwoordgroep voor referentie-inhoud. Vermijd “Meer”, “Details”, “Lees dit” en labels die alleen verschillen door een nummer.

Gebruik 3–8 items per groep. Elk paneel moet normaal 20–120 woorden bevatten en niet meer dan 250. Twee korte panelen zijn duidelijker als open proza; negen of meer hebben groepering, zichtbare navigatie of redactionele consolidatie nodig. Houd labels grammaticaal parallel en rangschik items op leestaak, verwachte frequentie of een reële volgorde van categorieën—niet alfabetisch tenzij het opzoeken echt alfabetisch is.

Paneeltoon is direct, zelfstandig en feitelijk. Vermeld het antwoord in de eerste zin, omdat een lezer al een interactiekost heeft betaald. Definieer elke noodzakelijke term binnen het paneel of in zichtbare tekst onmiddellijk vóór de groep. Begin niet met opwarmzinnen zoals “Er zijn verschillende dingen om te overwegen.”

Plaats deze nooit alleen in een accordion:

• het directe antwoord of unieke waardepropositie van de pagina;
• veiligheidswaarschuwingen, contra-indicaties, wettelijke verplichtingen of onomkeerbare gevolgen;
• prijs, beschikbaarheid, materiële productlimieten of vereiste aankoopvoorwaarden;
• geordende stappen, vereisten of een voltooiingscontrole;
• bewijs dat nodig is om de omringende bewering te ondersteunen;
• een primaire vergelijking of beslissingsmatrix;
• formulieren, afrekenbedieningen, toestemming of de belangrijkste call-to-action van de pagina;
• een andere accordion, tabbladen of een carrousel.

Een compacte lijst, kleine tabel, inline link of ondersteunende afbeelding is acceptabel wanneer deze volledig bij één optioneel item hoort en bruikbaar blijft op mobiel. Als een paneel zijn eigen inhoudsopgave of meer dan één kopniveau nodig heeft, promoveer het dan naar een zichtbare sectie of aparte pagina.

Posttypes die het gebruiken

De postTypes frontmatter-array is de bron van deze gebruikstabel. Opname betekent dat het element beschikbaar is onder de vermelde voorwaarde, niet verplicht op elke pagina van dat type.

QA-checklist

• Een zichtbaar direct antwoord verschijnt vóór de accordion.
• Elk item is optionele referentie-inhoud, geen informatie die alle lezers nodig hebben.
• De groep heeft 3–8 items met precieze, parallelle labels.
• De volledige tekst van elk paneel is aanwezig in de initiële server-gerenderde HTML.
• Geen antwoord is afhankelijk van een door klik getriggerd netwerkverzoek of client-only invoeging.
• Native details/summary of echte knoppen leveren correct toetsenbordgedrag.
• Aangepaste bedieningen tonen aria-expanded, aria-controls, unieke ID’s en een bijbehorend paneellabel.
• Focus is zichtbaar, blijft voorspelbaar na schakelen en kan een gesloten paneel niet betreden.
• Lange labels worden afgebroken zonder afkapping, overlap of het verbergen van de statusindicator.
• De lay-out werkt op 200% zoom en op een smalle viewport zonder horizontaal scrollen.
• Beweging respecteert voorkeuren voor verminderde beweging en vertraagt nooit de toegang tot inhoud.
• Individuele fragmentlinks, indien ondersteund, openen en tonen het juiste paneel.
• Gestructureerde data is gebaseerd op inhoudsbetekenis, niet op het uiterlijk van de accordion.
• FAQPage-records, indien uitgezonden, komen exact overeen met de zichtbare vraag- en antwoordtekst.
• Geen geneste accordion, aangrenzende tabset, herhaalde mobiele kopie of belangrijkste CTA is aanwezig.
• De pagina communiceert nog steeds zijn primaire antwoord wanneer elk paneel gesloten is.

Veelgestelde vragen

De frontmatter slaat de canonieke FAQ-records voor deze pagina op. Hun antwoorden versterken de implementatiegrens: inhoud mag visueel zijn ingeklapt, maar blijft aanwezig, toegankelijk en secundair aan het zichtbare antwoord.