Acordeon: Reguli și Exemple de Dezvăluire Progresivă

Un acordeon este un set grupat de comenzi etichetate de dezvăluire care permite cititorului să afișeze sau să colapseze conținut suport în același loc. Folosește-l pentru detalii de referință opționale, nu pentru răspunsul principal al paginii.

Această pereche redată demonstrează dezvăluirea progresivă: etichetele rămân scanabile, un panou este deschis și ambele răspunsuri sunt prezente în HTML-ul paginii, indiferent dacă vizitatorul interacționează sau nu.

De ce contează acest element

Dezvăluirea progresivă înseamnă afișarea informațiilor necesare pentru decizia curentă, păstrând în același timp detaliile mai profunde sau mai puțin frecvente disponibile la cerere. Ajută atunci când o pagină deservește cititori cu niveluri diferite de cunoștințe. Un client care revine poate sări peste notele de implementare; un utilizator începător le poate deschide. Controlul reduce densitatea vizuală fără a șterge conținut sau a forța fiecare cititor să treacă prin fiecare excepție.

aceeași comoditate poate deveni ascundere. Un cititor care caută un răspuns direct, ajunge pe pagină și vede opt etichete închise trebuie să ghicească care panou conține răspunsul și să efectueze o acțiune suplimentară. Pe mobil, deschiderea și închiderea repetată mută și conținutul în fereastra de vizualizare. Așadar, acordeonul își merită locul doar atunci când majoritatea cititorilor își pot îndeplini sarcina principală fără a deschide fiecare panou.

Extractibilitatea automată adaugă un test mai strict. Extractibilitatea este capacitatea motoarelor de căutare, sistemelor de răspuns AI, analizoarelor și instrumentelor de asistență de a primi textul și de a păstra relația acestuia cu eticheta sa. Fiecare răspuns trebuie să fie prezent în Modelul Obiect al Documentului (DOM) inițial redat pe server — reprezentarea structurată a paginii în browser. CSS poate colapsa vizual un panou prezent; JavaScript nu trebuie să preia sau să fabrice răspunsul doar după un clic. Un crawler poate să nu dea niciodată clic, să execute codul clientului sau să aștepte o cerere secundară.

Urmează regulile de redactare a elementelor înainte de a folosi acest model. Dacă scopul conținutului se potrivește cu un element tipizat mai specific, acel element are prioritate. Un acordeon poate conține conținut suport permis, dar nu trebuie să redenumească sau să aplatizeze un avertisment, o comparație, o definiție sau o secvență de pași doar pentru a face pagina mai scurtă.

Când să îl folosești

Folosește un acordeon atunci când toate cele patru condiții sunt îndeplinite:

1. Cititorul poate anticipa conținutul panoului după etichetă.
2. Conținutul este util pentru un subset de cititori, nu necesar pentru toată lumea.
3. Tot conținutul panoului este livrat în HTML-ul inițial și rămâne accesibil fără un dispozitiv de indicare.
4. Colapsarea îmbunătățește semnificativ scanarea pe fereastra de vizualizare așteptată.

Candidați buni includ detalii opționale de compatibilitate, ramuri rare de erori, definiții suport, clauze secundare de politică, excepții de livrare și răspunsuri de referință grupate. Un acordeon poate funcționa și pentru o colecție mare de întrebări frecvente atunci când fiecare întrebare rămâne vizibilă și fiecare răspuns este autonom.

Aproapele-ratări expun cea mai frecventă utilizare greșită:

• O pagină scurtă cu două secțiuni scurte: titlurile și paragrafele vizibile se scanează mai repede decât două comenzi.
• Un articol lung făcut să pară mai scurt: colapsarea a zece secțiuni substanțiale reduce înălțimea percepută, dar crește interacțiunea și ascunde amploarea paginii.
• Informații principale despre produs: prețul, disponibilitatea, limitările materiale, termenii de anulare și specificațiile de bază influențează decizia și nu trebuie să depindă de expandare.
• O procedură secvențială: pașii necesită ordine și context. Un panou închis poate face cititorii să sară peste o condiție prealabilă sau să execute pașii în dezordine.
• O comparație: cititorii au nevoie de vizibilitate simultană pe aceleași criterii. Panourile separate forțează compararea bazată pe memorie.
• Un avertisment de siguranță sau o calificare legală: consecința omiterii este mai mare decât beneficiul vizual al ascunderii.
• Un substitut de navigare: un acordeon nu este un cuprins. Acesta dezvăluie conținut în aceeași locație, în loc să mute cititorul către secțiuni stabile ale paginii.

Când ești nesigur, publică conținutul vizibil. Derularea suplimentară este de obicei recuperabilă; un răspuns ratat, o constrângere nedezvăluită sau un nod DOM indisponibil nu este.

