Accordion: Regeln und Beispiele für progressive Offenlegung

Ein Accordion ist eine gruppierte Menge von beschrifteten Offenlegungssteuerelementen, mit denen ein Leser unterstützende Inhalte an Ort und Stelle ein- oder ausblenden kann. Verwenden Sie es für optionale Referenzdetails, nicht für die Hauptantwort der Seite.

Dieses dargestellte Paar demonstriert progressive Offenlegung: Die Beschriftungen bleiben überfliegbar, ein Bedienfeld ist geöffnet, und beide Antworten sind im HTML der Seite vorhanden, unabhängig davon, ob ein Besucher interagiert.

Warum dieses Element wichtig ist

Progressive Offenlegung bedeutet, die Informationen zu zeigen, die für die aktuelle Entscheidung benötigt werden, während tiefere oder weniger häufige Details auf Abruf verfügbar bleiben. Sie hilft, wenn eine Seite Leser mit unterschiedlichem Wissensstand bedient. Ein wiederkehrender Kunde kann über Implementierungshinweise hinwegscannen; ein Erstnutzer kann sie öffnen. Die Steuerung reduziert die visuelle Dichte, ohne Inhalte zu löschen oder jeden Leser durch jede Ausnahme zu zwingen.

Derselbe Komfort kann zur Verschleierung werden. Ein Leser, der nach einer direkten Antwort sucht, auf der Seite landet und acht geschlossene Beschriftungen sieht, muss raten, welches Bedienfeld sie enthält, und eine zusätzliche Aktion ausführen. Auf Mobilgeräten verschiebt wiederholtes Öffnen und Schließen zudem den Inhalt im Viewport. Das Accordion verdient seinen Platz daher nur, wenn die meisten Leser ihre primäre Aufgabe erledigen können, ohne jedes Bedienfeld zu öffnen.

Die maschinelle Extrahierbarkeit fügt einen strengeren Test hinzu. Extrahierbarkeit ist die Fähigkeit von Suchmaschinen, KI-Antwortsystemen, Parsern und assistiven Tools, den Text zu empfangen und seine Beziehung zu seiner Beschriftung zu bewahren. Jede Antwort muss im initialen servergerenderten Document Object Model (DOM) – der strukturierten Darstellung der Seite im Browser – vorhanden sein. CSS kann ein vorhandenes Bedienfeld visuell einklappen; JavaScript darf die Antwort nicht erst nach einem Klick abrufen oder erzeugen. Ein Crawler klickt möglicherweise nie, führt keinen Client-Code aus und wartet nicht auf eine sekundäre Anfrage.

Befolgen Sie die Element-Schreibregeln , bevor Sie dieses Muster verwenden. Wenn der Zweck des Inhalts mit einem spezifischeren typisierten Element übereinstimmt, hat dieses Element Vorrang. Ein Accordion kann zulässige unterstützende Inhalte enthalten, aber es darf keine Warnung, keinen Vergleich, keine Definition oder keine Schrittfolge umbenennen oder einebnen, nur um die Seite kürzer erscheinen zu lassen.

Wann es verwendet wird

Verwenden Sie ein Accordion, wenn alle vier Bedingungen erfüllt sind:

1. Der Leser kann den Inhalt des Bedienfelds anhand seiner Beschriftung vorhersagen.
2. Der Inhalt ist für eine Teilmenge der Leser nützlich, nicht für alle notwendig.
3. Der gesamte Bedienfeldinhalt wird im initialen HTML ausgeliefert und bleibt ohne Zeigegerät erreichbar.
4. Das Einklappen verbessert die Scanbarkeit auf dem erwarteten Viewport wesentlich.

Gute Kandidaten sind optionale Kompatibilitätsdetails, ungewöhnliche Fehlerzweige, unterstützende Definitionen, sekundäre Richtlinienklauseln, Versandausnahmen und gruppierte Referenzantworten. Ein Accordion kann auch für eine große FAQ-Sammlung funktionieren, wenn jede Frage sichtbar bleibt und jede Antwort in sich abgeschlossen ist.

Beinahe-Fehler zeigen die häufigste Fehlanwendung:

• Eine kurze Seite mit zwei knappen Abschnitten: sichtbare Überschriften und Absätze sind schneller zu überfliegen als zwei Steuerelemente.
• Ein langer Artikel, der kürzer wirken soll: zehn umfangreiche Abschnitte einzuklappen reduziert die wahrgenommene Höhe, erhöht aber die Interaktion und verdeckt den Umfang der Seite.
• Primäre Produktinformationen: Preis, Verfügbarkeit, Materialeinschränkungen, Kündigungsbedingungen und Kernspezifikationen beeinflussen die Entscheidung und dürfen nicht von einer Ausklappfunktion abhängen.
• Ein sequenzieller Ablauf: Schritte erfordern Reihenfolge und Kontext. Ein geschlossenes Bedienfeld kann dazu führen, dass Leser eine Voraussetzung überspringen oder Schritte in falscher Reihenfolge ausführen.
• Ein Vergleich: Leser benötigen gleichzeitige Sichtbarkeit über dieselben Kriterien hinweg. Separate Bedienfelder erzwingen einen vergleichenden Gedächtnisabruf.
• Ein Sicherheitshinweis oder eine rechtliche Einschränkung: Die Folge des Übersehens ist höher als der visuelle Vorteil des Versteckens.
• Ein Navigationsersatz: Ein Accordion ist kein Inhaltsverzeichnis. Es zeigt Inhalte an derselben Stelle an, anstatt zu stabilen Seitenabschnitten zu navigieren.

Wenn Sie unsicher sind, veröffentlichen Sie den Inhalt sichtbar. Zusätzliches Scrollen ist meist reparabel; eine verpasste Antwort, eine nicht offengelegte Einschränkung oder ein nicht verfügbarer DOM-Knoten hingegen nicht.

Wo es platziert wird

Platzieren Sie das Accordion, nachdem die Seite ihre direkte Antwort und genügend sichtbare Erklärung geliefert hat, damit der Leser versteht, was die Gruppe enthält. Führen Sie es mit einer H2-Überschrift und einem Satz zum Umfang ein. Die Gruppe fungiert dann als ergänzende Referenzebene innerhalb dieses Abschnitts.

Genaue Positionierungsregeln:

• Setzen Sie es nach der sichtbaren Erklärung, die es ergänzt, niemals zwischen eine Behauptung und den Nachweis, der diese Behauptung stützt.
• Halten Sie es innerhalb des übergeordneten Abschnitts, dessen Thema jedes Element beschriftet. Wenn die Beschriftungen nur ohne eine fehlende Überschrift sinnvoll sind, ist die Gruppe falsch platziert.
• Platzieren Sie ein Accordion mit Produktdetails nach dem Kernwert, Preiskontext und Kaufbedingungen; platzieren Sie Fehlerbehebungszweige nach der gemeinsamen Diagnose und dem sichersten ersten Check.
• Platzieren Sie ein abschließendes FAQ-Accordion nach der Hauptschlussfolgerung und vor der finalen nächsten Aktion, vorausgesetzt, es beantwortet verbleibende und nicht wiederholte Fragen.
• Geben Sie der Gruppe einen stabilen Abschnittsanker, wenn Leser darauf verlinken könnten. Einzellinks zu Bedienfeldern sind optional, aber falls vorhanden, müssen sie das korrekte Element öffnen und fokussieren.

Ein Accordion darf nicht direkt neben Tabs, einem zweiten Accordion oder einer dichten Vergleichstabelle stehen. Benachbarte Interaktionsmuster zwingen Leser, einen Mechanismus zu wählen, bevor sie Inhalte wählen können. Es darf keine geordneten Schritte unterbrechen, eine Warnung nicht von ihrer Konsequenz trennen und nicht zwischen einem Produktpreis und den Bedingungen, die diesen Preis regeln, stehen. Platzieren Sie kein Werbebanner innerhalb der Gruppe oder unmittelbar nach jedem Bedienfeld; Werbung konkurriert mit der Referenzaufgabe und lässt das Ausklappen wie eine Verkaufsfalle wirken.

Anatomie

Die beschriftete Anatomie besteht aus sieben Teilen:

1. Gruppenüberschrift: benennt das gemeinsame Thema in der umgebenden Dokumentenhierarchie.
2. Elementbeschriftung: sagt den spezifischen Inhalt voraus, ohne vage Bezeichnungen wie „Mehr erfahren“.
3. Offenlegungssteuerung: ein natives summary oder ein button, der den Tastaturfokus erhält und ein Bedienfeld umschaltet.
4. Zustandsanzeige: kommuniziert visuell geöffnet oder geschlossen, während der programmatische Zustand durch native Semantik oder aria-expanded offengelegt wird.
5. Bedienfeld: enthält die Antwort oder das Referenzdetail und bleibt im initialen DOM.
6. Steuerungsbeziehung: native <details>/<summary>-Semantik oder aria-controls plus passende IDs ordnen jedem Steuerelement genau ein Bedienfeld zu.
7. Elementgrenze: Abstand, Rahmen und DOM-Gruppierung verhindern, dass eine Beschriftung wie die Steuerung einer benachbarten Antwort wirkt.

Der sichtbare Pfeil ist dekorativ. Verstecken Sie ihn vor assistiven Technologien, da der erweiterte Zustand bereits die Bedeutung liefert. Eine bloße Rotation kann den Zustand nicht vermitteln; die Steuerungssemantik muss dies tun.

Designbeispiele

Jede Variante verwendet dieselben Felder und die DOM-Präsenzregel. Wählen Sie die Variante nach der Aufgabe, nicht nach der Dekoration.

Standard-Einzelöffnungsgruppe

Das Öffnen eines Elements schließt das zuvor geöffnete Element. Verwenden Sie dies, wenn Bedienfelder Alternativen sind und Leser normalerweise jeweils nur eines benötigen, wie z. B. sich gegenseitig ausschließende Fehlerbehebungssymptome.

Mehrfachöffnungs-Referenzgruppe

Leser können mehrere Bedienfelder geöffnet lassen. Verwenden Sie dies, wenn sie ergänzende Details vergleichen oder kombinieren möchten, wie z. B. unterstützte Dateitypen und Kontoberechtigungen. Wenn der gleichzeitige Vergleich die Hauptaufgabe ist, verwenden Sie stattdessen eine sichtbare Tabelle.

Standardmäßig geöffnete Ausrichtung

Öffnen Sie das erste oder häufigste Element beim initialen Laden, wenn es das Inhaltsmuster demonstriert und eine nützliche Orientierung bietet. Öffnen Sie niemals mehr als ein Element, nur um Platz zu füllen.

Kompakte FAQ-Variante

Verwenden Sie Fragebeschriftungen und präzise eigenständige Antworten. Die Interaktion rechtfertigt nicht automatisch strukturierte Daten; das Schema hängt vom Inhaltstyp und den exakten sichtbaren Einträgen ab.

Stresszustand bei langen Inhalten

Ein Bedienfeld mit mehr als zwei kurzen Absätzen signalisiert, dass das Material möglicherweise einen sichtbaren Abschnitt verdient. Die Stressvariante dient dem Testen von Umbruch, Links, Listen, Fokus und responsivem Layout, nicht als normales redaktionelles Ziel.

Parameter

Der Vertrag trennt das Gruppenverhalten vom Elementinhalt, damit jede Plattform dieselben Beschriftungen, Zustände und Beziehungen beibehalten kann.

Die erste übergeordnete Überschrift wird heading zugeordnet. Die erste Überschrift jedes verschachtelten Elements wird label zugeordnet, und alles danach wird dem content dieses Elements zugeordnet. Dies ist eine explizite Zuordnung verschachtelter Elemente, konsistent mit den Basisvorrang- und Textkörperregeln. open=true legt nur die anfängliche Darstellung fest; es ändert nicht die inhaltliche Bedeutung. Wenn linkable=true ist, muss die Navigation zu einem Elementfragment dieses erweitern, den Fokus vorhersagbar verschieben und die Überschrift sichtbar unterhalb eines etwaigen fixierten Headers belassen.

Syntax und Codebeispiele

