Accordion: Pravidla a příklady progresivního odhalování

Akordeon je seskupená sada popsaných ovládacích prvků odhalení, která umožňuje čtenáři zobrazit nebo skrýt podpůrný obsah na místě. Používejte jej pro volitelné referenční podrobnosti, nikoli pro hlavní odpověď stránky.

Tato vykreslená dvojice demonstruje progresivní odhalování: popisky zůstávají skenovatelné, jeden panel je otevřený a obě odpovědi jsou přítomny v HTML stránky bez ohledu na to, zda návštěvník interaguje.

Proč na tomto prvku záleží

Progresivní odhalování znamená zobrazovat informace potřebné pro aktuální rozhodnutí a zároveň uchovávat hlubší nebo méně obvyklé podrobnosti k dispozici na vyžádání. Pomáhá, když stránka slouží čtenářům s různou úrovní znalostí. Vracející se zákazník může přeskočit implementační poznámky; začínající uživatel je může otevřít. Ovládací prvek snižuje vizuální hustotu, aniž by mazal obsah nebo nutil každého čtenáře procházet všechny výjimky.

Stejné pohodlí se může stát skrýváním. Čtenář, který hledá přímou odpověď, přistane na stránce a uvidí osm zavřených popisků – musí hádat, který panel obsahuje odpověď, a provést další akci. Na mobilu opakované otevírání a zavírání také posouvá obsah v rámci výřezu. Akordeon si proto své místo zaslouží pouze tehdy, když většina čtenářů může splnit svůj primární úkol bez otevírání každého panelu.

Strojová extrahovatelnost přidává přísnější test. Extrahovatelnost je schopnost vyhledávačů, systémů umělé inteligence pro odpovědi, parserů a asistenčních nástrojů přijmout text a zachovat jeho vztah k popisku. Každá odpověď musí být přítomna v počátečním serverově vykresleném Document Object Model (DOM), strukturované reprezentaci stránky v prohlížeči. CSS může vizuálně sbalit přítomný panel; JavaScript nesmí odpověď načítat nebo vytvářet až po kliknutí. Crawler nemusí nikdy kliknout, spustit klientský kód nebo čekat na sekundární požadavek.

Před použitím tohoto vzoru se řiďte pravidly pro psaní prvků . Pokud účel obsahu odpovídá specifičtějšímu typovému prvku, má tento prvek přednost. Akordeon může obsahovat povolený podpůrný obsah, ale nesmí přejmenovat nebo zploštit varování, srovnání, definici nebo sekvenci kroků jen proto, aby byla stránka kratší.

Kdy jej použít

Použijte akordeon, když jsou splněny všechny čtyři podmínky:

1. Čtenář dokáže předpovědět obsah panelu z jeho popisku.
2. Obsah je užitečný pro podmnožinu čtenářů, nikoli nezbytný pro všechny.
3. Veškerý obsah panelů je dodán v počátečním HTML a zůstává dosažitelný bez ukazovacího zařízení.
4. Sbalení podstatně zlepšuje skenování na očekávaném výřezu.

Dobrými kandidáty jsou volitelné podrobnosti o kompatibilitě, neobvyklé větve chyb, podpůrné definice, sekundární klauzule zásad, výjimky z doručení a seskupené referenční odpovědi. Akordeon může také fungovat pro velkou sbírku FAQ, pokud každá otázka zůstává viditelná a každá odpověď je samostatná.

Téměř zásahy odhalují nejčastější zneužití:

• Krátká stránka se dvěma krátkými sekcemi: viditelné nadpisy a odstavce se skenují rychleji než dva ovládací prvky.
• Dlouhý článek upravený tak, aby vypadal kratší: sbalení deseti rozsáhlých sekcí snižuje vnímanou výšku, ale zvyšuje interakci a skrývá rozsah stránky.
• Primární informace o produktu: cena, dostupnost, materiálová omezení, podmínky zrušení a základní specifikace ovlivňují rozhodnutí a nesmí záviset na rozbalení.
• Sekvenční postup: kroky vyžadují pořadí a kontext. Zavřený panel může způsobit, že čtenář přeskočí předpoklad nebo provede kroky v nesprávném pořadí.
• Srovnání: čtenáři potřebují současnou viditelnost napříč stejnými kritérii. Samostatné panely nutí ke srovnání z paměti.
• Bezpečnostní varování nebo právní kvalifikace: následky přehlédnutí jsou vyšší než vizuální výhoda skrytí.
• Náhrada navigace: akordeon není obsah. Odhaluje obsah na stejném místě, místo aby přesouval ke stabilním sekcím stránky.

V případě nejistoty publikujte obsah viditelně. Extra rolování je obvykle napravitelné; chybějící odpověď, nezveřejněné omezení nebo nedostupný DOM uzel nikoli.

Kam jej umístit

Umístěte akordeon poté, co stránka poskytla svou přímou odpověď a dostatečné viditelné vysvětlení, aby čtenář pochopil, co skupina obsahuje. Uveďte jej nadpisem H2 a jednou větou o rozsahu. Skupina se pak chová jako doplňková referenční vrstva v rámci této sekce.

Přesná pravidla umístění:

• Umístěte jej za viditelné vysvětlení, ke kterému se vztahuje, nikdy mezi tvrzení a důkaz, který toto tvrzení podporuje.
• Udržujte jej v rámci nadřazené sekce, jejíž předmět popisuje každou položku. Pokud popisky dávají smysl pouze s chybějícím nadpisem, je skupina špatně umístěna.
• Umístěte akordeon s detaily produktu za základní hodnotu, kontext ceny a nákupní podmínky; umístěte větve odstraňování problémů za sdílenou diagnózu a nejbezpečnější první kontrolu.
• Umístěte závěrečný FAQ akordeon za hlavní závěr a před konečnou další akci, pokud odpovídá na zbytkové, nikoli opakované otázky.
• Poskytněte skupině stabilní kotvu sekce, pokud na ni čtenáři mohou odkazovat. Jednotlivé odkazy na panely jsou volitelné, ale pokud jsou poskytnuty, musí otevřít a zaměřit správnou položku.

Akordeon nesmí být umístěn přímo vedle záložek, druhého akordeonu nebo husté srovnávací tabulky. Sousední interakční vzory nutí čtenáře vybrat mechanismus dříve, než si mohou vybrat obsah. Nesmí přerušovat uspořádané kroky, oddělovat varování od jeho důsledků ani být umístěn mezi cenu produktu a podmínky, které tuto cenu upravují. Neumisťujte propagační banner dovnitř skupiny ani bezprostředně za každý panel; propagace soutěží s referenčním úkolem a způsobuje, že rozbalení působí jako prodejní past.

Anatomie

Popisovaná anatomie obsahuje sedm částí:

1. Nadpis skupiny: pojmenovává sdílený předmět v okolní hierarchii dokumentu.
2. Popisek položky: předpovídá konkrétní obsah bez vágních popisků jako „Zjistěte více“.
3. Ovládací prvek odhalení: nativní summary nebo button, který přijímá klávesové zaměření a přepíná jeden panel.
4. Indikátor stavu: vizuálně komunikuje otevřený nebo zavřený stav, zatímco programový stav je vystaven prostřednictvím nativní sémantiky nebo aria-expanded.
5. Panel: obsahuje odpověď nebo referenční podrobnost a zůstává v počátečním DOM.
6. Vztah ovládacího prvku: nativní sémantika <details>/<summary> nebo aria-controls plus odpovídající ID přiřazují každý ovládací prvek k přesně jednomu panelu.
7. Hranice položky: mezery, okraj a DOM seskupení zajišťují, že jeden popisek nevypadá, že řídí sousední odpověď.

Viditelná šipka je dekorativní. Skryjte ji před asistenční technologií, protože rozbalený stav již poskytuje význam. Samotná rotace nemůže komunikovat stav; musí to udělat sémantika ovládacího prvku.

Příklady designu

Každá varianta používá stejná pole a pravidlo přítomnosti v DOM. Variantu vybírejte podle čtenářského úkolu, nikoli podle dekorace.

Standardní skupina s jedním otevřeným panelem

