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.
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.
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 |
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,
_label) - einem zugehörigen Inhaltsbereich (Panel, Slot)
- einem Zustand (geöffnet/geschlossen,
_open)
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.
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
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.
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. - Wählen Sie über
_leveleine Überschriftenebene, die zur Überschriftenstruktur der Seite passt. - 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).
- Die Öffnen-/Schließen-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.
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?
Siehe Überschriftenstruktur.
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.
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
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>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. |