Alle drei Notationen repräsentieren eine kanonische Gruppe. Sie können unterschiedliche Wrapper-Klassen rendern, müssen aber den Inhalt im initialen HTML, die Quellreihenfolge, die zugänglichen Namen und den Zustand beibehalten.

Portable Markdown-Direktive

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

::item{id="included-fields" open=true}
### Welche Felder sind enthalten?

Der Export enthält die Felder, die derzeit für Ihr Konto und den Berichtsumfang verfügbar sind.
::

::item{id="filter-behavior"}
### Beeinflussen Filter den Export?

Ja. Bestätigen Sie den aktiven Datumsbereich, Markt und Statusfilter vor dem Erstellen der Datei.
::
:::

Hugo-Shortcode

{{< accordion heading="Exportdetails" mode="multiple" linkable="true" >}}
{{< accordion-item id="included-fields" label="Welche Felder sind enthalten?" open="true" >}}
Der Export enthält die Felder, die derzeit für Ihr Konto und den Berichtsumfang verfügbar sind.
{{< /accordion-item >}}
{{< accordion-item id="filter-behavior" label="Beeinflussen Filter den Export?" >}}
Ja. Bestätigen Sie den aktiven Datumsbereich, Markt und Statusfilter vor dem Erstellen der Datei.
{{< /accordion-item >}}
{{< /accordion >}}

Dies ist die Hugo-Adapter-Spezifikation. Ein Repository erfüllt sie nicht, indem es beliebigen Überschriften Klassen hinzufügt; es benötigt einen Renderer, der natives Offenlegungs-HTML oder eine äquivalente Button-Panel-Beziehung erzeugt.

WordPress-Block

<!-- wp:amicited/accordion {"heading":"Exportdetails","mode":"multiple","linkable":true} -->
<!-- wp:amicited/accordion-item {"id":"included-fields","label":"Welche Felder sind enthalten?","open":true} -->
<p>Der Export enthält die Felder, die derzeit für Ihr Konto und den Berichtsumfang verfügbar sind.</p>
<!-- /wp:amicited/accordion-item -->
<!-- wp:amicited/accordion-item {"id":"filter-behavior","label":"Beeinflussen Filter den Export?"} -->
<p>Ja. Bestätigen Sie den aktiven Datumsbereich, Markt und Statusfilter vor dem Erstellen der Datei.</p>
<!-- /wp:amicited/accordion-item -->
<!-- /wp:amicited/accordion -->

Der registrierte WordPress-Block speichert die kanonischen Felder, anstatt sich auf eine visuelle Gruppe nicht zusammenhängender Details-Blöcke zu verlassen. Sein Server-Renderer muss jede Antwort vor der Interaktion ausgeben.

Beispiele

Gutes Beispiel

Details zur Kontolöschung erscheint nach einer sichtbaren Erklärung, was die Löschung bewirkt, und einer sichtbaren Warnung, dass sie unwiderruflich ist. Seine drei Beschriftungen lauten: „Was passiert mit geplanten Exporten?“, „Wie lange bleibt ein angefordertes Archiv verfügbar?“ und „Kann ein anderer Administrator den Antrag stornieren?“ Jedes Bedienfeld enthält einen optionalen Zweig, alle Antworten sind in HTML vorhanden und der Tastaturfokus ist sichtbar.

Dies funktioniert, weil die Hauptkonsequenz und die erforderliche Aktion sichtbar bleiben. Das Accordion enthält sekundäre Fragen, die für verschiedene Leser relevant sind, und jede Beschriftung lässt den Leser vorhersagen, ob sich das Öffnen lohnt.

Schlechtes Beispiel

Wählen Sie Ihren Plan enthält geschlossene Bedienfelder mit den Bezeichnungen „Starter“, „Team“ und „Enterprise“. Preis, Nutzungslimits, Vertragslaufzeit, Kündigungsbedingungen und Verfügbarkeit befinden sich in den Bedienfeldern. Es kann immer nur ein Plan geöffnet sein.

