Un accordion FAQ WordPress HTML CSS JavaScript permette di mostrare domande e risposte in modo ordinato, senza installare plugin aggiuntivi. La struttura accessibile usa pulsanti HTML reali, l’attributo aria-expanded e pannelli collegati con aria-controls. Il codice può essere inserito in un blocco HTML personalizzato, mentre CSS e JavaScript vanno gestiti dal tema, preferibilmente tramite child theme. Il risultato è leggero, navigabile da tastiera e compatibile con gli screen reader. La procedura seguente crea un componente riutilizzabile e facilmente personalizzabile.

Quale struttura deve avere un accordion FAQ accessibile

Un accordion FAQ accessibile non dovrebbe usare elementi generici come <div> per simulare pulsanti. Ogni domanda deve essere un vero elemento <button>, perché il browser gestisce già il focus da tastiera, il tasto Invio e la barra spaziatrice.

L’attributo aria-expanded comunica se la risposta è aperta o chiusa. L’attributo aria-controls collega il pulsante all’ID univoco del pannello che contiene la risposta. Il pannello usa hidden quando è chiuso, così il contenuto non viene letto inutilmente dagli screen reader.

La struttura HTML può contenere più domande all’interno di un contenitore con classe faq-accordion:

<section class="faq-accordion" aria-label="Domande frequenti">
<div class="faq-item">
<h3 class="faq-question">
<button
type="button"
aria-expanded="false"
aria-controls="faq-risposta-1">
Posso usare l’accordion FAQ senza plugin?
<span class="faq-icon" aria-hidden="true">+</span>
</button>
</h3>

<div
id="faq-risposta-1"
class="faq-answer"
role="region"
hidden>
<p>Sì. HTML, CSS e JavaScript sono sufficienti per creare un accordion FAQ leggero e personalizzabile in WordPress.</p>
</div>
</div>

<div class="faq-item">
<h3 class="faq-question">
<button
type="button"
aria-expanded="false"
aria-controls="faq-risposta-2">
Il componente funziona da smartphone?
<span class="faq-icon" aria-hidden="true">+</span>
</button>
</h3>

<div
id="faq-risposta-2"
class="faq-answer"
role="region"
hidden>
<p>Sì. Il layout si adatta alla larghezza dello schermo tramite CSS e il pulsante resta utilizzabile con il tocco.</p>
</div>
</div>
</section>

Nel nuovo editor di WordPress, il markup può essere inserito in un blocco HTML personalizzato. Ogni domanda deve avere un ID diverso: duplicare faq-risposta-1 impedirebbe al browser e alle tecnologie assistive di identificare correttamente il pannello associato.

Come aggiungere il CSS dell’accordion in WordPress

Il CSS può essere inserito in Aspetto > Personalizza > CSS aggiuntivo, se il tema WordPress mantiene questa voce, oppure nel file faq.css del child theme. Separare gli stili dal markup evita di inserire codice difficile da mantenere dentro l’editor.

.faq-accordion {
max-width: 760px;
margin: 2rem auto;
}

.faq-item {
border-bottom: 1px solid #d9d9d9;
}

.faq-question {
margin: 0;
}

.faq-question button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-weight: 700;
text-align: left;
}

.faq-question button:focus-visible {
outline: 3px solid #1457d9;
outline-offset: 4px;
}

.faq-icon {
margin-left: 1rem;
font-size: 1.5rem;
line-height: 1;
}

.faq-question button[aria-expanded="true"] .faq-icon {
transform: rotate(45deg);
}

.faq-answer {
padding: 0 2.5rem 1rem 0;
}

.faq-answer p {
margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
.faq-icon {
transition: transform 0.2s ease;
}
}

Il selettore :focus-visible rende evidente il focus quando l’utente naviga con la tastiera. Il colore del contorno deve mantenere un contrasto sufficiente rispetto allo sfondo; il valore esatto può richiedere un adattamento ai colori del tema WordPress.

L’attributo hidden mantiene il pannello chiuso senza affidarsi soltanto a display: none scritto nel CSS. Questa scelta riduce il rischio che una risposta nascosta rimanga accessibile a una tecnologia assistiva a causa di stili personalizzati del tema.

Come collegare il JavaScript senza plugin

Il JavaScript deve ascoltare il clic sui pulsanti, aggiornare aria-expanded e modificare la proprietà hidden del pannello collegato. Il codice seguente apre una risposta alla volta e chiude automaticamente le altre domande dello stesso accordion.

Passo 1: creare il file JavaScript

Nel child theme crea il file assets/faq.js e inserisci questo codice:

document.addEventListener('DOMContentLoaded', function () {
const accordions = document.querySelectorAll('.faq-accordion');

accordions.forEach(function (accordion) {
const buttons = accordion.querySelectorAll('.faq-question button');

buttons.forEach(function (button) {
button.addEventListener('click', function () {
const panelId = button.getAttribute('aria-controls');
const panel = document.getElementById(panelId);
const isOpen = button.getAttribute('aria-expanded') === 'true';

buttons.forEach(function (otherButton) {
const otherPanelId = otherButton.getAttribute('aria-controls');
const otherPanel = document.getElementById(otherPanelId);

otherButton.setAttribute('aria-expanded', 'false');

if (otherPanel) {
otherPanel.hidden = true;
}
});

if (!isOpen && panel) {
button.setAttribute('aria-expanded', 'true');
panel.hidden = false;
}
});
});
});
});

Il codice usa querySelectorAll('.faq-accordion'), quindi può gestire più accordion nella stessa pagina. Il pulsante resta un elemento nativo e non richiede script aggiuntivi per i tasti Invio e barra spaziatrice.

Passo 2: caricare lo script nel child theme

Nel file functions.php del child theme aggiungi il caricamento dello script e del foglio di stile:

<?php
function backdigit_carica_faq_assets() {
wp_enqueue_style(
'backdigit-faq',
get_stylesheet_directory_uri() . '/assets/faq.css',
array(),
'1.0'
);

wp_enqueue_script(
'backdigit-faq',
get_stylesheet_directory_uri() . '/assets/faq.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_faq_assets');

La funzione wp_enqueue_script() carica il JavaScript nel piè di pagina grazie all’ultimo parametro impostato su true. La funzione get_stylesheet_directory_uri() punta al child theme attivo, mentre wp_enqueue_style() carica il foglio CSS dalla cartella assets.

Non inserire questo codice PHP nel blocco HTML personalizzato o nell’editor di una pagina. Se il tema non utilizza un child theme, la modifica diretta di functions.php può essere sovrascritta da un aggiornamento; in quel caso è preferibile creare prima un child theme o usare una soluzione di gestione del codice già prevista dall’installazione.

Come verificare accessibilità e funzionamento

Dopo aver pubblicato la pagina, verifica che l’accordion FAQ WordPress HTML CSS JavaScript risponda correttamente a ogni interazione. La domanda deve essere raggiungibile con il tasto Tab e il focus deve restare visibile.

Controlla questi aspetti:

Il clic sul pulsante apre e chiude la risposta.
aria-expanded="true" compare soltanto sulla domanda aperta.
Il valore di aria-controls corrisponde all’ID del pannello corretto.
Una risposta chiusa possiede l’attributo hidden.
Il componente funziona senza usare il mouse.
Il testo resta leggibile anche con CSS disattivato.
Le domande mantengono un ordine logico e descrittivo.

Puoi testare la tastiera con Tab, Invio e barra spaziatrice. Per un controllo più approfondito, verifica la pagina con uno screen reader disponibile sul sistema operativo e usa gli strumenti di ispezione del browser per controllare il contrasto, la gerarchia dei titoli e l’assenza di ID duplicati.

Se la risposta non si apre, controlla prima che aria-controls contenga esattamente lo stesso valore dell’id del pannello. Se il codice non viene eseguito, verifica il percorso dei file faq.js e faq.css, la console del browser e l’eventuale cache di WordPress o del servizio CDN.

Un accordion FAQ WordPress HTML CSS JavaScript ben strutturato migliora la consultazione delle risposte senza appesantire il sito con un plugin dedicato.

Potrebbe interessarti anche:

FAQ

Sì, puoi usare un blocco HTML personalizzato per il markup dell’accordion. CSS e JavaScript vanno invece gestiti nel child theme o nelle aree del tema dedicate al codice.

No. Un componente basato su HTML, CSS e JavaScript funziona senza plugin, purché il codice sia corretto e venga caricato dal tema.

Un elemento <button> è già riconosciuto come controllo interattivo da browser, tastiera e screen reader. Un <div> richiederebbe ulteriori attributi e una gestione più complessa dell’accessibilità.

Sì, ma devi modificare il JavaScript per non chiudere gli altri pannelli quando viene aperta una nuova domanda. La struttura HTML e gli attributi ARIA possono rimanere invariati.

In genere sì, se il tema consente di caricare CSS e JavaScript e non sovrascrive gli stessi selettori. Per evitare conflitti, gli stili dell’accordion sono racchiusi nella classe .faq-accordion.

Altri articoli di questa serie: