Introduzione all’accessibilità nel frontend
L’accessibilità nel frontend è un pilastro fondamentale per creare esperienze web inclusive. Garantire che una persona con disabilità possa accedere e interagire correttamente con i contenuti significa rispettare standard come le WCAG 2.1 del W3C e, al contempo, migliorare l’usabilità generale dell’interfaccia.
Attributi ARIA (Accessible Rich Internet Applications) come aria-labelledby permettono di descrivere meglio gli elementi interattivi a lettori di schermo e tecnologie assistive, migliorando così la navigazione e la comprensione dei contenuti dinamici. In passato abbiamo parlato dell’attributo complementare aria-label — in questo articolo approfondiamo invece l’uso efficiente di aria-labelledby.
Cosa è aria-labelledby?
aria-labelledby è un attributo ARIA che collega un elemento a uno o più identificatori (id) di altri elementi che forniscono la sua etichetta descrittiva. In pratica, il valore fornito a aria-labelledby punta a un testo esistente nel DOM, evitando duplicazioni e garantendo coerenza semantica.
<label id="nome-label" for="nome">Nome completo</label>
<input id="nome" type="text" aria-labelledby="nome-label" />
In questo esempio, il campo di input eredita la descrizione da #nome-label. Quando un lettore di schermo legge il campo, pronuncia correttamente: “Nome completo, campo di testo”.
Vantaggi dell’utilizzo di aria-labelledby
- Evita testi ridondanti: riutilizza un’etichetta presente nel DOM invece di duplicarla con
aria-label. - Migliora la manutenzione: se il testo dell’etichetta cambia, il riferimento resta coerente.
- Gestione dinamica più semplice: utile per componenti generici o generati da framework come React e Vue.
- Compatibilità migliore: supportato dalla maggior parte delle tecnologie assistive moderne.
Best practices per implementare aria-labelledby
Implementare aria-labelledby non significa solo aggiungere l’attributo: è necessario farlo in modo consapevole, rispettando il contesto semantico e la struttura della pagina.
1. Riferire sempre a elementi visibili e significativi
Evita di usare aria-labelledby per riferirti a elementi nascosti (ad esempio con display: none) o non testualmente comprensibili. Il contenuto referenziato deve essere visibile e coerente per tutti gli utenti.
2. Combinare più etichette
Puoi combinare più identificatori separandoli con uno spazio:
<h2 id="modal-title">Conferma eliminazione</h2>
<p id="modal-desc">Questa azione non può essere annullata.</p>
<div role="dialog" aria-labelledby="modal-title modal-desc">
...
</div>
In questo modo, il lettore di schermo leggerà il titolo e la descrizione, fornendo un contesto completo. Tecniche simili sono comuni quando si costruiscono interfacce accessibili con ARIA e microinterazioni.
3. Evitare conflitti con aria-label
Non usare contemporaneamente aria-labelledby e aria-label sullo stesso elemento. Il primo ha priorità, ma mantenere entrambi può generare ambiguità. Se serve un’etichetta statica, usa solo aria-label. Se vuoi collegare testi dinamici o già esistenti nel DOM, preferisci aria-labelledby.
4. Integrare con i ruoli semantici corretti
L’attributo deve sempre essere coerente con il role dell’elemento. Ad esempio, in un role="button", la label deve chiarire l’azione, non solo il contenuto.
5. Gestione dinamica in JavaScript
In applicazioni dinamiche, come componenti personalizzati o Web Components, è comune assegnare o aggiornare le etichette via script.
// Associa dinamicamente l'etichetta a un elemento custom
const input = document.querySelector('#username');
const label = document.querySelector('#username-label');
if (input && label) {
input.setAttribute('aria-labelledby', label.id);
}
Questo approccio è utile anche quando i componenti vengono caricati in runtime o generati da un template.
Checklist per controllare la correttezza dell’uso
- Hai utilizzato
aria-labelledbysolo quando non puoi usare<label>nativi? - Gli identificatori puntano a elementi realmente esistenti nel DOM?
- L’etichetta è visibile o semanticamente valida per l’utente?
- Non sono presenti conflitti con
aria-label? - Hai testato il comportamento con almeno un lettore di schermo (VoiceOver, NVDA, JAWS)?
- La descrizione risultante è utile a comprendere lo scopo dell’elemento?
- Le etichette vengono aggiornate correttamente nei componenti dinamici?
Esempi pratici di implementazione
Esempio 1: pulsante con descrizione contestuale
<p id="delete-desc">Elimina definitivamente il file selezionato</p>
<button aria-labelledby="delete-desc">Elimina</button>
Il lettore di schermo annuncerà “Elimina definitivamente il file selezionato, pulsante”, fornendo un contesto chiaro. È simile all’approccio consigliato nel nostro articolo su componenti UI accessibili.
Esempio 2: gestione in un componente React
function CampoForm({ id, label }) {
const labelId = `${id}-label`;
return (
<div>
<span id={labelId}>{label}</span>
<input id={id} type="text" aria-labelledby={labelId} />
</div>
);
}
Componenti come questo sono alla base di un buon design system per microfrontends, dove la consistenza semantica e visiva è fondamentale.
Esempio 3: form dinamico con aggiornamento via JS
function aggiornaEtichetta(idInput, idNuovaLabel) {
const input = document.getElementById(idInput);
const nuovaLabel = document.getElementById(idNuovaLabel);
if (input && nuovaLabel) {
input.setAttribute('aria-labelledby', nuovaLabel.id);
}
}
// Cambio dinamico di etichetta per una modale
aggiornaEtichetta('email-user', 'email-label');
Questo pattern è comune negli applicativi complessi o nei widget interattivi con Web Components.
Strumenti per testare l’accessibilità
Per verificare la correttezza dell’uso di aria-labelledby, puoi utilizzare vari tool:
- AXE DevTools – un’estensione browser che segnala errori di semantica e uso improprio delle ARIA.
- Lighthouse – integrato in Chrome DevTools, utile per valutare il punteggio di accessibilità.
- NVDA / VoiceOver – fondamentali per testare l’esperienza utente reale.
- Storybook con add-on accessibility – test di accessibilità automatizzati per componenti, come descritto in Testare Componenti Web con Storybook e Jest.
Conclusioni e risorse utili
L’attributo aria-labelledby è un potente alleato nello sviluppo di interfacce accessibili e inclusive. Implementarlo correttamente significa non solo migliorare l’esperienza per utenti con disabilità, ma anche investire in qualità, chiarezza e robustezza del codice front-end. Quando combinato con altre tecniche ARIA e componenti ben progettati, diventa parte integrante di un ecosistema accessibile e professionale.
Risorse consigliate:
