Darstellung und Verhalten

Das Akkordeon fasst Inhalte geschlossen in mehreren Balken zusammen. Nutzende können die einzelnen Akkordeon-Elemente manuell öffnen und schliessen. Akkordeons kommen immer in Mehrfachanwendung zum Einsatz (kein einzelnes Akkordeon-Element).

• Die Akkordeon-Elemente sind initial geschlossen.
• Der Titelbereich eines Akkordeons-Elements beinhaltet den Titel und das Plus-Icon im geschlossenen bzw. das Minus-Icon im geöffneten Zustand.
• Beim Klick wird der Inhalt innerhalb des Elements angezeigt.
• Der Inhalt ist bündig mit dem Akkordeon-Titel gesetzt.
• Mehrere Akkordeon-Elemente können gleichzeitig geöffnet sein.

Verwendung

Akkordeons verbergen Inhalte vor Nutzenden. Sie sind interaktiv und erfordern einen Einsatz: Um den Inhalt zu sehen, müssen Nutzende den Titel lesen, verstehen und anklicken.

Nicht jede und jeder wird Akkordeons bemerken oder verstehen, wie sie funktionieren. Und sind alle Abschnitte relevant, unterbricht das Auf- und Zuklappen den Lesefluss. Wir verwenden Akkordeons darum nicht für Inhalte, die für alle Nutzenden relevant sind.

Wann ein Akkordeon sinnvoll sein kann

• Wir wollen eine Übersicht über mehrere, zusammenhängende Abschnitte des Inhalts bieten.
• Es ist hilfreich, diese Abschnitte nach Bedarf ein- und auszublenden.
• Wir wollen Inhalte anzeigen, die nicht immer oder nicht für alle relevant sind, etwa Details oder erläuternde Beispiele.
• Akkordeons funktionieren grundsätzlich am besten für einfache Inhalte und Links.

Wann wir kein Akkordeon verwenden

• Kernbotschaften oder wichtige Informationen.
• Unwichtige Inhalte. Sie gehören nicht auf die Seite.

Darstellung von Abläufen und Prozessen

Wenn die Abfolge von Inhalten wichtig ist, stellen wir diese im Zweifelsfall nicht in Akkordeons, sondern im Fliesstext dar. Dort zeigen wir die Struktur mit Überschriften auf.

Für Prozessschritte sind Akkordeons möglicherweise sinnvoll, wenn es Nutzende gibt, die bei gewissen Schritten ein- oder aussteigen.