FigmaOpenCode

Accordion

Synonyme: Expansion Panel, Collapse, Akkordeon Ähnliche Komponenten: Tabs

Kurzbeschreibung

Accordion fasst Informationen in Überschriften zusammen und ermöglicht das Ein- und Ausblenden der zugehörigen Inhalte.

Beispiele

• EFA Theme
• KERN Theme

Loading...

<div className="component-col">
    <KernHeading _level="3" _label="Accordions einzeln"></KernHeading>
     <div>
      <KernAccordion _label="Header" _level="1">
       Text
      </KernAccordion>
      <KernAccordion _label="Header" _level="1">
       Text
      </KernAccordion>
      <KernAccordion _label="Header" _level="1">
       Text
      </KernAccordion>
     </div>
    </div>

    <div className="component-col">
     <KernHeading _level="3" _label="Accordion Group"></KernHeading>
     Folgt...
    </div>

Beschreibung

Accordion ist eine UI-Komponente, die es Nutzenden ermöglicht, durch Klicken oder Tippen auf eine Accordion-Überschrift zusätzlichen Inhalt ein- oder auszublenden. Der Titel fasst die im Accordion enthaltenen Informationen zusammen und bietet einen allgemeinen Überblick, ohne dass sich die Nutzenden sofort mit den Details befassen müssen.

Accordion enthält ein grafisches Symbol, welches dessen Zustand anzeigt und angibt, ob es erweitert oder reduziert ist. Diese visuelle Hilfe trägt dazu bei, die Benutzerfreundlichkeit zu erhöhen und den Nutzenden schnell zu zeigen, welche Bereiche ein- oder ausgeklappt sind.

Verwendungsregeln

Accordions sind eine effektive Methode, um Inhalte auf einer Seite zu strukturieren und Nutzenden die Möglichkeit zu geben, bei Bedarf auf zusätzliche Informationen zuzugreifen. Sie sind besonders nützlich, um eine kompakte und organisierte Darstellung von Inhalten zu gewährleisten, so dass der Fokus auf den wichtigsten Informationen liegt. Accordions sollten unter folgenden Bedingungen verwendet werden:

• Übersichtlichkeit und Struktur: Wenn eine Seite viele Themen enthält, bietet ein Accordion eine klare Struktur und Übersicht, indem es den Inhalt in leicht zugängliche Abschnitte unterteilt.
• Platz sparen: Besonders nützlich auf Mobilgeräten oder bei begrenztem Platz, um Seitenlängen zu reduzieren und gleichzeitig die Navigation zu erleichtern.
• Kontrolle durch Nutzende: Accordion ermöglicht den Nutzenden, selbst zu entscheiden, welche Inhalte sie lesen und welche sie überspringen möchten. Dies unterstützt die Kontrolle und Freiheit der Nutzenden, was als dritte der zehn Usability-Heuristiken für das Design von Benutzeroberflächen bezeichnet wird.

Beim Erweitern eines Accordions öffnet sich der verborgene Inhalt vertikal, wodurch andere Inhalte nach unten verschoben werden. Dies kann bei langen Inhaltsblöcken zu einer Desorientierung führen, da die Nutzenden möglicherweise den Zusammenhang zum übrigen Inhalt verlieren.

Hinweis: Accordions sind oft nicht für den Druck optimiert, was Nutzdende zwingt, jedes Accordion einzeln vor dem Drucken zu erweitern. Dies ist besonders mühsam bei langen Seiten mit vielen Accordions. Um das Drucken zu erleichtern, sollten Seiten richtig konfiguriert werden, z.B. durch eine „Alle Abschnitte erweitern“-Schaltfläche oder das automatische Erweitern von Accordions in der Druckvorschau.

Dos und Don’ts

Jedes Accordion sollte eine klare und präzise Überschrift haben, die beschreibt, welche Informationen darin enthalten sind.

Verwende keine verschachtelten Accordions bei komplexem Inhalt, da dies die Nutzenden verwirren und die Navigation erschweren kann.

Weitere Hinweise

• Verwende Accordions, um Inhalte zu komprimieren und die Übersichtlichkeit zu erhöhen, insbesondere auf Mobilgeräten.
• Achte darauf, Accordions nicht zu breit anzulegen, da dies die Lesbarkeit und Benutzerfreundlichkeit beeinträchtigen kann. - Ideal sind 60-90 Zeichen pro Zeile. Wähle eine konsistente Breite für ähnliche Informationen.
• Vermeide Funktionen, die Accordions automatisch minimieren, da dies die Übersichtlichkeit und Nutzbarkeit beeinträchtigen kann.
• Verwende keine Accordions, wenn die Seite nur wenig Inhalt enthält, da dies den Eindruck erwecken kann, dass die Seite größtenteils leer ist.
• Vermeide Accordions, wenn ein ununterbrochener Lesefluss erforderlich ist, da dies das Leseerlebnis stören kann.

Barrierefreiheit

• Die Steuerelemente müssen per Tastatur fokussiert und aktiviert werden können.
• Die Buttons in den Abschnittsüberschriften müssen den Zustand der Steuerelemente mit „aria-expanded“ anzeigen.
• Die einzublendenden Abschnitte müssen mit einer geeigneten Verstecktechnik verborgen werden.

Siehe auch: BFIT oder w3.org - Accordion

kern-accordion

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	3
_on	--	Gibt die EventCallback-Funktionen an.	undefined | { onClick?: EventValueOrEventCallback<Event, boolean> | undefined; }	undefined
_open	_open	If set (to true) opens/expands the element, closes if not set (or set to false).	boolean | undefined	false

---