Unde să îl plasezi

Plasează acordeonul după ce pagina a livrat răspunsul direct și suficiente explicații vizibile pentru ca cititorul să înțeleagă ce conține grupul. Introdu-l cu un H2 și o frază de domeniu. Grupul se comportă apoi ca un strat de referință suplimentar în cadrul acelei secțiuni.

Reguli exacte de poziționare:

• Pune-l după explicația vizibilă pe care o califică, niciodată între o afirmație și dovada care susține acea afirmație.
• Păstrează-l în cadrul secțiunii părinte al cărei subiect etichetează fiecare element. Dacă etichetele au sens doar cu un titlu lipsă, grupul este deplasat.
• Plasează un acordeon de detalii de produs după valoarea de bază, contextul de preț și condițiile de achiziție; plasează ramurile de depanare după diagnosticul comun și prima verificare sigură.
• Păstrează un acordeon de întrebări frecvente de închidere după concluzia principală și înainte de acțiunea următoare finală, cu condiția să răspundă la întrebări reziduale, nu repetate.
• Oferă grupului o ancoră de secțiune stabilă atunci când cititorii pot trimite linkuri către el. Linkurile individuale către panouri sunt opționale, dar dacă sunt furnizate, trebuie să deschidă și să focalizeze elementul corect.

Un acordeon nu poate sta direct lângă file, un al doilea acordeon sau un tabel dens de comparație. Modelele de interacțiune adiacente obligă cititorii să aleagă un mecanism înainte de a putea alege conținut. Nu poate întrerupe pași ordonați, nu poate separa un avertisment de consecința sa și nu poate sta între prețul unui produs și condițiile care guvernează acel preț. Nu plasa un banner promoțional în interiorul grupului sau imediat după fiecare panou; promovarea concurează cu sarcina de referință și face expandarea să pară o capcană de vânzare.

Anatomie

Anatomia etichetată conține șapte părți:

1. Titlul grupului: denumește subiectul comun în ierarhia documentului înconjurător.
2. Eticheta elementului: anticipează conținutul specific, fără etichete vagi precum „Află mai mult”.
3. Comanda de dezvăluire: un summary nativ sau un button care primește focalizarea de la tastatură și comută un panou.
4. Indicatorul de stare: comunică vizual deschis sau închis, în timp ce starea programatică este expusă prin semantică nativă sau aria-expanded.
5. Panoul: conține răspunsul sau detaliul de referință și rămâne în DOM-ul inițial.
6. Relația de comandă: semantica nativă <details>/<summary> sau aria-controls plus ID-uri corespunzătoare asociază fiecare comandă cu exact un panou.
7. Granita elementului: spațierea, bordura și gruparea DOM împiedică o etichetă să pară că controlează răspunsul vecin.

Chevronul vizibil este decorativ. Ascunde-l de tehnologia de asistență, deoarece starea expandată oferă deja semnificația. Rotirea singură nu poate comunica starea; semantica comenzii trebuie să facă acest lucru.

Exemple de design

Fiecare variantă folosește aceleași câmpuri și aceeași regulă de prezență în DOM. Alege varianta în funcție de sarcina de citire, nu de decorare.

Grup standard cu deschidere unică

Deschiderea unui element închide elementul deschis anterior. Folosește această variantă când panourile sunt alternative și cititorii au nevoie de obicei de unul singur odată, cum ar fi simptomele de depanare mutual exclusive.

Grup de referință cu deschidere multiplă

Cititorii pot păstra mai multe panouri deschise. Folosește această variantă când aceștia pot compara sau combina detalii suplimentare, cum ar fi tipurile de fișiere suportate și permisiunile contului. Dacă compararea simultană este sarcina principală, folosește un tabel vizibil în schimb.

Orientare cu deschidere implicită

Deschide primul element sau cel mai frecvent la încărcarea inițială atunci când demonstrează modelul de conținut și oferă o orientare utilă. Nu deschide niciodată mai mult de un element doar pentru a umple spațiu.

Variantă compactă de întrebări frecvente

Folosește etichete sub formă de întrebări și răspunsuri concise și independente. Interacțiunea nu justifică prin ea însăși datele structurate; schema depinde de tipul de conținut și de înregistrările vizibile exacte.

Stare de stres cu conținut lung

Un panou cu mai mult de două paragrafe scurte semnalează că materialul ar putea merita o secțiune vizibilă. Varianta de stres există pentru testarea împachetării, linkurilor, listelor, focalizării și fluxului responsive, nu ca țintă editorială normală.

Parametri

Contractul separă comportamentul grupului de conținutul elementelor, astfel încât fiecare platformă să poată păstra aceleași etichete, stări și relații.

