ACCORDION SCHEMA by Tonino Gerns

Accordion Schema ist ein Builder-Element für YOOtheme Pro 4.x und 5.x unter Joomla 5 und Joomla 6. Es setzt auf dem Accordion von UIkit 3 auf und ergänzt zwei Dinge, die der Standard nicht mitbringt: strukturierte Daten nach Schema.org und eine Bedienung ohne Maus. Enthalten sind zwei Elemente, das Accordion und der Eintrag.

Schema.org/FAQPage als JSON-LD

Eine Checkbox im Reiter Einstellungen schaltet die strukturierten Daten frei. Das Element schreibt dann application/ld+json in seine eigene Ausgabe: einen FAQPage-Knoten mit je einem Question-Eintrag pro Accordion-Eintrag, jeweils mit acceptedAnswer vom Typ Answer. Aufgenommen werden nur Einträge mit Titel und Inhalt, der Antworttext wird per strip_tags von HTML befreit und mit JSON_HEX_TAG gegen Script-Injection abgesichert. Erzeugt wird ausschließlich FAQPage, kein QAPage. Google zeigt FAQ-Rich-Results seit 2023 nur für Behörden- und Gesundheitsseiten; maschinenlesbar bleibt die Frage-Antwort-Struktur trotzdem, auch für KI-Assistenten.

Barrierefreiheit, die im Markup steht

Jeder Accordion-Titel bekommt role="button", tabindex="0" und aria-expanded. Das mitgelieferte JavaScript aktualisiert aria-expanded bei jedem Öffnen und Schließen und fängt Enter und Leertaste ab, das Accordion ist damit vollständig über die Tastatur bedienbar. Der Fokus bleibt sichtbar: 2 Pixel Outline mit 2 Pixel Abstand, über :focus-visible nur für Tastaturnutzer. Pro Eintrag setzt Du ein eigenes ARIA-Label, sonst dient der Titeltext ohne HTML als Beschriftung. Gebaut nach WCAG 2.1 AA, dem Katalog hinter BFSG, European Accessibility Act, EN 301 549 und BITV 2.0.

Ein Eintrag trägt mehr als Frage und Antwort

Zu jedem Eintrag gehören Titel, Editor-Inhalt, Bild mit Alt-Text und Link. Das Bild steht oben, unten, links oder rechts vom Text; seitlich greift ein UIkit-Grid mit 15 Breitenstufen, eigenen Abständen und wählbarem Umbruch-Breakpoint. Dazu kommen 9 Fokuspunkte für den Zuschnitt, drei Rahmenformen, Eager Loading und Inline-SVG mit 7 Farbrollen. Der Link kennt 8 Stile vom Button bis zum Textlink, drei Größen sowie nofollow und noreferrer.

Fragen und Antworten gestalten

Für den Titel stehen 16 Textstile bereit, von Heading 3X-Large über h1 bis h6 bis zu Meta und Lead. Das Icon setzt Du links oder rechts und hinterlegst optional ein zweites für den geöffneten Zustand, beide blenden in 0,3 Sekunden ineinander über. Der Antworttext lässt sich als Lead oder Meta auszeichnen, mit Initiale beginnen und auf 2 bis 6 Spalten verteilen.

Verhalten und Technik

Zwei Schalter steuern das Verhalten: mehrere Einträge gleichzeitig geöffnet und Start mit allen geschlossen. Als HTML-Element pro Eintrag stehen div, article und section bereit, ein CSS-Feld nimmt eigene Regeln für .el-item, .el-title, .el-content, .el-image und .el-link auf. Titel, Inhalt, Icons, Bild und Link sind als dynamische Quellen ausgeschrieben. CSS und JavaScript lädt das Plugin nur, wenn das Element auf der Seite steht, mit Versionsstempel gegen veralteten Cache.