Otevření jedné položky zavře dříve otevřenou položku. Použijte, když jsou panely alternativami a čtenáři obvykle potřebují jednu najednou, například vzájemně se vylučující symptomy odstraňování problémů.

Referenční skupina s více otevřenými panely

Čtenáři mohou mít otevřeno několik panelů najednou. Použijte, když mohou porovnávat nebo kombinovat doplňující podrobnosti, například podporované typy souborů a oprávnění účtu. Pokud je současné porovnání primárním úkolem, použijte místo toho viditelnou tabulku.

Výchozí otevřená orientace

Otevřete první nebo nejčastější položku při počátečním načtení, pokud demonstruje vzor obsahu a poskytuje užitečnou orientaci. Nikdy neotevírejte více než jednu položku jen pro vyplnění prostoru.

Kompaktní FAQ varianta

Použijte otázky jako popisky a stručné samostatné odpovědi. Interakce sama o sobě nezakládá strukturovaná data; schema závisí na typu obsahu a přesných viditelných záznamech.

Stresový stav dlouhého obsahu

Panel s více než dvěma krátkými odstavci signalizuje, že materiál si možná zaslouží viditelnou sekci. Stresová varianta existuje pro testování obtékání, odkazů, seznamů, zaměření a responzivního toku, nikoli jako běžný redakční cíl.

Parametry

Kontrakt odděluje chování skupiny od obsahu položek, aby každá platforma mohla zachovat stejné popisky, stavy a vztahy.

První nadřazený nadpis se mapuje na heading. První nadpis každé vnořené položky se mapuje na label a vše za ním se mapuje na content této položky. Jedná se o explicitní mapování vnořených položek, konzistentní s pravidly základní precedence a těla. open=true nastavuje pouze počáteční prezentaci; nemění důležitost obsahu. Pokud je linkable=true, navigace na fragment položky musí panel rozbalit, předvídatelně přesunout zaměření a ponechat nadpis viditelný pod jakýmkoli lepícím záhlavím.

Syntaxe a příklady kódu

Všechny tři zápisy představují jednu kanonickou skupinu. Mohou vykreslovat různé obalové třídy, ale musí zachovat obsah v počátečním HTML, zdrojové pořadí, přístupná jména a stav.

Přenosná Markdown direktiva

:::accordion{mode=multiple linkable=true}
## Detaily exportu

::item{id="included-fields" open=true}
### Která pole jsou zahrnuta?

Export obsahuje pole aktuálně dostupná pro váš účet a rozsah sestavy.
::

::item{id="filter-behavior"}
### Ovlivňují filtry export?

Ano. Před vytvořením souboru potvrďte aktivní rozsah dat, trh a stav filtrů.
::
:::

Hugo shortcode

{{< accordion heading="Export details" mode="multiple" linkable="true" >}}
{{< accordion-item id="included-fields" label="Which fields are included?" open="true" >}}
The export contains the fields currently available to your account and report scope.
{{< /accordion-item >}}
{{< accordion-item id="filter-behavior" label="Do filters affect the export?" >}}
Yes. Confirm the active date range, market, and status filters before creating the file.
{{< /accordion-item >}}
{{< /accordion >}}

Toto je specifikace Hugo adaptéru. Repozitář ji nesplňuje přidáním tříd k libovolným nadpisům; potřebuje renderer, který vytváří nativní HTML pro odhalení nebo ekvivalentní vztah tlačítka a panelu.

WordPress blok

<!-- wp:amicited/accordion {"heading":"Export details","mode":"multiple","linkable":true} -->
<!-- wp:amicited/accordion-item {"id":"included-fields","label":"Which fields are included?","open":true} -->
<p>The export contains the fields currently available to your account and report scope.</p>
<!-- /wp:amicited/accordion-item -->
<!-- wp:amicited/accordion-item {"id":"filter-behavior","label":"Do filters affect the export?"} -->
<p>Yes. Confirm the active date range, market, and status filters before creating the file.</p>
<!-- /wp:amicited/accordion-item -->
<!-- /wp:amicited/accordion -->

