In questo articolo ti porto nel mondo degli attributi personalizzati Divi, una funzione che può sembrare piccola ma che, nella pratica, ti dà molto più controllo su quello che succede davvero dentro ai moduli e agli elementi del layout.

Se lavori come freelance, gestisci il sito di un piccolo business o semplicemente usi Divi tutti i giorni, questa cosa ti torna utile per migliorare accessibilità, tracciamenti, integrazioni e comportamenti dei vari elementi senza mettere mano ogni volta al codice del tema.

E no, non serve essere dei fanatici dell'HTML per usarla bene.

Con gli attributi personalizzati in Divi è possibile aggiungere qualsiasi attributo HTML agli elementi del layout e alla maggior parte dei loro sotto-elementi.

Cosa sono gli attributi personalizzati

Un attributo HTML è, molto semplicemente, un'istruzione aggiuntiva che si inserisce direttamente nel codice di un elemento per modificarne il comportamento o il significato.

Per esempio, ci sono attributi come alt (il testo alternativo di un'immagine), title (la descrizione che può comparire al passaggio del mouse), rel (il tipo di relazione tra due pagine collegate) e aria-label (un'etichetta letta dagli screen reader per chi usa tecnologie assistive).

Tipo: se hai un'icona cliccabile senza testo visibile, puoi aggiungere un aria-label come "Apri il menu" per fare in modo che sia comprensibile anche a chi naviga con un lettore di schermo.

Divi ha sempre supportato attributi specifici, come class e ID.

Ora, però, puoi aggiungere qualsiasi attributo a qualsiasi elemento. E questa è una differenza bella grossa, soprattutto sul fronte dell'accessibilità.

Per esempio, puoi aggiungere il testo alternativo alle immagini oppure assegnare ruoli ed etichette a elementi non semantici, come un pulsante costruito con una semplice icona.

Altri attributi utili

Ad esempio, target indica dove aprire un link, per esempio in una nuova scheda del browser. Poi ci sono i attributi data, cioè attributi personalizzati usati per associare informazioni extra a un elemento HTML.

Per esempio, nel tuo e-commerce puoi scrivere data-categoria="prodotto" su una scheda e poi usare quel valore in uno script o in un filtro dinamico.

Nella scheda Avanzate di tutti gli elementi trovi un nuovo gruppo di opzioni chiamato Attributi.

È la nuova interfaccia da cui gestire ogni tipo di attributo, tutto nello stesso posto.

Aggiungi un attributo, selezioni l'elemento di destinazione e gli assegni un nome e un valore.

Fine. Il meccanismo, in sostanza, è questo.

Tutti gli elementi supportano l'aggiunta di attributi sul loro contenitore principale, cioè il tag HTML che racchiude l'elemento nella pagina.

Inoltre, la maggior parte degli elementi di contenuto — come testi, immagini o pulsanti configurabili dalla scheda Contenuto del modulo — supporta a sua volta gli attributi personalizzati.

Ad esempio, puoi aggiungere un attributo direttamente al pulsante di un modulo invito all'azione senza dover toccare il codice.

Ed è proprio qui che la funzione diventa comoda davvero.

Gli attributi hanno un ruolo importante nell'accessibilità.

Divi aggiunge già in automatico alcuni attributi di base agli elementi, ma ovviamente non può sapere sempre come userai ogni modulo o che tipo di contenuto conterrà ogni area della pagina.

Con il sistema di attributi personalizzati puoi definire in modo più preciso le caratteristiche necessarie affinché gli screen reader — cioè i programmi che leggono il contenuto della pagina ad alta voce per le persone con disabilità visive — interpretino correttamente quello che hai costruito.

Per esempio, puoi usare il sistema di interazioni di Divi per creare un pop-up personalizzato, quindi una finestra che si apre sopra la pagina, includendo un'icona che funziona da pulsante di chiusura.

