Hai presente quando stai rifinendo una pagina in Divi, tutto sembra perfetto… e poi arriva la richiesta “piccola” che ti spiazza?

Tipo: “Possiamo rendere questo pulsante più accessibile per chi usa un lettore di schermo?” oppure “Riusciamo a capire quale call to action cliccano davvero, senza cambiare testi, link o impazzire con classi CSS?”.

Ecco: in quei momenti di solito si finisce a fare compromessi. Una classe buttata lì con un nome criptico. Un pezzetto di codice infilato dove non dovrebbe. O peggio: niente tracciamento e accessibilità “a sensazione”.

In questa guida vediamo come aggiungere attributi ARIA e data-* in Divi 5 direttamente dal builder, senza toccare codice, in modo pulito e ripetibile. È una di quelle cose che aiutano tantissimo se sei freelance e gestisci siti vetrina, se hai un piccolo e-commerce e vuoi capire cosa converte davvero, oppure se lavori in agenzia/PMI e devi mantenere ordine su decine di moduli e pagine.

Perché gli attributi contano per il tuo sito

Gli attributi HTML sono piccole informazioni “attaccate” agli elementi della pagina (pulsanti, moduli, link, immagini). Non cambiano per forza l’aspetto visivo, ma aggiungono significato e dati utili.

In generale, ti interessano soprattutto tre famiglie:

• Attributi ARIA (Accessible Rich Internet Applications): sono “etichette” e segnali che aiutano le tecnologie assistive (es. i lettori di schermo) a capire cosa fa un elemento e come si usa.
• Attributi data-*: sono campi personalizzati per salvare dati “dietro le quinte” dentro l’HTML. L’utente non li vede, ma script e strumenti di analisi possono leggerli.
• Attributi HTML standard (es. alt, title, rel, target, lingua, ecc.): controllano comportamento, accessibilità di base e relazioni tra elementi (soprattutto link e immagini).

Gli attributi ARIA servono quando l’HTML “normale” non basta a descrivere bene un’interazione. Per esempio:

• Un lettore di schermo può annunciare se un interruttore è “attivo” o “disattivo”.
• Un campo di un modulo può avere un’etichetta più chiara per chi non vede l’interfaccia.

L’attributo aria-label rende il pulsante comprensibile a tutti. Chi vede l’interfaccia vede l’icona del carrello e il testo “Aggiungi al carrello”. Chi usa un lettore di schermo sente annunciare “aggiungi al carrello”. Stesso pulsante, esperienze diverse, ma il messaggio arriva a tutti.

Gli attributi data-*, invece, sono perfetti quando ti serve passare informazioni a un sistema esterno, senza “sporcare” classi e senza inventarti workaround.

Esempio pratico: l’utente clicca “Richiedi preventivo”. Un attributo data può dire al tuo script quale servizio era selezionato, così invii la tariffa corretta. Oppure puoi tracciare da quali sezioni della pagina arrivano le iscrizioni alla newsletter: sezioni diverse, attributi data diversi.

Risultato: un sito più ordinato. Invece di mettere tutto nei nomi delle classi CSS, separi:

• Stile → classi CSS
• Funzionalità / tracciamento → attributi data-*
• Accessibilità → ARIA (solo quando serve)

E soprattutto smetti di andare a sensazione: capisci quali contenuti portano conversioni e dove l’esperienza può migliorare.

Perché non usare solo le classi?

Perché a un certo punto diventa un minestrone. Se costringi ogni informazione dentro le classi CSS o aggiungi testo invisibile:

• il codice diventa difficile da mantenere;
• rischi di rompere cose quando aggiorni un layout;
• puoi creare problemi di accessibilità senza accorgertene.

Regola pratica molto concreta: usa prima l’HTML nativo (pulsanti veri, link veri, etichette vere). Aggiungi ARIA solo quando la semantica nativa non basta.

Cosa sono gli Attributi personalizzati di Divi 5?

Divi 5 ti permette di gestire gli attributi direttamente dal builder tramite gli Attributi personalizzati. In pratica: invece di dover scrivere codice a mano, compili dei campi nel pannello del modulo.

Il pannello Attributi si trova dove prima c’erano Classe CSS e ID nella sezione Avanzate. E cosa importante: le vecchie classi e gli ID vengono migrati automaticamente, quindi non perdi nulla passando a Divi 5.

Cliccando su Aggiungi attributo trovi un menu a tendina con alcune opzioni già pronte (preset):

• class: aggiunge classi CSS per lo stile
• id: crea identificatori univoci per gli elementi
• title: mostra un suggerimento (tooltip) al passaggio del mouse
• alt: fornisce testo alternativo per le immagini (utile per accessibilità e contesto)
• rel: definisce relazioni dei link, come nofollow (non trasferire “autorevolezza” SEO) o noopener (più sicurezza quando apri nuove schede)
• target: controlla come si aprono i link, ad esempio in una nuova scheda
• role: specifica il “ruolo” dell’elemento per i lettori di schermo
• aria-label: aggiunge un’etichetta descrittiva per le tecnologie assistive
• data-: salva dati personalizzati per script e tracciamenti

