Akordeón: Pravidlá progresívneho zobrazovania a príklady

Akordeón je zoskupená sada označených ovládačov zobrazovania, ktorá čitateľovi umožňuje odhaliť alebo skryť podporný obsah na mieste. Použite ho pre voliteľné referenčné podrobnosti, nie pre hlavnú odpoveď stránky.

Táto vykreslená dvojica demonštruje progresívne zobrazovanie: štítky zostávajú skenovateľné, jeden panel je otvorený a obe odpovede sú prítomné v HTML stránky bez ohľadu na to, či návštevník interaguje.

Prečo na tomto prvku záleží

Progresívne zobrazovanie znamená zobraziť informácie potrebné pre aktuálne rozhodnutie, pričom hlbšie alebo menej bežné podrobnosti sú k dispozícii na požiadanie. Pomáha, keď stránka slúži čitateľom s rôznou úrovňou vedomostí. Vracajúci sa zákazník môže preskenovať implementačné poznámky; nový používateľ ich môže otvoriť. Ovládanie znižuje vizuálnu hustotu bez mazania obsahu alebo nútenia každého čitateľa prejsť všetkými výnimkami.

Rovnaké pohodlie sa môže stať skrývaním. Čitateľ, ktorý hľadá priamu odpoveď, pristane na stránke a uvidí osem zatvorených štítkov, musí hádať, ktorý panel ju obsahuje, a vykonať ďalšiu akciu. Na mobile opakované otváranie a zatváranie tiež posúva obsah v rámci zobrazenej oblasti. Akordeón si preto zaslúži svoje miesto len vtedy, keď väčšina čitateľov dokáže dokončiť svoju primárnu úlohu bez otvárania každého panelu.

Strojová extrahovateľnosť pridáva prísnejší test. Extrahovateľnosť je schopnosť vyhľadávačov, systémov AI odpovedí, parserov a asistenčných nástrojov prijať text a zachovať jeho vzťah k štítku. Každá odpoveď musí byť prítomná v počiatočnom serverovo vykreslenom Document Object Model (DOM), štruktúrovanej reprezentácii stránky v prehliadači. CSS môže vizuálne skryť prítomný panel; JavaScript nesmie načítať alebo vyrobiť odpoveď až po kliknutí. Prehliadačový robot nemusí nikdy kliknúť, spustiť klientsky kód alebo čakať na sekundárnu požiadavku.

Pred použitím tohto vzoru postupujte podľa pravidiel písania prvkov . Ak účel obsahu zodpovedá špecifickejšiemu typovanému prvku, tento prvok má prednosť. Akordeón môže obsahovať povolený podporný obsah, ale nesmie premenovať alebo sploštiť varovanie, porovnanie, definíciu alebo postupnosť krokov len preto, aby bola stránka kratšia.

Kedy ho použiť

Použite akordeón, keď sú splnené všetky štyri podmienky:

1. Čitateľ dokáže predpovedať obsah panelu z jeho štítku.
2. Obsah je užitočný pre podmnožinu čitateľov, nie nevyhnutný pre všetkých.
3. Celý obsah panelu je doručený v počiatočnom HTML a zostáva dosiahnuteľný bez ukazovacieho zariadenia.
4. Skrytie významne zlepšuje skenovateľnosť na očakávanom viewporte.

Dobrými kandidátmi sú voliteľné podrobnosti o kompatibilite, neobvyklé vetvy chýb, podporné definície, sekundárne klauzuly zásad, výnimky pri doručovaní a zoskupené referenčné odpovede. Akordeón môže fungovať aj pre veľkú kolekciu FAQ, ak každá otázka zostáva viditeľná a každá odpoveď je samostatná.

Takmer správne prípady odhaľujú najbežnejšie zneužitie:

• Krátka stránka s dvoma stručnými sekciami: viditeľné nadpisy a odseky sú rýchlejšie na skenovanie ako dva ovládače.
• Dlhý článok urobený na kratšie: skrytie desiatich rozsiahlych sekcií znižuje vnímanú výšku, ale zvyšuje interakciu a skrýva rozsah stránky.
• Primárne informácie o produkte: cena, dostupnosť, materiálne obmedzenia, podmienky zrušenia a kľúčové špecifikácie ovplyvňujú rozhodnutie a nesmú byť závislé od rozbalenia.
• Sekvenčný postup: kroky vyžadujú poradie a kontext. Zatvorený panel môže spôsobiť, že čitateľ preskočí predpoklad alebo vykoná kroky mimo poradia.
• Porovnanie: čitatelia potrebujú súčasnú viditeľnosť rovnakých kritérií. Samostatné panely nútia k porovnávaniu z pamäti.
• Bezpečnostné varovanie alebo právna kvalifikácia: dôsledok jeho prehliadnutia je vyšší ako vizuálny prínos jeho skrytia.
• Náhrada navigácie: akordeón nie je obsah. Odhaľuje obsah na rovnakom mieste, namiesto presunu na stabilné sekcie stránky.

V prípade neistoty zverejnite obsah viditeľne. Extra rolovanie je zvyčajne napraviteľné; zmeškaná odpoveď, nezverejnené obmedzenie alebo nedostupný DOM uzol nie.

Kam ho umiestniť

Umiestnite akordeón až potom, čo stránka poskytla svoju priamu odpoveď a dostatok viditeľného vysvetlenia, aby čitateľ pochopil, čo skupina obsahuje. Uveďte ho nadpisom H2 a jednou vetou o rozsahu. Skupina sa potom správa ako doplnková referenčná vrstva v rámci tejto sekcie.

Presné pravidlá umiestnenia:

• Umiestnite ho po viditeľnom vysvetlení, ktoré kvalifikuje, nikdy nie medzi tvrdenie a dôkaz podporujúci toto tvrdenie.
• Udržujte ho v rámci nadradenej sekcie, ktorej téma pomenúva každú položku. Ak štítky dávajú zmysel len s chýbajúcim nadpisom, skupina je nesprávne umiestnená.
• Umiestnite akordeón s produktovými detailmi po hlavnej hodnote, cenovom kontexte a nákupných podmienkach; umiestnite vetvy riešenia problémov po spoločnej diagnóze a najbezpečnejšej prvej kontrole.
• Umiestnite záverečný akordeón FAQ po hlavnom závere a pred konečným ďalším krokom, za predpokladu, že odpovedá na zvyškové, nie opakované otázky.
• Dajte skupine stabilnú kotvu sekcie, keď na ňu čitatelia môžu odkazovať. Odkazy na jednotlivé panely sú voliteľné, ale ak sú poskytnuté, musia otvoriť a zaostriť správnu položku.

Akordeón nesmie byť umiestnený priamo vedľa záložiek, druhého akordeónu alebo hustej porovnávacej tabuľky. Susedné interakčné vzory nútia čitateľov vybrať si mechanizmus skôr, ako si môžu vybrať obsah. Nesmie prerušovať usporiadané kroky, oddeľovať varovanie od jeho dôsledku ani stáť medzi cenou produktu a podmienkami, ktoré túto cenu upravujú. Neumiestňujte propagačný banner dovnútra skupiny alebo hneď za každý panel; propagácia súťaží s referenčnou úlohou a spôsobuje, že rozbalenie pôsobí ako predajná pasca.

Anatómia

Označená anatómia obsahuje sedem častí:

1. Nadpis skupiny: pomenúva spoločnú tému v okolitej hierarchii dokumentu.
2. Štítok položky: predpovedá konkrétny obsah bez vágnych štítkov ako „Dozvedieť sa viac".
3. Ovládač zobrazovania: natívny summary alebo button, ktorý prijíma klávesnicové zameranie a prepína jeden panel.
4. Indikátor stavu: komunikuje otvorený alebo zatvorený stav vizuálne, zatiaľ čo programový stav je sprístupnený prostredníctvom natívnej sémantiky alebo aria-expanded.
5. Panel: obsahuje odpoveď alebo referenčný detail a zostáva v počiatočnom DOM.
6. Vzťah ovládača: natívna sémantika <details>/<summary> alebo aria-controls plus zodpovedajúce ID priraďujú každý ovládač presne k jednému panelu.
7. Hranica položky: medzery, okraj a DOM zoskupenie zabezpečujú, že jeden štítok nevyzerá, že ovláda susednú odpoveď.

