Integrare correttamente gli ARIA Labels può migliorare in pochi minuti l’accessibilità e la qualità SEO di qualsiasi sito web. Bastano pochi passaggi per rendere più chiaro il contenuto a screen reader e tecnologie assistive, senza alterare la struttura visiva della pagina.
Vediamo come farlo rapidamente con esempi concreti.
Cosa sono gli ARIA labels
Gli ARIA Labels sono attributi che permettono di aggiungere descrizioni testuali agli elementi HTML, rendendoli interpretabili anche da chi utilizza screen reader o altre tecnologie assistive.
Non si tratta di modificare la grafica o la struttura della pagina, ma di fornire un’informazione supplementare come attributo di elementi html già esistenti, informazione invisibile agli utenti vedenti ma fondamentale per chi naviga senza l’ausilio della vista.
I tre principali attributi da conoscere sono:
aria-label: assegna un’etichetta testuale diretta a un elemento.aria-labelledby: collega l’etichetta a un altro elemento presente nella pagina.aria-describedby: fornisce una descrizione più dettagliata, utile soprattutto nei moduli o nelle istruzioni complesse.
Guida pratica per implementare gli aria labels in 5 minuti
Per implementare correttamente gli ARIA Labels bastano pochi passaggi concreti. Ecco come procedere:
- Identifica l’elemento che necessita di un’etichetta accessibile, come un’icona, un pulsante, un normale div o un input di un modulo.
- Scegli l’attributo ARIA più adatto:
- Usa
aria-labelper fornire un testo descrittivo diretto. - Usa
aria-labelledbyse l’etichetta è già presente altrove nella pagina (tra poco lo spiegheremo meglio con una spiegazione più dettagliata) - Usa
aria-describedbyper aggiungere una descrizione estesa.
- Usa
- Aggiungi l’attributo al codice HTML.
Esempi pratici:
- Esempio con aria-label:
<button aria-label="Chiudi finestra">X</button>
- Esempio con aria-labelledby:
<label id="nome-etichetta">Nome</label>
<input type="text" aria-labelledby="nome-etichetta">
- Esempio con aria-describedby:
<input type="text" aria-describedby="nota-nome">
<span id="nota-nome">Inserisci il tuo nome completo</span>
- Verifica la corretta interpretazione usando uno screen reader o strumenti come le estensioni per l’accessibilità nei browser.
Quando usare l’attributo aria-labelledby
Quando usiamo aria-labelledby, non inseriamo direttamente il testo descrittivo dentro l’attributo, ma rimandiamo a un altro elemento HTML già presente nella pagina che funge da etichetta.
Quel testo esistente diventa la descrizione che il lettore di schermo leggerà.
Esempio pratico:
se hai un <label> o un <div> con un testo descrittivo già scritto, puoi collegarlo a un input o a un pulsante, invece di riscrivere il testo con aria-label.
👉 Quindi “se l’etichetta è già presente altrove” vuol dire se nella pagina esiste già un elemento che descrive il contenuto, e non serve duplicarlo.
Per rendertelo ancora più chiaro:
<label id="nome-label">Nome completo</label>
<input type="text" aria-labelledby="nome-label">
In questo caso il lettore di schermo leggerà “Nome completo” associato all’input, senza doverlo riscrivere manualmente nell’attributo aria-label.