Primul titlu părinte se mapează la heading. Primul titlu al fiecărui element imbricat se mapează la label, iar tot ce urmează după acesta se mapează la content-ul acelui element. Aceasta este o mapare explicită de elemente imbricate, consistentă cu precedența de bază și regulile corpului. open=true setează doar prezentarea inițială; nu schimbă importanța conținutului. Când linkable=true, navigarea la un fragment de element trebuie să îl expandeze, să mute focalizarea previzibil și să lase titlul vizibil sub orice antet fix.

Sintaxă și exemple de cod

Toate cele trei notații reprezintă un grup canonic. Ele pot reda clase de împachetare diferite, dar trebuie să păstreze conținutul în HTML-ul inițial, ordinea sursei, numele accesibile și starea.

Directivă Markdown portabilă

:::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.
::
:::

Shortcode Hugo

{{< 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 >}}

Aceasta este specificația adaptorului Hugo. Un repozitoriu nu o satisface prin adăugarea de clase la titluri arbitrare; are nevoie de un renderer care produce HTML nativ de dezvăluire sau o relație echivalentă buton-panou.

Bloc WordPress

<!-- 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 -->

Blocul WordPress înregistrat stochează câmpurile canonice, în loc să se bazeze pe un grup vizual de blocuri Details fără legătură. Redarea pe server trebuie să emită fiecare răspuns înainte de interacțiune.

Exemple

Exemplu bun

Detalii de ștergere a contului apare după o explicație vizibilă a ceea ce face ștergerea și un avertisment vizibil că este ireversibilă. Cele trei etichete sunt „Ce se întâmplă cu exporturile programate?”, „Cât timp rămâne disponibilă o arhivă solicitată?” și „Poate un alt administrator să anuleze cererea?” Fiecare panou conține o ramură opțională, toate răspunsurile sunt în HTML, iar focalizarea tastaturii este vizibilă.

Acest exemplu funcționează deoarece consecința principală și acțiunea necesară rămân vizibile. Acordeonul conține întrebări secundare care se aplică diferiților cititori, iar fiecare etichetă permite cititorului să anticipeze dacă merită să o deschidă.

Exemplu rău

Alege planul tău conține panouri închise etichetate „Începător”, „Echipă” și „Enterprise”. Prețul, limitele de utilizare, termenul contractual, condițiile de anulare și disponibilitatea sunt în interiorul panourilor. Doar un plan poate fi deschis odată.

Acest exemplu eșuează deoarece criteriile de cumpărare necesită vizibilitate side-by-side. Cititorul trebuie să deschidă panourile în mod repetat și să își amintească informații, în timp ce un extractor neinteractiv poate să nu preia prețurile încărcate prin JavaScript. Înlocuiește-l cu un tabel vizibil de prețuri sau specificații și rezervă dezvăluirea pentru detalii opționale, cum ar fi formatele de factură sau regulile de eligibilitate neobișnuite.

Marcarea schemei și accesibilitatea

Acordeonul nu are un tip Schema.org dedicat. Interacțiunea nu alimentează date structurate doar prin existența sa. Dacă înregistrările sale sunt întrebări și răspunsuri autentice, contractul de conținut FAQ poate alimenta FAQPage; dacă grupul conține detalii de produs, politici sau note de depanare, folosește doar schema justificată de pagină și conținut. Textul vizibil și orice reprezentare structurată trebuie să se potrivească.

Preferă <details> și <summary> native pentru dezvăluiri simple, deoarece browserul oferă operare prin tastatură și semantică de stare. Acolo unde designul sau comportamentul de deschidere unică necesită o implementare personalizată, fiecare comandă trebuie să fie un button, să expună aria-expanded="true" sau "false", să facă referire la panoul său cu aria-controls și să aibă un ID unic la care panoul poate face referire cu aria-labelledby. Nu plasa comanda pe un div cu un handler de clic.

Enter sau Spațiu trebuie să opereze comanda focalizată. Tab se deplasează prin comenzi și conținut interactiv în panoul deschis; focalizarea nu trebuie să intre în conținutul închis. Deschiderea sau închiderea unui panou lasă în mod normal focalizarea pe comanda sa. Navigarea cu săgeți între titluri este opțională, dar dacă este implementată, nu trebuie să înlocuiască comportamentul normal Tab.

Păstrează toate etichetele în arborele de accesibilitate și toate răspunsurile în HTML-ul sursă. Un panou închis vizual poate folosi comportamentul nativ de dezvăluire sau o stare ascunsă suportată, dar conținutul său trebuie să devină disponibil la expandare fără o a doua încărcare. Starea colapsată nu trebuie să cauzeze conținut duplicat prin copii separate pentru desktop și mobil. Testează la 200% zoom, cu etichete lungi, doar tastatură, mișcare redusă și un cititor de ecran. Animează înălțimea sau rotația pictogramei doar atunci când mișcarea poate fi suprimată și conținutul nu este întârziat.

