EMN FAQ & Accordion Block

Beschreibung

Entwickelt von Engelhardt Medien, einer Agentur für digitales Webdesign und Grafik mit Sitz in Nürnberg, Deutschland.

Warum dieses Plugin?

• Schema.org FAQPage-JSON-LD wird automatisch generiert und ist direkt an den Modus des Blocks gekoppelt – ein separates Schema-Plugin ist nicht erforderlich. Dieses strukturierte Markup hilft KI-Systemen und Assistenten (ChatGPT, Perplexity, Gemini und anderen), deine Inhalte zu verstehen und hervorzuheben, und gibt Suchmaschinen einen klaren, standardbasierten Kontext zu deiner Seite – zunehmend wichtig, da immer mehr Traffic über KI-gestützte Suche und Antworten generiert wird. (Hinweis: Google hat das visuelle FAQ-Rich-Result-Snippet in der Google-Suche im Mai 2026 eingestellt; die zugrunde liegenden strukturierten Daten sind weiterhin gültig, standardisiert und werden an anderer Stelle verwendet, z. B. von KI-Assistenten.)
• FAQ- und Akkordeon-Modus können unabhängig voneinander pro Block-Instanz umgeschaltet werden.
• Schnell und leichtgewichtig – keine externen Bibliotheken und Assets werden nur auf Seiten geladen, die den Block tatsächlich enthalten.
• Vollständig barrierefrei, entsprechend WCAG 2.1 Level AA für dieses Interaktionsmuster – besonders relevant für Websites, die in der Europäischen Union betrieben werden, wo der European Accessibility Act seit Juni 2025 von vielen Unternehmen die Einhaltung von Standards für digitale Barrierefreiheit verlangt.
• WPML-kompatibel; für Übersetzungen vorbereitet, die über translate.wordpress.org bereitgestellt werden.
• Funktioniert mit der eigenen Farbpalette und den Verlaufs-Presets deines aktiven Themes.
• Frei anpassbar – jeder visuelle Aspekt kann in der Seitenleiste des Block-Editors angepasst werden, ohne dass du Code anfassen musst.

EMN FAQ & Accordion Block fügt einen nativen Gutenberg-Block zum Erstellen auf- und zuklappbarer Frage-/Antwort-Bereiche hinzu. Er funktioniert in zwei Modi, die pro Block-Instanz umgeschaltet werden können (der Akkordeon-Modus ist die Standardeinstellung für neue Blöcke):

• Akkordeon-Modus (Standard) – dieselbe auf- und zuklappbare Benutzeroberfläche ohne strukturierte Daten, für allgemeine Inhalte (Dienstleistungen, Funktionen, Schritte usw.).
• FAQ-Modus – gibt automatisch gültige strukturierte Schema.org-Daten im Format FAQPage als JSON-LD zusammen mit den sichtbaren Inhalten aus. Diese strukturierten Daten helfen KI-Systemen und Assistenten (wie ChatGPT, Perplexity und Gemini), deine Inhalte zu verstehen und bei der Beantwortung entsprechender Fragen hervorzuheben, und stellen Suchmaschinen einen klaren, standardbasierten Kontext für die Seite bereit (Hinweis: Google hat das visuelle FAQ-Rich-Result-Snippet in der Google-Suche im Mai 2026 eingestellt).

Standardmäßig schließt das Öffnen eines Elements automatisch jedes andere geöffnete Element im selben Block – dies kann pro Block (unter dem Bereich „Typ“) deaktiviert werden, damit mehrere Elemente gleichzeitig geöffnet bleiben können. Das erste Element kann außerdem so eingestellt werden, dass es beim Laden der Seite bereits aufgeklappt ist, ebenfalls pro Block (auch im Bereich „Typ“).

Möchten Sie jemanden direkt auf eine bestimmte Frage verweisen, anstatt ihn durch die gesamte Liste scrollen zu lassen? Geben Sie dieser Frage einen kurzen Linknamen (im Feld „HTML-Anker“ unter „Erweitert“ in den Blockeinstellungen), und das Plugin zeigt Ihnen sofort direkt darunter den fertigen, teilbaren Link an. Wer diesen Link öffnet, gelangt direkt zu genau dieser Frage, die bereits aufgeklappt und in den sichtbaren Bereich gescrollt ist – praktisch für E-Mails, den Chat-Support oder um von einer anderen Seite direkt auf die Antwort zu verlinken.