Oltre ai preset, trovi anche Inserisci attributo personalizzato per aggiungere qualsiasi attributo HTML valido. Se il browser lo riconosce, puoi inserirlo: descrittori ARIA, lingua, campi data personalizzati e così via.

Una cosa molto comoda: puoi scegliere anche che parte del modulo colpire, non solo il contenitore esterno. Quindi, per esempio, puoi applicare un attributo:

• solo all’icona di un modulo,
• solo al testo,
• oppure all’intero modulo.

Infine, puoi raggruppare gli attributi in Preset di gruppo opzioni (cioè un “pacchetto” riutilizzabile di impostazioni). Imposti una volta, salvi, e poi lo riapplichi su altri moduli senza ripartire da zero. Se lavori su molte pagine o su siti grandi, ti cambia la vita.

Come aggiungere attributi personalizzati in Divi 5

Ora passiamo alla parte operativa. L’idea è semplice: prima vediamo ARIA (accessibilità), poi data-* (dati e tracciamento “dietro le quinte”).

Aggiungere attributi ARIA agli elementi

Gli attributi ARIA sono fondamentali per le tecnologie assistive, come i lettori di schermo (software che “legge” la pagina a voce per chi non può vedere bene lo schermo).

Facciamo un esempio pratico: etichettare un Modulo Video in modo che chi usa un lettore di schermo capisca subito di cosa si tratta.

Step-by-step:

• Apri le impostazioni del modulo.
• Vai su Avanzate e apri Attributi.
• Clicca Aggiungi attributo.
• In Nome attributo seleziona aria-label.

Poi imposta così:

• Etichetta amministratore: un nome comodo per te (serve solo per riconoscere il modulo nel builder).
• Elemento di destinazione: lascia Modulo (cioè lo applichi al video come blocco).
• Valore attributo: ad esempio Video tour della palestra.

Da qui in poi, i lettori di schermo dovrebbero annunciare il contenuto del video prima della riproduzione.

Altro caso super comune: hai creato un Modulo Blurb (quello con icona + testo). L’icona è solo decorativa e il testo spiega già tutto. In quel caso far “leggere” l’icona è solo rumore.

Step-by-step per nascondere l’icona ai lettori di schermo:

• Vai nelle impostazioni del Modulo Blurb.
• Scheda Avanzate → Attributi → Aggiungi attributo.
• Elemento di destinazione: Immagine o icona (così non tocchi il testo).
• Nome attributo: aria-hidden.
• Valore attributo: true.

Risultato: i lettori di schermo saltano l’icona decorativa e si concentrano sul testo. Ed è qui che Divi 5 fa una cosa davvero utile: puoi “mirare” pezzi specifici del modulo, togliendo rumore senza sacrificare il layout.

Lavorare con gli attributi data e valori personalizzati

Gli attributi data-* servono per memorizzare informazioni che script e strumenti di tracciamento possono leggere più tardi.

Esempio pratico: vuoi “marcare” un pulsante, così il tuo sistema di analisi può distinguere i clic in base a dove si trova.

Step-by-step:

• Apri un Modulo Pulsante.
• Vai su Avanzate → Attributi → Aggiungi attributo.
• Seleziona data- come nome.

Poi imposta:

• Etichetta amministratore: chiara (es. “CTA footer”).
• Elemento di destinazione: Modulo.
• Valore attributo: per esempio pulsante-cta-footer.

Poi replichi lo stesso schema in altre aree (sezione funzionalità, testimonianze, articoli del blog). Il tuo script di analisi legge questi “tag” e capisce quale pulsante riceve più clic.

La cosa bella è che l’attributo resta nell’HTML “in attesa”: non si vede nella pagina, non rovina i link, non ti costringe a inventarti elementi extra. Quando serve, il codice lo recupera.

Sfruttare al massimo gli attributi

Aggiungere attributi è utile, ma il vero salto di qualità arriva quando li testi e li tieni ordinati. Qui sotto trovi le buone pratiche che evitano gli errori classici (quelli che poi ti fanno perdere ore).

Testa prima con i lettori di schermo

Se vuoi capire davvero cosa sta succedendo, devi sentire la pagina “con le orecchie”.

Due strumenti comodi e diffusi:

• NVDA su Windows (gratuito)
• VoiceOver su Mac (integrato, quindi già disponibile)

Immagine da Apple.com

Fai così:

• Naviga la pagina con Tab.
• Ascolta come vengono annunciati gli elementi.
• Controlla che ciò che è interattivo venga riconosciuto come tale.
• Controlla che le etichette abbiano senso e siano coerenti.

Un caso tipico: un div “travestito” da pulsante. Se non è strutturato bene, il lettore di schermo lo annuncia come contenuto generico, non come pulsante.

Nota utile: ogni lettore di schermo interpreta il codice a modo suo. Testare sia NVDA sia VoiceOver ti copre la maggior parte delle situazioni reali. Se vuoi fare una prova lampo che ti apre gli occhi: spegni il monitor e prova a usare la pagina solo via audio.

Parti dalle pagine più importanti: moduli di contatto, menu, pagine prodotto e componenti interattivi personalizzati.