Viditeľná šípka je dekoratívna. Skryte ju pred asistenčnými technológiami, pretože rozbalený stav už poskytuje význam. Samotná rotácia nemôže komunikovať stav; musí to robiť sémantika ovládača.

Príklady dizajnu

Každý variant používa rovnaké polia a pravidlo prítomnosti v DOM. Vyberte variant podľa úlohy čítania, nie podľa dekorácie.

Štandardná skupina s jedným otvoreným

Otvorenie jednej položky zatvorí predtým otvorenú položku. Použite to, keď sú panely alternatívami a čitatelia bežne potrebujú vždy len jeden, napríklad vzájomne sa vylučujúce príznaky pri riešení problémov.

Viacnásobne otvorená referenčná skupina

Čitatelia môžu nechať otvorených niekoľko panelov. Použite to, keď môžu porovnávať alebo kombinovať doplňujúce podrobnosti, napríklad podporované typy súborov a povolenia účtu. Ak je súčasné porovnanie primárnou úlohou, použite namiesto toho viditeľnú tabuľku.

Predvolene otvorená orientácia

Otvorte prvú alebo najbežnejšiu položku pri počiatočnom načítaní, keď demonštruje vzor obsahu a poskytuje užitočnú orientáciu. Nikdy neotvárajte viac ako jednu položku len na vyplnenie priestoru.

Kompaktný FAQ variant

Použite otázkové štítky a stručné samostatné odpovede. Samotná interakcia neodôvodňuje štruktúrované dáta; schéma závisí od typu obsahu a presných viditeľných záznamov.

Záťažový stav s dlhým obsahom

Panel s viac ako dvoma krátkymi odsekmi signalizuje, že materiál si možno zaslúži viditeľnú sekciu. Záťažový variant existuje na testovanie zalamovania, odkazov, zoznamov, zamerania a responzívneho toku, nie ako normálny redakčný cieľ.

Parametre

Kontrakt oddeľuje správanie skupiny od obsahu položky, aby každá platforma mohla zachovať rovnaké štítky, stavy a vzťahy.

Prvý nadradený nadpis sa mapuje na heading. Prvý nadpis každej vnorenej položky sa mapuje na label a všetko za ním na content tejto položky. Toto je explicitné mapovanie vnorených položiek, konzistentné so základnou precedenciou a pravidlami tela. open=true nastavuje len počiatočnú prezentáciu; nemení dôležitosť obsahu. Keď je linkable=true, navigácia na fragment položky ju musí rozbaliť, presunúť zameranie predvídateľne a ponechať nadpis viditeľný pod prípadným sticky headerom.

Syntax a príklady kódu

Všetky tri zápisy predstavujú jednu kanonickú skupinu. Môžu vykresliť rôzne wrapper triedy, ale musia zachovať obsah v počiatočnom HTML, zdrojové poradie, prístupné názvy a stav.

Prenosná Markdown direktíva

:::accordion{mode=multiple linkable=true}
## Export details

::item{id="included-fields" open=true}
### Which fields are included?

The export contains the fields currently available to your account and report scope.
::

::item{id="filter-behavior"}
### Do filters affect the export?

Yes. Confirm the active date range, market, and status filters before creating the file.
::
:::

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 špecifikácia Hugo adaptéra. Repozitár ju nespĺňa pridaním tried k ľubovoľným nadpisom; potrebuje renderer, ktorý vytvára natívne HTML na zobrazovanie alebo ekvivalentný vzťah tlačidla 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 ukladá kanonické polia namiesto spoliehania sa na vizuálnu skupinu nesúvisiacich Details blokov. Jeho serverový render musí odoslať každú odpoveď pred interakciou.

Príklady

Dobrý príklad

Podrobnosti o odstránení účtu sa nachádza po viditeľnom vysvetlení toho, čo odstránenie robí, a viditeľnom varovaní, že je nezvratné. Jeho tri štítky sú „Čo sa stane s naplánovanými exportmi?", „Ako dlho zostáva požadovaný archív dostupný?" a „Môže iný administrátor zrušiť požiadavku?" Každý panel obsahuje jednu voliteľnú vetvu, všetky odpovede sú v HTML a klávesnicové zameranie je viditeľné.

