Native Akkordeons in Joomla: Barrierefrei, semantisch und Bootstrap-freundlich

Joomla 5.2 hat still und leise eine leistungsstarke neue Funktion eingeführt: native Akkordeons in TinyMCE, die auf Standard-HTML statt JavaScript basieren. Dies gibt Content-Erstellern eine einfache Möglichkeit, ein- und ausklappbare Abschnitte hinzuzufügen und dabei das Markup sauber, barrierefrei und zukunftssicher zu halten.

Statt auf JavaScript-lastige Akkordeon-Widgets zu setzen, nutzt Joomla nun die im Browser integrierten Disclosure-Elemente: <details> und <summary>. Diese kleine Umstellung hat große Auswirkungen auf Barrierefreiheit, Leistung und Wartbarkeit und lässt sich hervorragend in die auf Bootstrap basierenden Templates von Joomla integrieren.

Das TinyMCE-Akkordeon in Joomla

Der Arbeitsablauf ist einfach:

1. Einen Beitrag oder ein benutzerdefiniertes HTML-Feld mit TinyMCE öffnen.
2. Eine Überschrift oder Textzeile eingeben.
3. Den Text markieren und auf die Schaltfläche Akkordeon klicken.
4. Inhalt unterhalb der Überschrift hinzufügen.

Im Hintergrund erzeugt TinyMCE Standard-HTML:

<details>
  <summary>Section heading</summary>
  <p>Your content here — text, images, lists, etc.</p>
</details>

Es gibt kein proprietäres Markup, keine JavaScript-Abhängigkeit und keine Joomla-spezifische Syntax. Was man sieht, ist das, was der Browser nativ versteht.

Standardmäßig geöffnet oder geschlossen

Nach dem Erstellen eines Akkordeons in TinyMCE kann festgelegt werden, ob es beim ersten Laden der Seite aufgeklappt oder eingeklappt ist.

Die Akkordeon-Überschrift auswählen und in der Symbolleiste des Editors auf die Schaltfläche Akkordeon umschalten klicken. Diese Aktion fügt das Attribut open zum <details>-Element hinzu oder entfernt es.

Ist das Attribut vorhanden:

<details open="open">

wird das Akkordeon standardmäßig geöffnet angezeigt.

Wird es entfernt:

<details>

lädt das Akkordeon geschlossen und erfordert eine Benutzerinteraktion, um seinen Inhalt anzuzeigen.

Da dieses Verhalten vollständig durch natives HTML gesteuert wird, funktioniert es browserübergreifend konsistent und bleibt vollständig barrierefrei – ganz ohne JavaScript.

Basierend auf nativem HTML: <details> und <summary>

Die Akkordeon-Funktion basiert auf den standardmäßigen HTML-Disclosure-Elementen:

• <details> definiert einen einklappbaren Container
• <summary> stellt den sichtbaren Umschalter bereit

Diese Elemente sind Teil der HTML-Spezifikation und werden von allen modernen Browsern unterstützt.

Warum das wichtig ist

• Eingebaute Interaktion: Ein Klick auf die Zusammenfassung öffnet und schließt das Panel automatisch.
• Tastaturunterstützung standardmäßig: Das Akkordeon kann mit Enter oder Leertaste umgeschaltet werden.
• Semantische Bedeutung: Screenreader erkennen die Beziehung und kündigen Zustandsänderungen an.
• Kein JavaScript erforderlich: Der Browser übernimmt alles.

Das ist Barrierefreiheit richtig umgesetzt – dem Markup innewohnend, nicht nachträglich angeflanscht.

Barrierefreiheit ohne zusätzlichen Aufwand

Herkömmliche Akkordeons benötigen oft JavaScript sowie sorgfältig verwaltete ARIA-Attribute, um für Tastatur- und Assistenztechnologie-Nutzer verwendbar zu sein.

Mit <details> und <summary>:

• Der geöffnete und geschlossene Zustand wird automatisch offengelegt
• Das Fokusverhalten ist standardmäßig korrekt
• Screenreader kündigen das Steuerelement korrekt an

Es ist nicht nötig, aria-expanded, role="button" oder eine eigene Tastatursteuerung hinzuzufügen. Joomlas TinyMCE-Akkordeon ist von Haus aus barrierefrei.

Das funktioniert überall dort, wo Joomla HTML rendert – Beiträge, Module und benutzerdefinierte Felder.

Akkordeons mit CSS gestalten

Browser wenden auf Disclosure-Elemente nur minimale Standardformatierung an. CSS ist hier die eigentliche Stärke, und Joomlas Bootstrap-Integration, z. B. mit Cassiopeia, macht dies besonders elegant.

Zusammenfassungsüberschriften im Button-Stil

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary);
  color: var(--white);
  padding: .75rem 1rem;
  border-radius: .375rem;
}

details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Einen einfachen Öffnen/Schließen-Indikator hinzufügen:

summary::after {
  content: "+";
  font-weight: bold;
}

details[open] summary::after {
  content: "–";
}

Entfernen der Standard-Browsermarkierung

summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style: none;
}

Joomla-Overrides und Integrationsstrategie

Der entscheidende Vorteil dieses Ansatzes besteht darin, dass keine Overrides für die TinyMCE-Ausgabe erforderlich sind. Stattdessen:

• CSS zum benutzerdefinierten Stylesheet des Templates hinzufügen
• Stile bei Bedarf eingrenzen (zum Beispiel .article-content details)
• Bootstrap-CSS-Variablen für langfristige Kompatibilität verwenden

Werden dennoch Layout-Overrides erstellt, sollte die Struktur aus <details> und <summary> beibehalten werden. Ein Ersetzen durch allgemeine <div>-Auszeichnung bedeutet, dass die Barrierefreiheit von Grund auf neu aufgebaut werden muss.

Kreative Anwendungsfälle

• FAQs und Hilfedokumentation
• Lange Beiträge mit optionalen vertiefenden Abschnitten
• Code-Beispiele oder Konfigurationsanleitungen
• Mobilfreundliche Inhaltslayouts

Ein besseres Akkordeon von Haus aus

Das TinyMCE-Akkordeon in Joomla ist eine unauffällige, aber wichtige Verbesserung:

• Natives HTML, keine benutzerdefinierten Widgets
• Standardmäßig barrierefrei
• Keine JavaScript-Abhängigkeit
• Vollständig mit CSS gestaltbar
• Nahtlos in Bootstrap-Templates integriert

Damit entscheidet sich Joomla für Standards, Barrierefreiheit und Wartbarkeit statt für Komplexität und gibt Website-Erstellern mehr Möglichkeiten bei weniger Code.