Accordion nativi in Joomla: Accessibili, Semantici e compatibili con Bootstrap

Invece di affidarsi a widget accordion pesanti in JavaScript, Joomla ora abbraccia gli elementi di divulgazione integrati nel browser: <details> e <summary>. Questo piccolo cambiamento ha grandi implicazioni per l'accessibilità, le prestazioni e la manutenibilità e si integra perfettamente con i modelli basati su Bootstrap di Joomla.

L'Accordion TinyMCE in Joomla

A partire da Joomla 5.2, TinyMCE include un pulsante Accordion nella barra degli strumenti dell'editor. Una volta abilitato, gli editor possono creare blocchi di contenuto espandibili direttamente dall'interfaccia WYSIWYG, senza toccare l'HTML. Il flusso di lavoro è semplice:

1. Apri un articolo o un campo HTML personalizzato utilizzando TinyMCE.
2. Inserisci un'intestazione o una riga di testo.
3. Seleziona il testo e fai clic sul pulsante Accordion.
4. Aggiungi il contenuto sotto l'intestazione.

Sotto il cofano, TinyMCE produce HTML standard:

<details>
  <summary>Intestazione della sezione</summary>
  <p>Il tuo contenuto qui — testo, immagini, elenchi, ecc.</p>
</details>

Non ci sono markup proprietari, dipendenze JavaScript o sintassi specifiche di Joomla. Quello che vedi è ciò che il browser comprende in modo nativo.

Aperto o chiuso per impostazione predefinita

Dopo aver creato un accordion in TinyMCE, puoi controllare se deve essere espanso o compresso al primo caricamento della pagina.

Seleziona il riepilogo dell'accordion e fai clic sul pulsante Attiva/Disattiva Accordion nella barra degli strumenti dell'editor. Questa azione aggiunge o rimuove l'attributo open sull'elemento <details>.

Quando l'attributo è presente:

<details open="open">

l'accordion viene visualizzato aperto per impostazione predefinita.

Quando viene rimosso:

<details>

l'accordion viene caricato chiuso, richiedendo l'interazione dell'utente per rivelarne il contenuto.

Poiché questo comportamento è controllato interamente dall'HTML nativo, funziona in modo coerente su tutti i browser e rimane completamente accessibile, senza bisogno di JavaScript.

Basato su HTML nativo: <details> e <summary>

La funzione accordion si basa su elementi di divulgazione HTML standard:

• <details> definisce un contenitore comprimibile
• <summary> fornisce il pulsante visibile

Questi elementi fanno parte delle specifiche HTML e sono supportati da tutti i browser moderni.

Perché è importante

• Interazione integrata: cliccando sul riepilogo, il pannello si apre e si chiude automaticamente.
• Supporto tastiera predefinito: gli utenti possono attivare la fisarmonica utilizzando il tasto Invio o Spazio.
• Significato semantico: gli screen reader riconoscono la relazione e annunciano i cambiamenti di stato.
• Non è richiesto JavaScript: il browser gestisce tutto.

Questa è accessibilità fatta nel modo giusto: intrinseca al markup, non aggiunta in un secondo momento.

Accessibilità senza lavoro extra

Gli accordion tradizionali spesso richiedono JavaScript e attributi ARIA gestiti con attenzione per essere utilizzabili dagli utenti di tastiere e tecnologie assistive.

Con <details> e <summary>:

• Lo stato aperto e chiuso viene esposto automaticamente
• Il comportamento del focus è corretto per impostazione predefinita
• Gli screen reader annunciano correttamente il controllo

Non è necessario aggiungere aria-expanded, role=“button” o una gestione personalizzata della tastiera. L'accordion TinyMCE di Joomla è accessibile fin da subito.

Questo funziona ovunque Joomla renda HTML: articoli, moduli e campi personalizzati.

Stile degli accordion con CSS

I browser applicano uno stile predefinito minimo agli elementi di divulgazione. Il vero potere risiede nel CSS e l'integrazione di Bootstrap di Joomla, ad esempio con Cassiopeia, lo rende particolarmente elegante.

Intestazioni di riepilogo in stile pulsante

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;
}

Aggiungi un semplice indicatore di apertura/chiusura:

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

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

Rimozione dell'indicatore predefinito del browser

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

summary {
  list-style: none;
}

Sovrascritture Joomla e strategia di integrazione

Il vantaggio principale di questo approccio è che non è necessario sovrascrivere l'output di TinyMCE. Invece:

• Aggiungi CSS al foglio di stile personalizzato del tuo template
• Se necessario, definisci gli stili (ad esempio .article-content details)
• Utilizza le variabili CSS Bootstrap per una compatibilità a lungo termine

Se scegli di creare override di layout, mantieni intatta la struttura <details> e <summary>. Sostituirli con il markup generico <div> significa ricostruire l'accessibilità da zero.

Casi d'uso creativi

• Domande frequenti e documentazione di aiuto
• Articoli lunghi con sezioni opzionali di approfondimento
• Esempi di codice o istruzioni di configurazione
• Layout di contenuti ottimizzati per dispositivi mobili

Un'accordion migliore di default

L'accordion TinyMCE in Joomla è un miglioramento discreto ma importante:

• HTML nativo, non widget personalizzati
• Accessibile di default
• Zero dipendenza da JavaScript
• Completamente personalizzabile con CSS
• Perfettamente integrato con i modelli Bootstrap

Joomla ha scelto standard, accessibilità e manutenibilità piuttosto che complessità, offrendo ai costruttori di siti più potenza con meno codice.