Figma
OpenCodeAccordion
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
Einzeln
Code anzeigen
<details class="kern-accordion">
<summary class="kern-accordion__header">
<span class="kern-title">Welche Voraussetzungen muss ich erfüllen?</span>
</summary>
<section class="kern-accordion__body">
<p class="kern-body">Zur Nutzung dieses Dienstes benötigen Sie ein einfaches Servicekonto.</p>
</section>
</details>Gruppe
Code anzeigen
<div class="kern-accordion-group">
<details class="kern-accordion">
<summary class="kern-accordion__header">
<span class="kern-title">Welche Voraussetzungen muss ich erfüllen?</span>
</summary>
<section class="kern-accordion__body">
<p class="kern-body">Zur Nutzung dieses Dienstes benötigen Sie ein einfaches Servicekonto.</p>
</section>
</details>
<details class="kern-accordion">
<summary class="kern-accordion__header">
<span class="kern-title">Wie hoch sind die Kosten?</span>
</summary>
<section class="kern-accordion__body">
<p class="kern-body">
Die Online-Anmeldung kostet 31 Euro (ab 2024). Damit sparen Sie gegenüber der klassischen Anmeldung im Bezirksamt
erheblich.
</p>
</section>
</details>
<details class="kern-accordion">
<summary class="kern-accordion__header">
<span class="kern-title">Wie lange dauert der Prozess?</span>
</summary>
<section class="kern-accordion__body">
<p class="kern-body">Etwa 10 Minuten.</p>
</section>
</details>
</div>Geöffnet
Code anzeigen
<details class="kern-accordion" open>
<summary class="kern-accordion__header">
<span class="kern-title">Wie lange dauert der Prozess?</span>
</summary>
<section class="kern-accordion__body">
<p class="kern-body">Etwa 10 Minuten.</p>
</section>
</details>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 Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 3.3.2
Accordion-Header sind eindeutig beschriftet
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
Accordion-Inhalte sind programmatisch erkennbar gruppiert
WCAG 1.4.1
Accordion-Zustände werden nicht nur durch Farbe vermittelt
WCAG 1.4.6
Text im Accordion erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Accordion hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab
WCAG 2.1.1
Accordion ist vollständig per Tastatur bedienbar
WCAG 2.4.3
Die Navigationsreihenfolge im Accordion ist logisch und intuitiv
WCAG 2.4.13
Accordion hat einen sichtbaren Fokuszustand
Siehe auch: BFIT Handreichungen