Dies ist fehlerhaft, weil Kaufkriterien eine nebeneinanderliegende Sichtbarkeit erfordern. Der Leser muss wiederholt Bedienfelder öffnen und Fakten im Gedächtnis behalten, während ein nicht interaktiver Extraktor möglicherweise clientseitig geladene Preise übersieht. Ersetzen Sie es durch eine sichtbare Preis- oder Spezifikationstabelle und reservieren Sie die Offenlegung für optionale Details wie Rechnungsformate oder ungewöhnliche Berechtigungsregeln.

Schema-Markup und Barrierefreiheit

Accordion hat keinen eigenen Schema.org-Typ. Die Interaktion speist allein durch ihre Existenz keine strukturierten Daten. Wenn es sich bei den Einträgen um echte Fragen und Antworten handelt, kann der FAQ-Inhaltsvertrag FAQPage speisen; wenn die Gruppe Produktdetails, Richtlinien oder Fehlerbehebungsnotizen enthält, verwenden Sie nur das Schema, das durch die Seite und den Inhalt gerechtfertigt ist. Sichtbarer Text und jede strukturierte Darstellung müssen übereinstimmen.

Bevorzugen Sie natives <details> und <summary> für einfache Offenlegungen, da der Browser Tastaturbedienung und Zustandssemantik bereitstellt. Wenn das Design oder das Einzelöffnungsverhalten eine benutzerdefinierte Implementierung erfordert, muss jedes Steuerelement ein button sein, aria-expanded="true" oder "false" offenlegen, sein Bedienfeld mit aria-controls referenzieren und eine eindeutige ID haben, die das Bedienfeld mit aria-labelledby referenzieren kann. Platzieren Sie das Steuerelement nicht auf einem div mit einem Click-Handler.

Eingabe oder Leertaste müssen das fokussierte Steuerelement bedienen. Tab bewegt sich durch Steuerelemente und interaktive Inhalte im geöffneten Bedienfeld; der Fokus darf nicht in geschlossene Inhalte gelangen. Das Öffnen oder Schließen eines Bedienfelds belässt den Fokus normalerweise auf seinem Steuerelement. Die Pfeiltasten-Navigation zwischen Überschriften ist optional, aber wenn implementiert, darf sie das normale Tab-Verhalten nicht ersetzen.

Halten Sie alle Beschriftungen im Barrierefreiheitsbaum und alle Antworten im Quell-HTML. Ein visuell geschlossenes Bedienfeld kann natives Offenlegungsverhalten oder einen unterstützten versteckten Zustand verwenden, aber seine Inhalte müssen beim Erweitern ohne zweiten Abruf verfügbar werden. Der eingeklappte Zustand darf keine doppelten Inhalte durch separate Desktop- und Mobile-Kopien verursachen. Testen Sie bei 200 % Zoom, mit langen Beschriftungen, nur Tastatur, reduzierter Bewegung und einem Screenreader. Animieren Sie Höhe oder Symbolrotation nur, wenn die Bewegung unterdrückt werden kann und Inhalte nicht verzögert werden.

Schreibregeln

Die Beschriftung trägt die Kosten der Interaktion, daher muss sie ein präzises Versprechen machen. Schreiben Sie 3–14 Wörter und normalerweise nicht mehr als 120 Zeichen. Verwenden Sie eine direkte Frage für FAQ-Inhalte und eine beschreibende Nominalphrase für Referenzinhalte. Vermeiden Sie „Mehr“, „Details“, „Hier lesen“ und Beschriftungen, die sich nur durch eine Nummer unterscheiden.

Verwenden Sie 3–8 Elemente pro Gruppe. Jedes Bedienfeld sollte normalerweise 20–120 Wörter und nicht mehr als 250 enthalten. Zwei kurze Bedienfelder sind als offener Text klarer; neun oder mehr benötigen eine Gruppierung, sichtbare Navigation oder redaktionelle Konsolidierung. Halten Sie Beschriftungen grammatikalisch parallel und ordnen Sie Elemente nach Leseraufgabe, erwarteter Häufigkeit oder einer realen Kategorienreihenfolge – nicht alphabetisch, es sei denn, das Nachschlagen ist tatsächlich alphabetisch.