In quel caso puoi usare gli attributi personalizzati per assegnare a quell'icona un role, cioè il ruolo dell'elemento, per esempio "button", e un aria-label, cioè una descrizione testuale leggibile dai lettori di schermo.

Così comunichi ai software di assistenza vocale che quell'icona è un pulsante che chiude la finestra.

Questo nuovo gruppo di opzioni gestisce tutti gli attributi in un unico posto.

Le impostazioni precedenti collegate agli attributi non sono più attive e vengono spostate automaticamente nel nuovo sistema.

Per esempio, se in passato hai aggiunto una classe o un identificatore tramite la vecchia opzione Classe e ID CSS, quegli attributi compariranno come elementi nell'elenco del nuovo gruppo di opzioni dedicato agli attributi.

Attributi personalizzati e accessibilità: perché è importante

Uno degli ambiti in cui gli attributi personalizzati risultano più utili è quello dell'accessibilità.

Aggiungere attributi ARIA, cioè un insieme di istruzioni che aiutano i programmi di lettura dello schermo a interpretare correttamente la pagina, direttamente agli elementi di Divi permette di migliorare davvero l'esperienza di chi utilizza tecnologie assistive, senza dover modificare file PHP o aggiungere JavaScript extra.

Alcuni casi d'uso pratici includono:

• aria-label (etichetta descrittiva): fornisce un testo alternativo agli elementi interattivi privi di testo visibile, come i pulsanti con sola icona. In questo modo, chi usa un lettore di schermo capisce a cosa serve quel pulsante.
• aria-hidden (nascondi ai lettori di schermo): esclude dalla lettura gli elementi puramente decorativi, evitando distrazioni inutili.
• role (ruolo semantico): comunica al browser e alle tecnologie assistive quale funzione ha un elemento, quando il tag HTML da solo non basta a spiegarlo.
• aria-expanded e aria-controls (stato e controllo): sono utili per gestire componenti dinamici come menu a tendina o sezioni espandibili, indicando se sono aperte o chiuse.

Integrare questi attributi direttamente dall'interfaccia di Divi significa poter costruire layout accessibili in modo più diretto e con meno dipendenza da soluzioni esterne.

Quindi, da una parte migliori l'esperienza degli utenti finali, dall'altra ti muovi in modo più ordinato rispetto ai requisiti delle linee guida WCAG, cioè le norme internazionali sull'accessibilità web.

Vale anche la pena ricordare una cosa: l'accessibilità non riguarda solo chi utilizza lettori di schermo.

Strutturare correttamente gli attributi semantici migliora anche la leggibilità del codice per i motori di ricerca e rende il progetto più coerente dal punto di vista tecnico.

Errori comuni da evitare con gli attributi personalizzati

Gli attributi personalizzati offrono tanta flessibilità.

Però, se usati male, possono introdurre problemi tecnici o comportamenti strani. Ecco gli errori più comuni da tenere d'occhio.

• Attributi non validi secondo le specifiche HTML: non tutti i nomi di attributo sono accettati dai browser. Se usi nomi arbitrari senza il prefisso data-, puoi generare markup non valido e causare problemi di resa o di accessibilità.
• Uso scorretto dell'attributo alt: l'attributo alt ha un ruolo preciso nell'accessibilità delle immagini. Sovrascriverlo o applicarlo a elementi che non c'entrano compromette la fruibilità del sito per gli utenti che usano tecnologie assistive.
• Attributi data-* con dati sensibili: i valori degli attributi data-* sono visibili nel sorgente HTML della pagina. Quindi non inserire mai informazioni riservate, token di autenticazione o dati personali in questi attributi.
• Conflitti con attributi esistenti: prima di aggiungere un attributo personalizzato, verifica che non vada a sovrascrivere un attributo già gestito da Divi o dal browser. Sovrascrivere attributi come id, class o role può rompere funzionalità già presenti.
• Valori non sanificati nei contesti dinamici: se i valori degli attributi arrivano da input utente o da fonti esterne, assicurati che siano sanificati correttamente prima di inserirli nel markup, così eviti vulnerabilità XSS.