Funguje to, pretože hlavný dôsledok a požadovaná akcia zostávajú viditeľné. Akordeón obsahuje sekundárne otázky, ktoré sa týkajú rôznych čitateľov, a každý štítok umožňuje čitateľovi predpovedať, či sa oplatí ho otvoriť.

Zlý príklad

Vyberte si svoj plán obsahuje zatvorené panely označené „Štartér", „Tím" a „Enterprise". Cena, limity používania, zmluvné obdobie, podmienky zrušenia a dostupnosť sú vo vnútri panelov. Naraz môže byť otvorený len jeden plán.

Toto zlyháva, pretože nákupné kritériá vyžadujú vedľajšiu viditeľnosť. Čitateľ musí opakovane otvárať panely a pamätať si fakty, zatiaľ čo neinteraktívny extraktor môže prehliadnuť ceny načítané klientsky. Nahraďte ho viditeľnou cenovou alebo špecifikačnou tabuľkou a vyhradte zobrazovanie pre voliteľné podrobnosti, ako sú formáty faktúr alebo neobvyklé pravidlá oprávnenosti.

Schéma markup a prístupnosť

Akordeón nemá vyhradený typ Schema.org. Samotná interakcia neposkytuje žiadne štruktúrované dáta len svojou existenciou. Ak sú jeho záznamy skutočné otázky a odpovede, kontrakt FAQ obsahu môže poskytovať FAQPage; ak skupina obsahuje podrobnosti o produkte, zásady alebo poznámky k riešeniu problémov, použite len schému odôvodnenú stránkou a obsahom. Viditeľný text a akékoľvek štruktúrované vyjadrenie sa musia zhodovať.

Uprednostňujte natívne <details> a <summary> pre priame zobrazovanie, pretože prehliadač poskytuje klávesnicovú obsluhu a stavovú sémantiku. Tam, kde dizajn alebo správanie s jedným otvoreným vyžaduje vlastnú implementáciu, každý ovládač musí byť button, vystaviť aria-expanded="true" alebo "false", odkazovať na svoj panel pomocou aria-controls a mať jedinečné ID, na ktoré panel môže odkazovať pomocou aria-labelledby. Neumiestňujte ovládač na div s click handlerom.

Enter alebo Medzerník musí ovládať zaostrený ovládač. Tab presúva zameranie cez ovládače a interaktívny obsah v otvorenom paneli; zameranie nesmie vstúpiť do zatvoreného obsahu. Otvorenie alebo zatvorenie panelu normálne ponecháva zameranie na jeho ovládači. Navigácia šípkami medzi nadpismi je voliteľná, ale ak je implementovaná, nesmie nahradiť normálne správanie Tabu.

Udržujte všetky štítky v strome prístupnosti a všetky odpovede v zdrojovom HTML. Vizuálne zatvorený panel môže používať natívne správanie zobrazovania alebo podporovaný skrytý stav, ale jeho obsah musí byť k dispozícii po rozbalení bez druhého načítania. Skrytý stav nesmie spôsobiť duplicitný obsah prostredníctvom samostatných desktopových a mobilných kópií. Testujte pri 200% priblížení, s dlhými štítkami, len klávesnicou, zníženým pohybom a čítačkou obrazovky. Animujte výšku alebo rotáciu ikony len vtedy, keď možno pohyb potlačiť a obsah nie je oneskorený.

Pravidlá písania

Štítok nesie náklady interakcie, preto musí dávať presný sľub. Píšte 3–14 slov a zvyčajne nie viac ako 120 znakov. Použite priamu otázku pre FAQ obsah a opisnú podstatnú frázu pre referenčný obsah. Vyhýbajte sa „Viac", „Podrobnosti", „Prečítajte si toto" a štítkom, ktoré sa líšia len číslom.

