Akkordeon und FAQ

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

• Das Akkordeon eignet sich, um Inhalte strukturiert und platzsparend darzustellen. Es wird besonders dann eingesetzt, wenn umfangreiche Informationen in übersichtliche Abschnitte gegliedert werden sollen, z. B. FAQs oder Frage- und Antwortfolgen zu spezifischen Themen.
• Nicht geeignet ist das Element für Inhalte, die dauerhaft und vollständig sichtbar sein sollen, wie z. B. Fließtexte ohne logische Gliederung oder zentrale Botschaften, die nicht versteckt werden dürfen.

• Überschrift des Containers (z. B. „Ich bin ein Akkordeon“)
• Akkordeon-Boxen mit jeweils einer Überschrift und einem Inhaltstext. Im Falle eines FAQ-Bereichs stellt die Überschrift die Frage und der Akkordeon-Titel die Antwort dar.

• Dieses Akkordeon-Element ist primär textbasiert.
• Falls Bilder innerhalb des Inhalts eingesetzt werden, sollten diese im Format JPG oder PNG vorliegen.
• Empfohlene Mindestbreite: 1200 px für ganzseitige Darstellungen, kleinere Bilder mindestens 600 px Breite.
• Von dem Einsatz von Bildern in Akkordeons wird generell eher abgeraten.

• Akkordeon-Überschrift: maximal 60 Zeichen (prägnant und informativ).
• Inhalt je Box: Empfehlung max. 500–700 Zeichen pro Abschnitt, damit Inhalte leicht erfassbar bleiben.

Das Akkordeon wird in einer Spalte des Rasters eingebunden. Es sollte im Content-Raster konsistent platziert werden, vorzugsweise in 1-Spalten-Raster, um eine klare Leseführung zu gewährleisten. Ein separates Raster ist nicht notwendig.

Auf mobilen Geräten werden die Boxen untereinander dargestellt. Jede Box ist einzeln auf und zu klappbar. Standardmäßig sollte nur eine Box geöffnet sein, um die Übersicht zu wahren. Überschriften und Preline werden automatisch skaliert und im Lesefluss korrekt dargestellt.

• Prägnante und beschreibende Überschriften für Container und Boxen verwenden.
• Akkordeon nur für klar gegliederte Inhalte nutzen (z. B. FAQs, Themenblöcke).
• Einheitliche Textlängen pro Box anstreben, damit die Darstellung ausgewogen wirkt.
• Preline nur einsetzen, wenn ein inhaltlicher Bezug besteht (z. B. Themenkategorie).

• Der Slider dient zur visuellen Präsentation mehrerer Themen oder Inhalte in Form von Bild-Kacheln, die unterhalb es flächigen Themenbildes mit verlinkten Kacheln angeteasert werden. Die Kacheln können mit dem Slider durchgeklickt werden. Die Link-Kacheln verwenden einen generischen Logo-Teaser. Er eignet sich besonders für Start- und Einstiegsseiten, um Besucher*innen schnell einen Überblick über mehrere Themen oder Angebote zu geben.
• Nicht geeignet ist der Slider für Inhalte, die dauerhaft sichtbar bleiben oder die für SEO und Barrierefreiheit zentral sind. Wichtigste Kernbotschaften sollten daher nicht ausschließlich im Slider platziert werden.

• Überschrift (Titel des Themas)
• Bild im vorgegebenen Format
• Links zu Unterseiten, die zum übergeordneten Thema gehören

• Erlaubte Formate: .jpg, .jpeg, .png
• Empfohlene Größe: 1504 × 846 px (16:9)
• Alle Bilder innerhalb eines Sliders müssen das gleiche Seitenverhältnis haben, um ein ruhiges Layout zu gewährleisten.
• Bilder sollen thematisch relevant und in guter Auflösung sein, keine pixeligen oder überladenen Motive.

Überschrift: maximal 60 Zeichen (prägnant und informativ)

Der Slider ist ein eigenständiges Rasterelement. Innerhalb einer Seite sollte er sparsam eingesetzt werden, um die Aufmerksamkeit nicht zu zerstreuen. Mehrere Slider auf derselben Seite sind zu vermeiden.

• Die Kacheln werden untereinander angezeigt und können angeklickt werden, um zur hinterlegten Seite zu gelangen
• Texte und Bilder werden automatisch skaliert.
• Der Link bleibt auch mobil voll anklickbar.

• Einheitliche Bildqualität und -formate verwenden.
• Kurze, prägnante Überschriften einsetzen.
• Pro Slider nicht mehr als 5–6 Kacheln einplanen, um Nutzer*innen nicht zu überfordern.
• Links regelmäßig prüfen und auf relevante Zielseiten setzen.