Ti è mai capitato di chiederti come fanno le persone non vedenti a navigare sul tuo sito web? La risposta sta in una serie di attributi HTML che rendono i contenuti comprensibili agli screen reader, i lettori di schermo. Tra questi, gli attributi aria-label sono fondamentali.
Quando lavoro sui progetti dei miei clienti, mi rendo conto che l’accessibilità web viene ancora vista come un optional. Ma non lo è: è un diritto. E gli ARIA label sono uno degli strumenti più semplici ed efficaci per rendere il tuo sito davvero inclusivo.
Cosa sono gli attributiARIA label
Gli ARIA label sono attributi HTML che forniscono etichette testuali alternative agli elementi della pagina. In pratica, danno un nome comprensibile a quegli elementi che visivamente sono chiari, ma che uno screen reader non riuscirebbe a interpretare correttamente.
Facciamo un esempio concreto: hai un’icona con una “X” per chiudere un popup. Tu vedi la X e capisci subito che serve a chiudere. Ma uno screen reader? Leggerebbe solo “pulsante” o, nel peggiore dei casi, “immagine”. Con un ARIA label impostato su “Chiudi finestra”, invece, la persona che usa lo screen reader sa esattamente cosa fa quel pulsante.
Gli attributi ARIA (Accessible Rich Internet Applications) sono stati sviluppati dal W3C per migliorare l’accessibilità delle applicazioni web dinamiche. L’ARIA-label è uno dei più utilizzati perché permette di descrivere elementi che altrimenti resterebbero “muti” per chi usa tecnologie assistive.
Perché sono importanti per l’accessibilità
In Italia ci sono circa 1,7 milioni di persone con disabilità visive (1,5 milioni di ipovedenti e 220.000 ciechi), secondo i dati ISTAT 2019 rilanciati dal Ministero della Salute. E nel mondo parliamo di centinaia di milioni. Ogni volta che non imposti correttamente gli ARIA label, stai potenzialmente escludendo una fetta enorme di utenti dal tuo sito.
Ma c’è un altro aspetto che spesso sottovalutiamo: ll’accessibilità web può avere effetti positivi anche sul posizionamento SEO, perché migliora la struttura e l’esperienza utente. Google non considera l’accessibilità come fattore diretto di ranking, ma una migliore usabilità spesso porta benefici indiretti anche alla SEO.
E poi c’è la questione legale. In Europa, la Direttiva UE 2016/2102 richiede che i siti web delle pubbliche amministrazioni siano accessibili, mentre l’European Accessibility Act estenderà questi requisiti anche al settore privato a partire dal 28 giugno 2025.
Come funzionano tecnicamente
Gli ARIA label si inseriscono come attributo HTML in questo modo:
<button aria-label="Chiudi finestra">×</button>
Quando uno screen reader incontra questo pulsante, invece di leggere solo il simbolo “×”, leggerà “Chiudi finestra, pulsante”. Semplice, no?
La differenza tra aria-label e altri attributi simili:
- aria-label: crea un’etichetta che sostituisce completamente il testo visibile
- aria-labelledby: collega l’elemento a un altro elemento della pagina che funge da etichetta
- aria-describedby: fornisce una descrizione aggiuntiva, non sostituisce l’etichetta principale
- title: crea un tooltip al passaggio del mouse, ma non è affidabile per l’accessibilità
Quando usare gli ARIA label
Non devi metterli dappertutto. Anzi, usarli troppo può creare confusione. Ecco quando sono davvero necessari:
Icone senza testo: il caso più comune. Hai un’icona di hamburger menu? Serve l’ARIA label “Menu di navigazione”. Un cuoricino per aggiungere ai preferiti? “Aggiungi ai preferiti”.
Pulsanti con sole immagini: se il tuo pulsante contiene solo un’immagine decorativa, l’ARIA label diventa essenziale per spiegare cosa fa.
Link generici: evita link con scritto solo “clicca qui” o “leggi di più”. Se proprio devi usarli, aggiungi un ARIA label descrittivo tipo “Leggi di più sull’accessibilità web”.
Form complessi: quando hai campi di ricerca o form dove l’etichetta visibile non è sufficiente.
Elementi interattivi personalizzati: slider, toggle, accordion… tutto ciò che esce dagli elementi HTML standard ha bisogno di ARIA label chiari.
Come impostare gli ARIA label su WordPress con Elementor
Veniamo al dunque: come si fa praticamente su Elementor? Te lo spiego passo passo.
Per i widget nativi di Elementor
Elementor non ha un campo dedicato per gli ARIA label nella maggior parte dei widget, ma puoi usare gli attributi personalizzati. Il formato richiesto è key|value, dove devi separare la chiave dal valore usando il carattere pipe “|”.
Passaggio 1: Seleziona l’elemento a cui vuoi aggiungere lARIA label (per esempio un’icona).
Passaggio 2: Vai nella tab “Avanzate” nel pannello di sinistra.
Passaggio 3: Scorri fino a trovare la sezione “Attributi personalizzati”.
Passaggio 4: Nel campo che appare, scrivi:
aria-label|Descrizione chiara dell'elemento
Per esempio, se hai un’icona di Facebook:
aria-label|Seguici su Facebook
Passaggio 5: Pubblica o aggiorna la pagina e verifica con uno screen reader o con l’ispettore del browser che l’attributo sia stato aggiunto correttamente.
Attenzione: limitazione importante con i pulsanti
In Elementor c’è una limitazione nota: quando aggiungi aria-label negli attributi personalizzati di un widget pulsante, l’attributo viene applicato al div contenitore e non al tag link vero e proprio.
Per i pulsanti, la soluzione migliore è usare gli attributi personalizzati del link stesso:
Passaggio 1: Seleziona il widget pulsante.
Passaggio 2: Nel campo “Link”, clicca sull’icona dell’ingranaggio.
Passaggio 3: Nel campo “Attributi personalizzati” che appare, aggiungi l’ARIA label usando il formato key|value:
aria-label|Scopri i nostri servizi di accessibilità
Per il menu di navigazione
Il menu è uno degli elementi più importanti da rendere accessibile. Con Elementor:
Passaggio 1: Aggiungi il widget “Menu di navigazione”.
Passaggio 2: Vai su Avanzate > Attributi personalizzati.
Passaggio 3: Aggiungi:
aria-label|Menu di navigazione principale
Se hai più menu nella stessa pagina (uno principale e uno nel footer, per esempio), differenziali:
aria-label|Menu footer
Per icone e pulsanti social
Le icone social sono un classico: tutti le riconoscono visivamente, ma per uno screen reader sono incomprensibili.
Passaggio 1: Seleziona il widget “Icone social”.
Passaggio 2: Per ogni singola icona, clicca sull’icona nella lista.
Passaggio 3: Vai su Avanzate > Attributi personalizzati di quella specifica icona.
Passaggio 4: Aggiungi:
aria-label|Seguici su Instagram
Ripeti per ogni social network. Sì, è un lavoro manuale, ma ne vale la pena.
Per moduli e form
I form sono particolarmente critici per l’accessibilità. Se usi Elementor Pro con il widget Form:
Passaggio 1: Aggiungi il widget “Modulo”.
Passaggio 2: Per ogni campo, Elementor genera automaticamente le label. Assicurati che siano sempre visibili e descrittive.
Passaggio 3: Per il pulsante di invio, usa gli attributi personalizzati del link (come spiegato sopra per i pulsanti) e aggiungi:
aria-label|Invia il modulo di contatto
Per slider e carousel
Gli slider sono elementi complessi da rendere accessibili.
Passaggio 1: Seleziona il widget dello slider.
Passaggio 2: Aggiungi negli attributi personalizzati:
aria-label|Galleria di immagini dei nostri progetti
Passaggio 3: Per i pulsanti di navigazione (frecce avanti/indietro), la situazione è più complessa. Elementor non permette facilmente di aggiungere ARIA label ai controlli dello slider. Potresti aver bisogno di CSS personalizzato o JavaScript, oppure considerare l’uso di un plugin dedicato all’accessibilità.
Plugin utili per gestire l’accessibilità su WordPress
Lavorare solo con Elementor può essere limitante per l’accessibilità. Ti consiglio questi plugin che ho testato personalmente:
Ally (ex One Click Accessibility): questo plugin è stato recentemente rinominato da “One Click Accessibility” ad “Ally” ed è ora gestito da Elementor. Aggiunge una toolbar di accessibilità sul tuo sito e include uno strumento di scansione per identificare problemi. Attenzione però: il plugin ora richiede un account Elementor e ha funzionalità più limitate rispetto alla versione precedente.
WP Accessibility: risolve automaticamente diversi problemi comuni di accessibilità nei temi WordPress. È gratuito, ha oltre 40.000 installazioni attive e mantiene un rating perfetto di 5 stelle. Non sostituisce il lavoro manuale sugli ARIA label, ma è un ottimo punto di partenza.
La mia raccomandazione? Usa WP Accessibility insieme al lavoro manuale con gli attributi personalizzati di Elementor. È il compromesso migliore tra facilità d’uso e controllo preciso.
Come verificare che gli ARIA label funzionino
Impostare gli ARIA label è solo metà del lavoro. Devi anche verificare che funzionino davvero.
Usa l’ispettore del browser: tasto destro sull’elemento, “Ispeziona elemento”, e controlla nel codice HTML che l’attributo aria-label sia presente e corretto.
Prova con uno screen reader: NVDA (gratuito per Windows) e JAWS sono tra i lettori di schermo più diffusi, mentre su Mac puoi usare VoiceOver già integrato nel sistema. Attivali e naviga il tuo sito come farebbe un utente non vedente.
Strumenti automatici:
- WAVE (Web Accessibility Evaluation Tool)
- AXE DevTools (estensione del browser)
- Lighthouse di Chrome (integrato negli strumenti per sviluppatori)
Test manuale con tastiera: prova a navigare il tuo sito usando solo la tastiera (tasto Tab). Se riesci a raggiungere tutti gli elementi interattivi e capisci sempre dove sei, è un buon segno.
Errori comuni da evitare
Dopo anni di lavoro sull’accessibilità, ho visto sempre gli stessi errori. Eccone alcuni che puoi evitare subito:
ARIA label troppo generici: scrivere “pulsante” o “link” non aiuta nessuno. Sii specifico: “Scarica il PDF della guida”.
Duplicare informazioni già visibili: se hai un pulsante con scritto “Contattaci”, non serve aggiungere aria-label=”Contattaci”. Lo screen reader leggerebbe due volte la stessa cosa.
Usare ARIA label su elementi che hanno già un testo: per esempio, un paragrafo normale non ha bisogno di aria label. Usa ARIA label solo quando manca un’etichetta testuale.
Descrivere l’aspetto invece della funzione: non scrivere “icona blu rotonda”, ma “apri menu”.
Dimenticare la lingua: se il tuo sito è in italiano ma usi ARIA label in inglese, crei confusione. Mantieni la coerenza linguistica.
Ignorare la limitazione dei pulsanti in Elementor: ricorda che per i pulsanti devi usare gli attributi personalizzati del link, non del widget.
L’accessibilità va oltre gli ARIA label
Gli ARIA label sono importanti, ma l’accessibilità è un puzzle più grande. Ecco altre cose a cui devi pensare:
Contrasto dei colori: le linee guida WCAG 2.1 richiedono un rapporto di contrasto minimo di 4.5:1 per il testo normale e 3:1 per il testo grande. Usa strumenti come WebAIM Contrast Checker.
Navigazione da tastiera: tutti gli elementi interattivi devono essere raggiungibili con Tab, Invio e le frecce.
Testi alternativi per le immagini: ogni immagine con contenuto informativo deve avere un alt text descrittivo.
Struttura dei titoli: usa H1, H2, H3 in modo gerarchico e logico. Gli screen reader li usano per navigare rapidamente.
Focus visibile: quando navighi con la tastiera, devi sempre vedere chiaramente quale elemento è selezionato.
Conclusione
Gli ARIA label sono un piccolo dettaglio tecnico che fa una differenza enorme per milioni di persone. Con Elementor non è immediato come vorremmo, ma con gli attributi personalizzati puoi raggiungere un buon livello di accessibilità.
Il mio consiglio? Inizia oggi stesso. Scegli una pagina importante del tuo sito, magari la homepage o la pagina contatti, e aggiungi gli ARIA label a tutti gli elementi che ne hanno bisogno. Ricorda la limitazione dei pulsanti e usa la soluzione corretta. Poi testa con uno screen reader.
Ti accorgerai che non è così complicato. E sapere che stai rendendo il tuo sito web accessibile a tutti, nessuno escluso, ti darà una soddisfazione che nessun altro miglioramento tecnico può dare.