Použite 3–8 položiek na skupinu. Každý panel by mal normálne obsahovať 20–120 slov a nie viac ako 250. Dva krátke panely sú prehľadnejšie ako otvorený text; deväť alebo viac potrebuje zoskupenie, viditeľnú navigáciu alebo redakčnú konsolidáciu. Udržujte štítky gramaticky paralelné a usporiadajte položky podľa úlohy čitateľa, očakávanej frekvencie alebo reálneho poradia kategórií – nie abecedne, pokiaľ vyhľadávanie nie je skutočne abecedné.

Tón panelu je priamy, samostatný a faktický. Uveďte odpoveď v prvej vete, pretože čitateľ už zaplatil náklady na interakciu. Definujte potrebný pojem v rámci panelu alebo vo viditeľnom texte bezprostredne pred skupinou. Nezačínajte zbytočnými úvodmi ako „Existuje niekoľko vecí, ktoré treba zvážiť."

Nikdy neumiestňujte nasledovné len dovnútra akordeónu:

• priamu odpoveď stránky alebo jedinečnú hodnotovú ponuku;
• bezpečnostné varovania, kontraindikácie, zákonné povinnosti alebo nezvratné dôsledky;
• cenu, dostupnosť, materiálne obmedzenia produktu alebo požadované nákupné podmienky;
• usporiadané kroky, predpoklady alebo kontrolu dokončenia;
• dôkazy potrebné na podporu okolitého tvrdenia;
• primárne porovnanie alebo rozhodovaciu maticu;
• formuláre, pokladničné ovládacie prvky, súhlas alebo hlavnú výzvu na akciu stránky;
• ďalší akordeón, záložky alebo karusel.

Kompaktný zoznam, malá tabuľka, inline odkaz alebo podporný obrázok sú prijateľné, keď patria výhradne k jednej voliteľnej položke a zostávajú použiteľné na mobile. Ak panel potrebuje vlastný obsah alebo viac ako jednu úroveň nadpisov, presuňte ho do viditeľnej sekcie alebo na samostatnú stránku.

Typy príspevkov, ktoré ho používajú

Pole postTypes v frontmatter je zdrojom tejto matice použitia. Zahrnutie znamená, že prvok je k dispozícii za uvedenej podmienky, nie je povinný na každej stránke daného typu.

QA kontrolný zoznam

• Viditeľná priama odpoveď sa nachádza pred akordeónom.
• Každá položka je voliteľný referenčný obsah, nie informácia, ktorú potrebujú všetci čitatelia.
• Skupina má 3–8 položiek s presnými, paralelnými štítkami.
• Kompletný text každého panelu je prítomný v počiatočnom serverovo vykreslenom HTML.
• Žiadna odpoveď nie je závislá od sieťovej požiadavky spustenej kliknutím alebo vloženia iba na strane klienta.
• Natívne details/summary alebo skutočné tlačidlá poskytujú správne klávesnicové správanie.
• Vlastné ovládače vystavujú aria-expanded, aria-controls, jedinečné ID a súvisiaci štítok panelu.
• Zameranie je viditeľné, zostáva predvídateľné po prepnutí a nemôže vstúpiť do zatvoreného panelu.
• Dlhé štítky sa zalamujú bez orezania, prekrývania alebo skrývania indikátora stavu.
• Rozloženie funguje pri 200% priblížení a na úzkom viewporte bez horizontálneho posúvania.
• Pohyb rešpektuje preferencie zníženého pohybu a nikdy neoneskoruje prístup k obsahu.
• Jednotlivé fragmentové odkazy, ak sú podporované, otvárajú a zobrazujú správny panel.
• Štruktúrované dáta sú založené na význame obsahu, nie na vzhľade akordeónu.
• Záznamy FAQPage, ak sú emitované, sa presne zhodujú s viditeľným textom otázky a odpovede.
• Nie je prítomný žiadny vnorený akordeón, susedná sada záložiek, opakovaná mobilná kópia ani hlavná CTA.
• Stránka stále komunikuje svoju primárnu odpoveď, keď je každý panel zatvorený.

Často kladené otázky

Frontmatter ukladá kanonické FAQ záznamy pre túto stránku. Ich odpovede posilňujú hranicu implementácie: obsah môže byť vizuálne skrytý, ale zostáva prítomný, prístupný a sekundárny voči viditeľnej odpovedi.