Accordions

Doku

WordPress hat mit Version 6.9 einen Accordion-Block eingeführt. Bis dahin wurden Accordions mit dem Details-Block realisiert. Beide Lösungen haben Nachteile, daher bieten wir weiterhin beide Pattern an.

Allgemein zu beachten

• Verwende maximal 7 Accordions – sonst wird es zu lang
• Als Icon hat sich »Chevron« etabliert und bietet die beste Usability
• Wenn WooCommerce oder Yoast im Einsatz sind, stehen weitere Accordion-Blöcke dieser Plugins zur Verfügung.

Zu beachten beim Accordion-Block

• Wenn das Accordion geschlossen ist, kann über die Browser-Suche der Inhalt darin nicht gefunden werden, da der native Block leider hidden=until-foundÖffnet in neuem Tab nicht unterstützt.
• Wir tauschen über eine Funktion das Standard-Icon (+) gegen das Chevron (expand, collapse) aus unserer SVG-Sprite.
• Wenn schema.org-Daten benötigt werden, kann dies leicher mit dem nativen AccordionÖffnet in neuem Tab (oder dem Yoast Accordion) realisiert werden.

Zu beachten beim Details-Block

• Das individuelle Styling ist kompliziert, da mit PseudoelementenÖffnet in neuem Tab gearbeitet werden muss. Wir haben CSS-Variablen vorbereitet, die das Styling erleichtern.
• Es dürfen keine weiteren Unterüberschriften enthalten sein, da das HTML-Element summary die ARIA-Rolle »Button« besitzt, was dazu führt, dass alle enthaltenen Elemente ihre Rolle verlieren.