Reguli de redactare

Eticheta suportă costul interacțiunii, așa că trebuie să facă o promisiune precisă. Scrie 3–14 cuvinte și, de obicei, nu mai mult de 120 de caractere. Folosește o întrebare directă pentru conținut de tip întrebări frecvente și o frază nominală descriptivă pentru conținut de referință. Evită „Mai mult”, „Detalii”, „Citește aceasta” și etichetele care diferă doar printr-un număr.

Folosește 3–8 elemente per grup. Fiecare panou ar trebui să conțină în mod normal 20–120 de cuvinte și nu mai mult de 250. Două panouri scurte sunt mai clare ca proză deschisă; nouă sau mai multe au nevoie de grupare, navigare vizibilă sau consolidare editorială. Păstrează etichetele gramatical paralele și aranjează elementele după sarcina cititorului, frecvența așteptată sau o secvență reală de categorii — nu alfabetic, cu excepția cazului în care căutarea este cu adevărat alfabetică.

Tonul panourilor este direct, autonom și factual. Enunță răspunsul în prima frază, deoarece cititorul a plătit deja un cost de interacțiune. Definește orice termen necesar în interiorul panoului sau în textul vizibil imediat înaintea grupului. Nu începe cu introduceri de tipul „Există mai multe lucruri de luat în considerare.”

Nu pune niciodată acestea doar în interiorul unui acordeon:

• răspunsul direct al paginii sau propunerea unică de valoare;
• avertismente de siguranță, contraindicații, obligații legale sau consecințe ireversibile;
• preț, disponibilitate, limite materiale ale produsului sau condiții obligatorii de achiziție;
• pași ordonați, condiții prealabile sau o verificare de finalizare;
• dovezi necesare pentru a susține afirmația din jur;
• o comparație principală sau o matrice de decizie;
• formulare, comenzi de checkout, consimțământ sau principalul îndemn la acțiune al paginii;
• un alt acordeon, file sau un carusel.

O listă compactă, un tabel mic, un link inline sau o imagine suport este acceptabilă atunci când aparține în întregime unui element opțional și rămâne utilizabilă pe mobil. Dacă un panou are nevoie de propriul său cuprins sau de mai mult de un nivel de titlu, promovează-l la o secțiune vizibilă sau o pagină separată.

Tipuri de postări care îl folosesc

Matricea postTypes din frontmatter este sursa acestei matrice de utilizare. Includerea înseamnă că elementul este disponibil în condiția menționată, nu obligatoriu pe fiecare pagină de acel tip.

Lista de verificare QA

• Un răspuns direct vizibil apare înaintea acordeonului.
• Fiecare element este conținut de referință opțional, nu informații de care toți cititorii au nevoie.
• Grupul are 3–8 elemente cu etichete precise și paralele.
• Textul complet al fiecărui panou este prezent în HTML-ul inițial redat pe server.
• Niciun răspuns nu depinde de o cerere de rețea declanșată prin clic sau de o inserție exclusiv pe client.
• Elementele <details>/<summary> native sau butoane reale oferă comportament corect la tastatură.
• Comenzile personalizate expun aria-expanded, aria-controls, ID-uri unice și o etichetă de panou asociată.
• Focalizarea este vizibilă, rămâne previzibilă după comutare și nu poate intra într-un panou închis.
• Etichetele lungi se împachetează fără tăiere, suprapunere sau ascunderea indicatorului de stare.
• Layoutul funcționează la 200% zoom și pe o fereastră de vizualizare îngustă fără derulare orizontală.
• Mișcarea respectă preferințele de mișcare redusă și nu întârzie niciodată accesul la conținut.
• Linkurile individuale către fragmente, atunci când sunt suportate, deschid și dezvăluie panoul corect.
• Datele structurate se bazează pe semnificația conținutului, nu pe aspectul acordeonului.
• Înregistrările FAQPage, dacă sunt emise, corespund exact textului vizibil al întrebării și răspunsului.
• Nu există acordeon imbricat, set de file adiacent, copie mobilă repetată sau CTA principal.
• Pagina comunică în continuare răspunsul său principal atunci când fiecare panou este închis.

Întrebări frecvente

Frontmatterul stochează înregistrările canonice FAQ pentru această pagină. Răspunsurile lor întăresc limita de implementare: conținutul poate fi colapsat vizual, dar rămâne prezent, accesibil și secundar răspunsului vizibil.