Accordion
Synonyme: Aufklappbereich, Aufklappmenü, Ausklapp-Liste, Ein-/Ausklapp-Komponente, Disclosure, Expand/Collapse
Beschreibung: Die Accordion-Komponente gliedert Inhalte in einzelne Abschnitte, deren Detailinformationen ein- oder ausgeblendet werden können. Sie unterstützt eine kompakte und strukturierte Darstellung größerer Informationsmengen auf begrenztem Raum. Die Nutzenden entscheiden selbst, welche Abschnitte geöffnet werden. Dadurch wird die kognitive Belastung reduziert und die Seite bleibt übersichtlich.
Beispiel
Darstellung der Komponente ohne optional gesetzte Felder. Code kann eingeblendet werden.
Das Frühjahr bringt den Übergang vom Winter zum Sommer. Die Temperaturen steigen langsam, die Tage werden länger, und die Natur erwacht aus dem Winterschlaf: Pflanzen beginnen zu blühen, Bäume treiben neue Knospen, und viele Tierarten aktivieren ihre Fortpflanzungszyklen. Typisch sind wechselhaftes Wetter mit warmen sonnigen Phasen und kühleren Regentagen.
Der Sommer ist die wärmste Jahreszeit mit längsten Tagen und kürzesten Nächten. Die Sonne steht höher am Himmel, was zu intensiverer Einstrahlung führt. Temperaturen erreichen ihre Höchstwerte, Niederschläge treten oft als kurze Gewitter statt als langanhaltender Regen auf. Es ist die Hauptsaison für Vegetation und landwirtschaftliches Wachstum.
Im Herbst nimmt die Tageslänge deutlich ab, die Temperaturen fallen allmählich. Laubbäume verlieren ihr grünes Blattwerk durch die verkürzte Photosyntheseperiode, was zu charakteristischen Braun- und Gelbtönen führt. Die Erntezeit für viele Kulturpflanzen liegt in dieser Jahreszeit. Nebel und spätere Sonnenaufgänge werden häufiger.
Die kalte Jahreszeit mit den kürzesten Tagen und längsten Nächten. Die niedrige Sonnenposition sorgt für geringe Einstrahlungsintensität. Temperaturen fallen unter den Gefrierpunkt, was in vielen Regionen Schnee und Eis ermöglicht. Pflanzen ruhen, viele Tiere halten Winterruhe oder migrieren. Die natürliche Lichtverfügbarkeit ist am geringsten.
<KolAccordion _label="Die Jahreszeiten" _open={true} ><p>Das Frühjahr bringt den Übergang vom Winter zum Sommer. Die Temperaturen steigen langsam, die Tage werden länger, und die Natur erwacht aus dem Winterschlaf: Pflanzen beginnen zu blühen, Bäume treiben neue Knospen, und viele Tierarten aktivieren ihre Fortpflanzungszyklen. Typisch sind wechselhaftes Wetter mit warmen sonnigen Phasen und kühleren Regentagen.</p><p>Der Sommer ist die wärmste Jahreszeit mit längsten Tagen und kürzesten Nächten. Die Sonne steht höher am Himmel, was zu intensiverer Einstrahlung führt. Temperaturen erreichen ihre Höchstwerte, Niederschläge treten oft als kurze Gewitter statt als langanhaltender Regen auf. Es ist die Hauptsaison für Vegetation und landwirtschaftliches Wachstum.</p><p>Im Herbst nimmt die Tageslänge deutlich ab, die Temperaturen fallen allmählich. Laubbäume verlieren ihr grünes Blattwerk durch die verkürzte Photosyntheseperiode, was zu charakteristischen Braun- und Gelbtönen führt. Die Erntezeit für viele Kulturpflanzen liegt in dieser Jahreszeit. Nebel und spätere Sonnenaufgänge werden häufiger.<p/><p>Die kalte Jahreszeit mit den kürzesten Tagen und längsten Nächten. Die niedrige Sonnenposition sorgt für geringe Einstrahlungsintensität. Temperaturen fallen unter den Gefrierpunkt, was in vielen Regionen Schnee und Eis ermöglicht. Pflanzen ruhen, viele Tiere halten Winterruhe oder migrieren. Die natürliche Lichtverfügbarkeit ist am geringsten.</p></KolAccordion>Barrierefreiheit
- Die Accordion-Header sind als interaktive Elemente umgesetzt, was die Tastatursteuerung ermöglicht, die Fokussierbarkeit gewährleistet und Screenreadern die Interaktion korrekt ankündigt.
- Die Öffnen-/Schließen-Icons können frei positioniert werden, allerdings wird empfohlen diese links auszurichten, um die Bedienbarkeit für Nutzende mit eingeschränktem Sichtfeld zu unterstützen.
- Der Zustand eines Accordions (offen/geschlossen) wird programmatisch vermittelt und ist somit auch für assistive Technologien erreichbar. Zustandsänderungen werden nicht ausschließlich über Icons oder Farben vermittelt.
- Der Fokus bleibt beim Öffnen eines Accordions im Kontext des Bedienelements.
Konkrete Designentscheidungen
| Entscheidung | Begründung |
|---|---|
| Verwendung eines Buttons für Header | Native Tastatursteuerung und Screenreader-Kompatibilität |
| aria-expanded am Header | Zustand programmatisch erkennbar |
| Panel bleibt im DOM | Screenreader verlieren keinen Kontext |
| Keine Hover-Interaktion als alleiniger Trigger | Hover ist nicht barrierefrei |
| Klare visuelle Fokusmarkierung | Tastaturnutzer benötigen Orientierung |
| Optional Mehrfachöffnung | Abhängig vom Anwendungsfall |
| Keine automatische Öffnung bei Fokus | Verhindert unerwartete Kontextwechsel |
ARIA-Struktur
Die Komponente implementiert das WAI-ARIA Accordion Pattern:
- Der Toggle-Button trägt
aria-expandedmit dem aktuellen Öffnungszustand (true/false). aria-controlsauf dem Button verweist auf die ID des Content-Bereichs.- Der Content-Bereich hat
role="region"und ist überaria-labelledbymit der Überschrift verknüpft – Screenreader-Nutzer:innen können ihn als Landmark navigieren. - Im geschlossenen Zustand wird
aria-hidden="true"auf den Content-Bereich gesetzt. Der Inhalt ist damit für Screenreader vollständig nicht erreichbar.
Links und Referenzen
Verwendung
Accordions werden eingesetzt, um:
- Inhalte zu gruppieren, die nicht zwingend gleichzeitig sichtbar sein müssen
- lange Seiten zu strukturieren
- progressive Offenlegung (progressive disclosure) umzusetzen
Typischerweise besteht ein Accordion aus:
- einem Titel (Header)
- einem zugehörigen Inhaltsbereich (Panel)
- einem Zustand (geöffnet/geschlossen)
Je nach Konfiguration kann:
- nur ein Eintrag gleichzeitig geöffnet sein oder
- mehrere Einträge parallel geöffnet sein
Accordion ist nicht geeignet,:
- wenn Inhalte zwingend gleichzeitig sichtbar sein müssen
- wenn Inhalte miteinander verglichen werden müssen
- wenn Nutzende häufig zwischen Abschnitten wechseln müssen
- um Fehlermeldungen darzustellen
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Springt zum nächsten Accordion. |
Shift+Tab | Springt zum vorherigen Accordion. |
Enter/Space | Öffnet bzw. schließt den fokussierten Accordion-Tab. |
Best Practices / Empfehlungen
- Nutzen Sie ein Accordion für ergänzende oder sekundäre Informationen, die nicht dauerhaft sichtbar sein müssen. Für wichtige primäre Inhalte (z. B. zentrale Handlungsaufforderungen oder rechtlich relevante Hinweise) sind Accordions weniger geeignet.
- Strukturieren Sie längere Inhalte in klar benannte Abschnitte und verwenden Sie prägnante Überschriften über
_label. - Verwenden Sie ein Accordion nicht als primäres Auswahl- oder Filterelement.
- Verwenden Sie mehrere Accordions mit wenig Inhalt anstatt ein einzelnes inhaltlich zu überladen.
- Verzichten Sie auf eine tiefe Verschachtelung mehrerer Accordions.
- Wählen Sie den initialen Zustand bewusst (offen/geschlossen).
Anwendungsfälle
- Gliederung längerer Dokumentations- oder Einstellungsseiten
- Strukturierung von Inhalten auf kleinen Bildschirmen mit begrenztem Platz
- Gruppierung umfangreicher Formularabschnitte
- FAQ-Bereiche
- Zusätzliche Detailinformationen, optionale Bereiche
FAQ
Welche Überschriftenebenen sind möglich?
Über _level sind die Ebenen 1 bis 6 verfügbar. Mit 0 wird die Überschriftenebene deaktiviert und als strong dargestellt. Dies ist beim KolAccordion standardmäßig voreingestellt.
Darf ein Accordion verschachtelt werden? Verschachtelungen sind möglich sollten allerdings aus Gründen der Barrierefreiheit mit Bedacht vorgenommen werden.
Wann sollte ein Accordion standardmäßig geöffnet sein?
Wenn ein Inhalt voraussichtlich direkt benötigt wird oder dies fachlich sinnvoll ist.
Konstruktion / Technik
Playground
<KolAccordion _label="Der Frühling" _open={true} >Das Frühjahr bringt den Übergang vom Winter zum Sommer. Die Temperaturen steigen langsam, die Tage werden länger, und die Natur erwacht aus dem Winterschlaf: Pflanzen beginnen zu blühen, Bäume treiben neue Knospen, und viele Tierarten aktivieren ihre Fortpflanzungszyklen. Typisch sind wechselhaftes Wetter mit warmen sonnigen Phasen und kühleren Regentagen.</KolAccordion>Funktionalitäten (mit Code)
Basisinhalt und Beschriftung
Die sichtbare Überschrift wird über _label gesetzt. Der Inhaltsbereich wird über den Slot befüllt.
<KolAccordion _label="Der Sommer" _open={true} >Der Sommer ist die wärmste Jahreszeit mit längsten Tagen und kürzesten Nächten. Die Sonne steht höher am Himmel, was zu intensiverer Einstrahlung führt. Temperaturen erreichen ihre Höchstwerte, Niederschläge treten oft als kurze Gewitter statt als langanhaltender Regen auf. Es ist die Hauptsaison für Vegetation und landwirtschaftliches Wachstum.</KolAccordion>Überschriftenstruktur
Die Überschriftenebene wird über _level gesteuert.
<KolAccordion _label="Der Herbst" _level={2} >Im Herbst nimmt die Tageslänge deutlich ab, die Temperaturen fallen allmählich. Laubbäume verlieren ihr grünes Blattwerk durch die verkürzte Photosyntheseperiode, was zu charakteristischen Braun- und Gelbtönen führt. Die Erntezeit für viele Kulturpflanzen liegt in dieser Jahreszeit. Nebel und spätere Sonnenaufgänge werden häufiger.</KolAccordion>Zustandssteuerung
Das initiale Öffnen erfolgt über _open. Für den nicht interaktiven Zustand steht _disabled zur Verfügung.
<KolAccordion _label="Der Winter" _open={true} >Die kalte Jahreszeit mit den kürzesten Tagen und längsten Nächten. Die niedrige Sonnenposition sorgt für geringe Einstrahlungsintensität. Temperaturen fallen unter den Gefrierpunkt, was in vielen Regionen Schnee und Eis ermöglicht. Pflanzen ruhen, viele Tiere halten Winterruhe oder migrieren. Die natürliche Lichtverfügbarkeit ist am geringsten.</KolAccordion>Event-Anbindung
Für Event-Handling und Callbacks siehe
Beispiel für das Click-Event laut Dokumentation:
| Event | Auslöser | Value |
|---|---|---|
click | Element wird angeklickt | - |
API
Overview
The Accordion component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.
Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_level | _level | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 0 |
_on | -- | Gibt die EventCallback-Funktionen an. | undefined | { onClick?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; } | undefined |
_open | _open | Opens/expands the element when truthy, closes/collapses when falsy. | boolean | undefined | false |
Methods
click
click() => Promise<void>
Triggers a click on the trigger button of the first section.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Allows arbitrary HTML to be inserted into the content area of the accordion. |