Tieni gli attributi ordinati

Quando il sito cresce, le convenzioni di naming (cioè “come dai i nomi”) fanno la differenza tra ordine e caos.

Consiglio pratico: usa minuscole e separa le parole con un trattino singolo.

• ✅ data-id-prodotto
• ❌ dataIdProdotto
• ❌ data_id_prodotto

Quando ha senso:

• raggruppa gli ARIA in modo coerente (stesso tipo di logica tra moduli simili);
• raggruppa i data-* con pattern simili (es. data-sezione, data-azione, data-cta).

E soprattutto: annota cosa fa ogni attributo personalizzato. Non serve un documento da 40 pagine: basta anche un file condiviso con due colonne, tipo:

• data-sezione-analisi → traccia i clic
• aria-controls → collega un pulsante a un pannello

Così, tra sei mesi, non vi trovate a dire “ma chi l’ha messo questo e perché?”.

Evita gli errori più comuni

Qui è dove la gente si fa male più spesso.

1) ARIA ridondante
Gli elementi HTML “semantici” hanno già ruoli integrati. Un <button> è già un pulsante: non ha bisogno di role="button". Aggiungere ARIA ridondante crea confusione nel codice.

2) Refusi (che rompono tutto)
Un lettore di schermo ignora attributi scritti male, tipo aria-lable invece di aria-label. Per lui è rumore e basta. Anche i valori di role devono essere in minuscolo per funzionare correttamente.

3) aria-hidden="true" su elementi raggiungibili da tastiera
Se imposti aria-hidden="true" su elementi che possono ricevere focus, succede un disastro: chi usa la tastiera ci arriva con Tab, ma il lettore di schermo non annuncia nulla.

Soluzione pratica: o togli l’elemento dall’ordine di tabulazione con tabindex="-1", oppure lo lasci visibile e gestisci l’accessibilità in modo coerente.

4) Strutture ARIA incomplete
Alcuni ruoli ARIA richiedono relazioni precise tra genitore e figli. Esempio: role="listbox" richiede che gli elementi figli usino role="option". Se rompi la struttura, il lettore di schermo può annunciare male o non annunciare nulla.

5) aria-label quando il testo visibile già descrive l’elemento
Se un pulsante ha già un testo chiaro, spesso non ti serve aria-label. Se invece lo usi, attenzione: non creare discrepanze. Chi usa il lettore di schermo sente una cosa, chi guarda la pagina ne vede un’altra. Se ti serve un’etichetta, usa lo stesso identico testo per tutti.

Esempi pratici (step by step) per lavoro reale

Freelance: rendere accessibile un pulsante solo con icona

Se usi un pulsante con sola icona (tipo “telefono” o “WhatsApp”), visivamente è chiaro, ma un lettore di schermo potrebbe annunciarlo in modo poco utile.

Passi:

1) Apri il Modulo Pulsante (o il modulo che contiene il link).
2) Vai su Avanzate > Attributi > Aggiungi attributo.
3) Seleziona aria-label e come valore scrivi ad esempio “Contattaci su WhatsApp”.
4) Testa con NVDA/VoiceOver: naviga con Tab e verifica che venga letto correttamente.

Piccolo e-commerce: tracciare i clic sui pulsanti “Aggiungi al carrello” in punti diversi

Se hai più call to action (in alto, a metà pagina, nel footer), puoi capire quale posizione converte meglio senza modificare testi o URL.

Passi:

1) Su ogni Modulo Pulsante, aggiungi un attributo data- con valore diverso (es. ‘cta-carrello-hero’, ‘cta-carrello-meta’, ‘cta-carrello-footer’).
2) Mantieni una convenzione coerente nei nomi (minuscole e trattini).
3) Collega il tuo sistema di analisi (o uno script) alla lettura di questi attributi per segmentare i clic per sezione.

Agenzie/PMI: standardizzare attributi con Preset di gruppo opzioni

Se gestisci tante landing o tante schede servizio, la coerenza è tutto.

Passi:

1) Definisci una configurazione “standard” per un tipo di modulo (es. pulsanti: aria-label + data- per tracking).
2) Salva la configurazione come Preset di gruppo opzioni.
3) Applica il preset a tutti i moduli simili e fai solo piccole modifiche ai valori dove necessario (per esempio cambiando il nome della sezione o del servizio).

Conclusione

Con gli Attributi personalizzati di Divi 5 puoi aggiungere ARIA (per rendere i contenuti più accessibili) e data-* (per tracciare e automatizzare) direttamente dal builder. Quindi: niente classi “incasinate”, niente soluzioni arrangiate, e soprattutto più controllo su accessibilità e misurazione.

Consiglio pratico: parti dalle pagine più visitate e dagli elementi più critici (menu, moduli, pulsanti). Aggiungi gli attributi e poi testa davvero con un lettore di schermo. Se vuoi impostare un flusso pulito (accessibilità + tracciamento) e non hai tempo di sperimentare, fatti affiancare da uno sviluppatore Divi di fiducia: spesso basta poco per fare le cose bene e non doverle rifare.

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