Seguire queste indicazioni ti permette di usare gli attributi personalizzati in modo sicuro, mantenendo il markup valido e il sito accessibile.

Come usare gli attributi personalizzati in Divi

Gli attributi personalizzati si aggiungono direttamente dal pannello di impostazioni di ogni modulo Divi.

Una volta salvati, vengono inseriti automaticamente nell'HTML dell'elemento, senza bisogno di modificare il codice a mano.

Ecco alcuni scenari concreti in cui questa funzione torna davvero utile:

• Integrazione con script JavaScript: puoi usare attributi data-*, cioè attributi con un nome personalizzato che inizia con "data-", per collegare gli elementi della pagina a componenti come cursori, descrizioni contestuali o animazioni, senza toccare i file del tema.
• Tracciamento con strumenti di analisi: molti strumenti di analisi o di gestione dei tag richiedono attributi specifici sugli elementi cliccabili. Puoi aggiungerli direttamente dall'editor visivo di Divi.
• Comportamento dei moduli: attributi come autocomplete, che attiva o disattiva il completamento automatico dei campi, ti permettono di controllare il comportamento dei moduli senza scrivere codice.
• Accessibilità: attributi come aria-label, che aggiunge un'etichetta leggibile dai lettori di schermo, o role migliorano la fruibilità del sito per chi usa tecnologie assistive, tutto direttamente dall'interfaccia visiva.

In tutti questi casi il vantaggio è sempre lo stesso: gestisci configurazioni avanzate dall'editor, senza dover aggiungere PHP o JavaScript separato.

Alcuni esempi pratici

Gli attributi personalizzati trovano la loro utilità vera nelle situazioni di tutti i giorni.

Ecco alcuni casi d'uso che puoi applicare subito nei tuoi progetti Divi.

Sicurezza nei link esterni

Ogni link che apre una nuova scheda dovrebbe includere target="_blank" insieme a rel="noopener noreferrer".

Il primo attributo apre il link in una nuova scheda. Il secondo previene potenziali vulnerabilità di sicurezza legate alla navigazione tra domini diversi.

Puoi aggiungerli entrambi tramite attributi personalizzati sul modulo Divi.

Accessibilità per pulsanti con sola icona

Quando un pulsante contiene solo un'icona e non ha testo visibile, i lettori di schermo non hanno un'etichetta da leggere.

Aggiungere aria-label="Descrizione dell'azione" come attributo personalizzato risolve il problema in modo diretto, rendendo il pulsante accessibile senza toccare il layout visivo.

Aggancio per script JavaScript

Gli attributi data-* sono lo strumento ideale per collegare la logica JavaScript agli elementi della pagina senza dipendere da classi CSS o ID fragili.

Ad esempio, data-trigger="scroll-animation" oppure data-id="prodotto-42" permettono agli script personalizzati di selezionare e manipolare i moduli Divi in modo preciso e più facile da mantenere nel tempo.

Attributi per tracciamento e analisi

Gli strumenti di analisi o i gestori di tag spesso richiedono attributi specifici sugli elementi cliccabili.

Con gli attributi personalizzati puoi aggiungere direttamente, per esempio, data-event="click-cta" o data-category="servizi" senza dover intervenire nel codice del tema.

In tutti questi casi, la logica è sempre la stessa: aggiungere informazioni strutturate agli elementi HTML tramite l'interfaccia di Divi, senza scrivere codice aggiuntivo.

Come verificare che gli attributi personalizzati siano applicati correttamente

Dopo aver aggiunto un attributo personalizzato a un elemento in Divi, è buona pratica verificare che sia davvero presente nel codice HTML della pagina.

Farlo richiede un attimo, ma ti evita parecchi dubbi dopo.

Ecco come controllare in modo rapido e affidabile:

1. Apri gli strumenti di ispezione del browser. Su Chrome o Firefox, premi F12 oppure fai clic con il tasto destro sull'elemento nella pagina e scegli Ispeziona.
2. Individua l'elemento corretto nella struttura della pagina. Assicurati di selezionare il nodo HTML che corrisponde all'elemento Divi a cui hai applicato l'attributo. Fai attenzione, perché Divi può generare strutture annidate: quindi l'attributo potrebbe trovarsi su un elemento contenitore e non direttamente sul tag visibile.
3. Cerca l'attributo nel pannello degli elementi. Una volta selezionato il nodo, verifica la presenza dell'attributo nella riga HTML corrispondente. Dovrebbe comparire esattamente con il nome e il valore che hai inserito nel builder visuale.
4. Controlla i casi particolari di link e immagini. Se hai applicato l'attributo a un link o a un'immagine, verifica che sia presente sul tag <a> o <img> corretto e non su un elemento contenitore esterno.

Se l'attributo non compare nel codice, controlla di averlo salvato correttamente nelle impostazioni del modulo e che la pagina sia stata pubblicata o aggiornata.

Se ancora non lo vedi, svuota la cache del sito e ricarica la pagina prima di ispezionare di nuovo il codice.

Prossimi passi consigliati

• Controlla il codice HTML generato dagli attributi personalizzati usando gli strumenti di ispezione del browser, quindi il tasto F12, oppure un servizio online di validazione del codice.
• Applica gli attributi agli elementi principali del progetto — intestazione, sezione iniziale, moduli di contatto, schede contenuto — prima di estenderli all'intero layout.
• Esegui una verifica di accessibilità: assicurati che gli attributi dedicati all'accessibilità, come quelli che descrivono il ruolo o lo stato di un elemento ai lettori di schermo, siano usati correttamente e non creino conflitti con il codice già presente.

Hai bisogno di una revisione semantica o di accessibilità sul tuo progetto Divi? Scrivimi per un'analisi mirata.

Non sarò sto genio mistico della tecnica, ma su questi dettagli ci tengo parecchio.

Cosa cambia concretamente per i tuoi progetti

L'uso degli attributi personalizzati sui moduli Divi non è solo una questione tecnica.

Alla fine della fiera, si traduce in risultati misurabili che anche il cliente può percepire direttamente.

• Navigazione più chiara per le tecnologie assistive: aggiungere attributi di accessibilità corretti — come aria-label (etichetta leggibile dai lettori di schermo), aria-describedby (collegamento a una descrizione) o role (ruolo dell'elemento) — permette ai lettori di schermo di interpretare correttamente la struttura della pagina, migliorando l'esperienza per gli utenti con disabilità.
• Etichettatura semantica più robusta: attributi come data-*, cioè attributi dati personalizzati, consentono di collegare i moduli a sistemi esterni, script personalizzati o logiche di tracciamento senza dover toccare il codice del tema.
• Meno segnalazioni nelle verifiche di accessibilità: molte criticità rilevate dagli strumenti di verifica dipendono proprio dall'assenza di attributi semantici di base. Poterli aggiungere direttamente dall'editor riduce il tempo necessario per correggere questi problemi.
• Struttura HTML più solida: un codice arricchito con attributi appropriati è più facile da mantenere, da passare a un altro sviluppatore e da documentare.

Quindi, ricapitolando: questa funzione ti permette di gestire direttamente dentro Divi una serie di interventi che prima richiedevano codice personalizzato aggiuntivo.

Il risultato è un progetto più pulito, più ordinato e anche più semplice da consegnare o riprendere in mano nel tempo.

Se vuoi, puoi partire da un modulo alla volta: prima i pulsanti, poi i link, poi le immagini e infine i componenti più dinamici.

E se durante il lavoro ti viene qualche dubbio, puoi sempre scriverlo nei commenti o confrontarti con chi ti sta aiutando sul progetto.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.