Design-Einstellungen

Jeder visuelle Aspekt kann direkt in der Seitenleiste des Block-Editors angepasst werden, ohne dass du Code anfassen musst:

• Einfarbige oder zweifarbige Farbverläufe als Hintergrund für Frage und Antwort, einschließlich separater Hover-Farben/-Verläufe.
• Rahmenfarbe, Rahmenfarbe beim Hover, Rahmenbreite und Rahmenradius.
• Unabhängiges Padding für oben/rechts/unten/links sowohl für die Frage als auch für die Antwort sowie unabhängiges Icon-Padding für oben/rechts/unten/links – unter Verwendung der nativen WordPress-Abstandssteuerung „Dimensionen“ (einschließlich der eigenen Abstands-Presets deines Themes, sofern definiert), mit denselben Einheitenauswahlen wie in WordPress selbst (px, %, em, rem, vw, vh).
• Eine gemeinsame Rahmenfarbe und -breite für alle vier Seiten. Der Rahmenradius kann pro Ecke (mithilfe der nativen Eckenradius-Steuerung von WordPress) oder für alle Ecken gleichzeitig festgelegt werden.
• Alle oben genannten nativen WordPress-Steuerelemente greifen automatisch und unsichtbar auf die jeweils entsprechende, einfachere Steuerung dieses Plugins zurück, wenn eine bestimmte native Komponente in einer bestimmten WordPress-Version nicht verfügbar ist.
• Padding- und Rahmeneinstellungen verfügen jeweils über ein kompaktes „⋮“-Menü zum Zurücksetzen auf die Standardeinstellungen.
• Normale/Hover-Farbpaare (Fragehintergrund, Fragentext, Symbolfarbe, Symbolhintergrund) sind in einem kompakten Zwei-Wege-Umschalter zusammengefasst, anstatt untereinander aufgelistet zu werden.
• Auswahl des Symbols: Plus/Minus, Chevron oder Pfeil – frei pro Block auswählbar (Chevron und Pfeil drehen sich, wenn ein Element geöffnet wird; das Plus wird zu einem Minus).
• Symbolfarbe, Hintergrundfarbe des Symbols (mit separaten Hover-Farben), Symbolgröße, Hintergrundradius des Symbols, Innenabstand des Symbols und der Abstand zwischen dem Symbol und dem Fragentext.
• Icon-Position: links (Standard) oder rechts neben dem Fragentext.
• Auswahl des HTML-Elements für die Frage (div, p oder h2–h6), sodass es an die Überschriftenstruktur deines Dokuments angepasst werden kann – mit einer optionalen benutzerdefinierten Schriftgrößenüberschreibung, die unabhängig für Desktop, Tablet und Mobilgerät festgelegt werden kann (jeder Breakpoint, der leer bleibt, fällt automatisch auf den nächstgrößeren Breakpoint zurück und letztendlich auf die eigene Standardschriftgröße deines Themes für dieses Element).
• Jedes Farb- oder Verlaufsfeld kann auch die eigene Farbpalette deines aktiven Themes verwenden (z. B. Astra oder jedes andere Theme, das editor-color-palette / editor-gradient-presets registriert), genau wie die WordPress-Core-Blöcke.
• Der Antwortbereich akzeptiert jeden Block, der in deiner WordPress-Installation verfügbar ist – nicht nur Text: Absätze, Listen, Bilder, Überschriften, Zitate, Tabellen, Galerien, Spalten, Buttons, Einbettungen und alle Blöcke, die von anderen Plugins/Add-ons hinzugefügt werden.

Leichtgewichtig & schnell

Entwickelt ohne externe Bibliotheken oder Frameworks: ein kleines, dependency-freies Editor-Skript und ein kompaktes Vanilla-JS-Frontend-Skript. Auf Seiten, die den Block nicht enthalten, wird nichts geladen, und die gesamte Ausgabe besteht aus einfachem HTML/CSS – keine umfangreiche Laufzeitumgebung, kein unnötiger Ballast und praktisch keine Auswirkungen auf die Ladezeit der Seite. Das gesamte CSS und JavaScript wird bereits minifiziert ausgeliefert und standardmäßig in minifizierter Form bereitgestellt, wodurch die an Besucher gesendete Datenmenge so gering wie möglich gehalten wird (die ursprünglichen, lesbaren Quelldateien sind aus Gründen der Transparenz ebenfalls enthalten und werden automatisch stattdessen verwendet, wenn SCRIPT_DEBUG aktiviert ist).

Bilder, Iframes (z. B. Video-Einbettungen) und selbst gehostete Videos, die sich innerhalb einer eingeklappten Antwort befinden, werden automatisch mit nativen Lazy-Loading-Attributen (loading="lazy" / preload="none") ausgeliefert – zusätzlich zum eigenen automatischen Lazy-Loading von WordPress –, sodass Medien innerhalb von FAQ-/Akkordeon-Elementen, die beim Laden nicht sichtbar sind, das Laden der Seite nicht blockieren. Bereits vorhandene loading/decoding/preload-Attribute (deine eigenen oder die eines anderen Plugins) werden immer unverändert beibehalten. Medien innerhalb eines Elements, das standardmäßig geöffnet sein soll, werden bewusst ausgeschlossen, sodass sie wie alle anderen Inhalte „above the fold“ sofort geladen werden.

Barrierefreiheit

Die Interaktion zum Auf- und Zuklappen ist so gestaltet, dass sie vollständig per Tastatur bedienbar und Screenreader-freundlich ist, entsprechend WCAG 2.1 Level AA für diese Art von Widget:

• Jede Frage ist über die Tab-Taste erreichbar und kann mit Enter oder der Leertaste bedient werden, zusätzlich zu Maus/Touch.
• Im gesamten Block werden korrekte ARIA-Semantiken verwendet: role="button" und aria-expanded für die Frage, aria-controls zur Verknüpfung mit der zugehörigen Antwort sowie role="region" mit aria-hidden und aria-labelledby (das auf die eigene Frage verweist) für die Antwort – alles direkt in das serverseitig gerenderte HTML geschrieben und nicht nachträglich durch JavaScript hinzugefügt.
• Dekorative Symbole (Plus/Minus, Chevron, Pfeil) werden mithilfe von aria-hidden vor unterstützenden Technologien verborgen, da der geöffnete/geschlossene Zustand bereits über aria-expanded ausgegeben wird.
• Für Tastaturbenutzer wird ein sichtbarer Fokus-Indikator angezeigt.
• Wenn ein Element standardmäßig geöffnet sein soll, wird es bereits aufgeklappt im initialen HTML ausgegeben (mit dem korrekten aria-expanded/aria-hidden-Status und fokussierbaren Inhalten) – ohne darauf angewiesen zu sein, dass JavaScript zuerst ausgeführt wird.

Kein Plugin kann eine Seite ehrlich als „100 % barrierefrei“ zertifizieren, da die Barrierefreiheit in der Praxis auch von den Inhalten und Farben abhängt, die du auswählst. Was dieses Plugin selbst garantiert, ist das Interaktionsmuster: korrekte Rollen/Zustände, vollständige Bedienbarkeit per Tastatur, eine sichtbare Fokusanzeige und Screenreader-freundliches Markup, entsprechend WCAG 2.1 Level AA für diese Art von Disclosure-Widget. Der endgültige Farbkontrast (Text gegenüber Hintergrund, Symbol gegenüber seinem Hintergrund) hängt von den Farben ab, die du in den Block-Einstellungen auswählst – wähle ausreichend kontrastreiche Farben (ein Verhältnis von mindestens 4,5:1 für normalen Text), damit das Ergebnis WCAG AA-konform bleibt.

Sicherheit

Alle Styling-Attribute werden bei jedem Seitenaufruf auf dem Server erneut validiert und neu aufgebaut – über strikte Allow-Lists für Farben, Verläufe, numerische Bereiche und HTML-Tags – unabhängig davon, was im Beitragsinhalt gespeichert ist. Dadurch wird verhindert, dass bösartige oder fehlerhafte Attributwerte jemals das HTML oder CSS der Seite erreichen.

Mehrsprachigkeit

• Die Quelltexte des Plugins sind auf Deutsch; vollständig für Übersetzungen vorbereitet, wobei Übersetzungen nach dem Einreichen auf translate.wordpress.org automatisch je nach Locale bereitgestellt werden – ohne mitgelieferte .po/.mo-Dateien, entsprechend der Vorgehensweise bei auf WordPress.org gehosteten Plugins.
• Enthält eine wpml-config.xml für die WPML-Kompatibilität, sodass nur der Fragentext selbst zur Übersetzung angeboten wird – alle Styling-Attribute werden sprachübergreifend unverändert übernommen.