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.
Die Komponente orientiert sich am WAI-ARIA Accordion Pattern: Der Kopfbereich ist ein natives button-Element – bei gesetztem _level innerhalb einer Überschrift –, der Inhaltsbereich nimmt beliebiges HTML über den Slot auf. Jede KolAccordion steuert genau einen Abschnitt; mehrere Abschnitte entstehen durch mehrere Accordions untereinander.
Anwendungsfälle:
- Gliederung längerer Dokumentations- oder Einstellungsseiten
- Strukturierung von Inhalten auf kleinen Bildschirmen mit begrenztem Platz
- Gruppierung umfangreicher Formularabschnitte oder Konfigurationsseiten mit mehreren Eingabegruppen
- FAQ-Bereiche mit mehreren unabhängig öffnenbaren Fragen
- Ergänzende oder optionale Detailinformationen, die Nutzende bei Bedarf selbst einblenden
Beispiel
Darstellung mehrerer Accordions ohne optional gesetzte Felder. Code kann eingeblendet werden.
<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> <br/> <KolAccordion _label="Der Sommer" >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> <br/> <KolAccordion _label="Der Herbst" >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> <br/> <KolAccordion _label="Der Winter" >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> Barrierefreiheit
- Der Kopfbereich ist per Tastatur erreichbar und wird von Screenreadern als Schaltfläche mit ihrem aktuellen Zustand (erweitert/reduziert) angekündigt. Zustandsänderungen werden damit nicht ausschließlich über Icons oder Farben vermittelt.
- Der geöffnete Inhaltsbereich ist für Screenreader als eigener Bereich navigierbar, der nach der Beschriftung des Kopfbereichs benannt ist.
- Im geschlossenen Zustand ist der Inhalt weder für Screenreader noch per
Taberreichbar. - Der Fokus bleibt beim Öffnen und Schließen auf dem Kopfbereich.
- Das Öffnen und Schließen berücksichtigt automatisch die Systemeinstellung „Bewegung reduzieren" (
prefers-reduced-motion): Ist sie aktiviert, läuft die Animation nicht ab. Die einbindende Anwendung muss dafür nichts konfigurieren.
Konkrete Designentscheidungen
| Entscheidung | Begründung |
|---|---|
Verwendung eines nativen button-Elements für den Kopfbereich | Der Kopfbereich nutzt bewusst ein natives, fokussierbares button-Element statt eines Custom-Elements und profitiert dadurch von dessen etablierter Tastatursteuerung und Screenreader-Unterstützung. |
| Mehrere Accordions öffnen und schließen sich unabhängig voneinander | Eine gebündelte Variante, bei der immer nur ein Abschnitt gleichzeitig geöffnet sein kann, wurde bewusst nicht in die Komponente eingebaut. Ob mehrere Abschnitte parallel geöffnet sein dürfen, hängt vom Anwendungsfall ab und liegt in der Verantwortung der einbindenden Anwendung. |
| Öffnen erfolgt ausschließlich durch aktives Bedienen des Kopfbereichs | Der Fokus allein (z. B. beim Durchtabben) löst kein automatisches Öffnen aus. Das verhindert unerwartete Kontextwechsel für Tastatur- und Screenreader-Nutzende. |
Links und Referenzen
Tastatursteuerung
Die Tastaturbedienung wird durch den Browser und das Betriebssystem bestimmt. Daher können sich einzelne Tastaturfunktionen je nach Browser und Endgerät unterscheiden.
Typischerweise werden folgende Funktionen unterstützt:
| Taste | Funktion |
|---|---|
Tab | Springt zum nächsten fokussierbaren Element – dem nächsten Kopfbereich oder einem Element im geöffneten Inhalt. |
Shift+Tab | Springt zum vorherigen fokussierbaren Element. |
Enter/Space | Öffnet bzw. schließt das fokussierte Accordion. |
Die im WAI-ARIA Accordion Pattern optional vorgesehenen Tasten zum Wechsel zwischen den Kopfbereichen (Pfeil-Tasten (oben/unten), Pos1, Ende) werden nicht unterstützt.
FAQ
Wann ist ein Accordion nicht geeignet?
Ein 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
Verwenden Sie ein Accordion nicht als primäres Auswahl- oder Filterelement.
Können mehrere Accordions gleichzeitig geöffnet sein?
Mehrere untereinander angeordnete Accordions öffnen und schließen sich unabhängig voneinander, es können also mehrere Einträge parallel geöffnet sein. Soll immer nur ein Eintrag gleichzeitig geöffnet sein, muss die einbindende Anwendung die übrigen Accordions beim toggle-Event über _open schließen – KoliBri bietet dafür keine eigene Gruppierung.
Welche Überschriftenebenen sind möglich?
Mit den Werten 1 bis 6 wird der Kopfbereich als Überschrift der entsprechenden Ebene ausgegeben und erscheint damit in der Überschriftennavigation von Screenreadern. Mit 0 (Standardwert) wird keine Überschrift ausgegeben, sondern fett dargestellter Text. Wählen Sie eine Überschriftenebene, die zur Überschriftenstruktur der Seite passt.
Darf ein Accordion verschachtelt werden?
Verschachtelungen sind möglich, sollten allerdings aus Gründen der Barrierefreiheit mit Bedacht vorgenommen werden. Verzichten Sie auf tiefe Verschachtelung mehrerer Accordions.
Wann sollte ein Accordion standardmäßig geöffnet sein?
Wenn ein Inhalt voraussichtlich direkt benötigt wird oder dies fachlich sinnvoll ist. Wählen Sie den initialen Zustand bewusst (offen/geschlossen). Nutzen Sie dabei aussagekräftige Labels und ergänzende Hinweise, um den Zweck klar zu machen.
Wie positioniere ich die Öffnen-/Schließen-Icons?
Die Icons können im Theme frei positioniert werden, allerdings wird empfohlen, diese links auszurichten, um die Bedienbarkeit für Nutzende mit eingeschränktem Sichtfeld zu unterstützen.
Wie reagiere ich programmatisch auf das Öffnen/Schließen eines Accordions?
Nutzen Sie das toggle-Event, das bei jedem Öffnen oder Schließen ausgelöst wird und den neuen Zustand (true = geöffnet) übermittelt. Sie können auch _open setzen, um den Zustand zu steuern oder abzufragen.
Funktionalitäten
Basisinhalt und Beschriftung
Die sichtbare Überschrift wird über _label gesetzt (Pflichtfeld). Der Inhaltsbereich wird über den Slot mit beliebigem HTML 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 des Kopfbereichs wird über _level gesteuert. Mit den Werten 1 bis 6 wird der Kopfbereich als Überschrift der entsprechenden Ebene ausgegeben und erscheint damit in der Überschriftennavigation von Screenreadern. Mit 0 (Standardwert) wird keine Überschrift ausgegeben, sondern fett dargestellter Text.
<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; beim Bedienen des Kopfbereichs wird _open von der Komponente aktualisiert. Mit _disabled wird der Kopfbereich deaktiviert: Er ist dann nicht fokussierbar und das Accordion lässt sich nicht mehr öffnen oder schließen.
<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>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>API
Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Kopfbereich wird angeklickt bzw. bedient | Neuer Öffnungszustand (true = geöffnet) als boolean |
toggle | Kopfbereich wird angeklickt bzw. bedient | Neuer Öffnungszustand (true = geöffnet) als boolean |
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(options?: KolFocusOptions) => Promise<void>
Sets focus on the internal element.
Parameters
| Name | Type | Description |
|---|---|---|
options | KolFocusOptions | undefined |
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Allows arbitrary HTML to be inserted into the content area of the accordion. |