Registrovaný WordPress blok ukládá kanonická pole, místo aby se spoléhal na vizuální skupinu nesouvisejících Details bloků. Jeho serverový render musí vydat každou odpověď před interakcí.

Příklady

Dobrý příklad

Podrobnosti o smazání účtu se objeví po viditelném vysvětlení, co smazání obnáší, a viditelném varování, že je nevratné. Její tři popisky jsou „Co se stane s naplánovanými exporty?“, „Jak dlouho zůstane vyžádaný archiv k dispozici?“ a „Může jiný správce zrušit požadavek?“ Každý panel obsahuje jednu volitelnou větev, všechny odpovědi jsou v HTML a klávesové zaměření je viditelné.

Toto funguje, protože hlavní důsledek a požadovaná akce zůstávají viditelné. Akordeon obsahuje sekundární otázky, které se týkají různých čtenářů, a každý popisek umožňuje čtenáři předpovědět, zda se vyplatí jej otevřít.

Špatný příklad

Vyberte si svůj plán obsahuje zavřené panely s popisky „Starter“, „Team“ a „Enterprise“. Cena, limity použití, smluvní doba, podmínky zrušení a dostupnost jsou uvnitř panelů. Najednou lze otevřít pouze jeden plán.

Toto selhává, protože nákupní kritéria vyžadují vedlejší viditelnost. Čtenář musí opakovaně otevírat panely a pamatovat si fakta, zatímco neinteraktivní extraktor může přehlédnout ceny načtené klientsky. Nahraďte to viditelnou cenovou nebo specifikační tabulkou a vyhraďte odhalení pro volitelné podrobnosti, jako jsou formáty faktur nebo neobvyklá pravidla způsobilosti.

Schema markup a přístupnost

Akordeon nemá žádný vyhrazený typ Schema.org. Interakce sama o sobě neposkytuje žádná strukturovaná data. Pokud jsou jeho záznamy skutečné otázky a odpovědi, může kontrakt FAQ obsahu poskytovat FAQPage; pokud skupina obsahuje podrobnosti o produktu, zásady nebo poznámky k odstraňování problémů, použijte pouze schema odůvodněné stránkou a obsahem. Viditelný text a jakákoli strukturovaná reprezentace se musí shodovat.

Upřednostněte nativní <details> a <summary> pro jednoduchá odhalení, protože prohlížeč poskytuje klávesové ovládání a stavovou sémantiku. Kde design nebo chování s jedním otevřeným panelem vyžaduje vlastní implementaci, každý ovládací prvek musí být button, vystavovat aria-expanded="true" nebo "false", odkazovat na svůj panel pomocí aria-controls a mít unikátní ID, na které může panel odkazovat pomocí aria-labelledby. Neumisťujte ovládací prvek na div s click handlerem.

Enter nebo Space musí ovládat zaměřený prvek. Tab prochází ovládacími prvky a interaktivním obsahem v otevřeném panelu; zaměření nesmí vstupovat do zavřeného obsahu. Otevření nebo zavření panelu normálně ponechá zaměření na jeho ovládacím prvku. Navigace šipkami mezi nadpisy je volitelná, ale pokud je implementována, nesmí nahrazovat běžné chování Tab.

Udržujte všechny popisky ve stromu přístupnosti a všechny odpovědi ve zdrojovém HTML. Vizuálně zavřený panel může používat nativní chování odhalení nebo podporovaný skrytý stav, ale jeho obsah musí být k dispozici po rozbalení bez druhého načítání. Sbalený stav nesmí vytvářet duplicitní obsah prostřednictvím samostatných desktopových a mobilních kopií. Testujte při 200% zvětšení, s dlouhými popisky, pouze klávesnicí, redukovaným pohybem a čtečkou obrazovky. Animujte výšku nebo rotaci ikony pouze tehdy, když lze pohyb potlačit a obsah není zpožděn.

Pravidla psaní

Popisek nese náklady interakce, proto musí dávat přesný slib. Pište 3–14 slov a obvykle ne více než 120 znaků. Použijte přímou otázku pro FAQ obsah a popisnou podstatnou frázi pro referenční obsah. Vyhněte se „Více“, „Podrobnosti“, „Přečtěte si toto“ a popiskům, které se liší pouze číslem.