Der Ton des Bedienfelds ist direkt, in sich abgeschlossen und sachlich. Geben Sie die Antwort im ersten Satz, da der Leser bereits Interaktionskosten gezahlt hat. Definieren Sie jeden notwendigen Begriff innerhalb des Bedienfelds oder im sichtbaren Text unmittelbar vor der Gruppe. Beginnen Sie nicht mit einleitenden Floskeln wie „Es gibt mehrere Dinge zu bedenken.“

Setzen Sie diese Inhalte niemals nur innerhalb eines Accordions:

• die direkte Antwort oder das einzigartige Wertversprechen der Seite;
• Sicherheitswarnungen, Kontraindikationen, rechtliche Verpflichtungen oder irreversible Konsequenzen;
• Preis, Verfügbarkeit, materielle Produktgrenzen oder erforderliche Kaufbedingungen;
• geordnete Schritte, Voraussetzungen oder eine Abschlussprüfung;
• Nachweise, die zur Untermauerung der umgebenden Behauptung erforderlich sind;
• ein primärer Vergleich oder eine Entscheidungsmatrix;
• Formulare, Checkout-Steuerelemente, Einwilligungen oder der Hauptaufruf zum Handeln der Seite;
• ein weiteres Accordion, Tabs oder ein Karussell.

Eine kompakte Liste, kleine Tabelle, ein Inline-Link oder ein unterstützendes Bild ist akzeptabel, wenn es vollständig zu einem optionalen Element gehört und auf Mobilgeräten nutzbar bleibt. Wenn ein Bedienfeld ein eigenes Inhaltsverzeichnis oder mehr als eine Überschriftenebene benötigt, fördern Sie es in einen sichtbaren Abschnitt oder eine separate Seite.

Beitragstypen, die es verwenden

Das postTypes-Frontmatter-Array ist die Quelle dieser Nutzungsmatrix. Die Aufnahme bedeutet, dass das Element unter der angegebenen Bedingung verfügbar ist, nicht obligatorisch auf jeder Seite dieses Typs.

QA-Checkliste

• Eine sichtbare direkte Antwort erscheint vor dem Accordion.
• Jedes Element ist optionaler Referenzinhalt, keine Informationen, die alle Leser benötigen.
• Die Gruppe hat 3–8 Elemente mit präzisen, parallelen Beschriftungen.
• Der vollständige Text jedes Bedienfelds ist im initialen servergerenderten HTML vorhanden.
• Keine Antwort hängt von einer klickausgelösten Netzwerkanfrage oder einer rein clientseitigen Einfügung ab.
• Natives details/summary oder echte Schaltflächen bieten korrektes Tastaturverhalten.
• Benutzerdefinierte Steuerelemente legen aria-expanded, aria-controls, eindeutige IDs und eine zugehörige Bedienfeldbeschriftung offen.
• Der Fokus ist sichtbar, bleibt nach dem Umschalten vorhersagbar und kann nicht in ein geschlossenes Bedienfeld gelangen.
• Lange Beschriftungen umbrechen ohne Beschneidung, Überlappung oder Verdeckung der Zustandsanzeige.
• Das Layout funktioniert bei 200 % Zoom und auf einem schmalen Viewport ohne horizontales Scrollen.
• Bewegungen respektieren Präferenzen für reduzierte Bewegung und verzögern niemals den Zugriff auf Inhalte.
• Einzelne Fragmentlinks, falls unterstützt, öffnen und zeigen das korrekte Bedienfeld an.
• Strukturierte Daten basieren auf der inhaltlichen Bedeutung, nicht auf dem Erscheinungsbild des Accordions.
• FAQPage-Einträge, falls ausgegeben, stimmen exakt mit dem sichtbaren Frage- und Antworttext überein.
• Kein verschachteltes Accordion, keine benachbarte Tab-Gruppe, keine wiederholte Mobile-Kopie und kein Haupt-CTA ist vorhanden.
• Die Seite vermittelt ihre primäre Antwort auch dann, wenn jedes Bedienfeld geschlossen ist.

Häufig gestellte Fragen

Das Frontmatter speichert die kanonischen FAQ-Einträge für diese Seite. Ihre Antworten bekräftigen die Implementierungsgrenze: Inhalte können visuell eingeklappt sein, bleiben aber vorhanden, zugänglich und sekundär zur sichtbaren Antwort.