Používejte 3–8 položek na skupinu. Každý panel by měl obvykle obsahovat 20–120 slov a ne více než 250. Dva krátké panely jsou přehlednější jako otevřený text; devět nebo více potřebuje seskupení, viditelnou navigaci nebo redakční konsolidaci. Udržujte popisky gramaticky paralelní a řaďte položky podle čtenářského úkolu, očekávané četnosti nebo reálné posloupnosti kategorií – nikoli abecedně, pokud není vyhledávání skutečně abecední.

Tón panelu je přímý, samostatný a faktický. Uveďte odpověď v první větě, protože čtenář již zaplatil náklady na interakci. Definujte jakýkoli nezbytný termín v rámci panelu nebo ve viditelném textu bezprostředně před skupinou. Nezačínejte vaty typu „Je třeba zvážit několik věcí.“

Nikdy nedávejte pouze do akordeonu:

• přímou odpověď stránky nebo jedinečnou hodnotovou nabídku;
• bezpečnostní varování, kontraindikace, právní povinnosti nebo nevratné důsledky;
• cenu, dostupnost, materiálová omezení produktu nebo požadované nákupní podmínky;
• uspořádané kroky, předpoklady nebo kontrolu dokončení;
• důkazy nezbytné k podpoře okolního tvrzení;
• primární srovnání nebo rozhodovací matici;
• formuláře, platební prvky, souhlas nebo hlavní výzvu k akci na stránce;
• další akordeon, záložky nebo karusel.

Kompaktní seznam, malá tabulka, inline odkaz nebo doprovodný obrázek jsou přijatelné, pokud plně patří k jedné volitelné položce a zůstávají použitelné na mobilu. Pokud panel potřebuje vlastní obsah nebo více než jednu úroveň nadpisů, povýšte jej na viditelnou sekci nebo samostatnou stránku.

Typy příspěvků, které jej používají

Pole postTypes v frontmatter je zdrojem této matice použití. Uvedení znamená, že prvek je k dispozici za uvedené podmínky, nikoli povinný na každé stránce daného typu.

Kontrolní seznam QA

• Viditelná přímá odpověď se objevuje před akordeonem.
• Každá položka je volitelný referenční obsah, nikoli informace, které potřebují všichni čtenáři.
• Skupina má 3–8 položek s přesnými, paralelními popisky.
• Kompletní text každého panelu je přítomen v počátečním serverově vykresleném HTML.
• Žádná odpověď nezávisí na síťovém požadavku spouštěném kliknutím nebo vkládání pouze na straně klienta.
• Nativní details/summary nebo skutečná tlačítka poskytují správné klávesové chování.
• Vlastní ovládací prvky vystavují aria-expanded, aria-controls, unikátní ID a přidružený popisek panelu.
• Zaměření je viditelné, zůstává předvídatelné po přepnutí a nemůže vstoupit do zavřeného panelu.
• Dlouhé popisky se obtékají bez oříznutí, překrývání nebo skrývání indikátoru stavu.
• Rozvržení funguje při 200% zvětšení a na úzkém výřezu bez horizontálního rolování.
• Animace respektuje preference redukovaného pohybu a nikdy nezpožďuje přístup k obsahu.
• Jednotlivé fragmentové odkazy, pokud jsou podporovány, otevírají a zobrazují správný panel.
• Strukturovaná data jsou založena na významu obsahu, nikoli na vzhledu akordeonu.
• Záznamy FAQPage, pokud jsou vydány, se přesně shodují s viditelným textem otázky a odpovědi.
• Není přítomen žádný vnořený akordeon, sousední sada záložek, opakovaná mobilní kopie nebo hlavní CTA.
• Stránka stále komunikuje svou primární odpověď, když je každý panel zavřený.

Často kladené otázky

Frontmatter ukládá kanonické záznamy FAQ pro tuto stránku. Jejich odpovědi posilují hranici implementace: obsah může být vizuálně sbalen, ale zůstává přítomen, přístupný a sekundární vůči viditelné odpovědi.