Introduzione
L’accessibilità web è diventata ormai un requisito irrinunciabile per realizzare interfacce inclusive e usabili da tutti. In questo contesto, gli attributi aria-label aria-hidden accessibilità giocano un ruolo centrale per fornire informazioni semantiche aggiuntive ai lettori di schermo. Da un lato, aria-label etichetta correttamente elementi privi di testo, dall’altro aria-hidden permette di ignorare contenuti puramente decorativi. Ma come usarli nel modo più efficace? In questo articolo approfondiamo i concetti chiave, con esempi pratici e best practice di implementazione.
aria-label aria-hidden accessibilità: panoramica sugli attributi ARIA
Gli attributi ARIA (Accessible Rich Internet Applications) sono stati introdotti per colmare le lacune semantiche dell’HTML, fornendo un layer aggiuntivo di informazioni ai dispositivi assistivi come gli screen reader. Due attributi particolarmente utili in questo senso sono:
- aria-label: fornisce un’etichetta testuale “invisibile” visivamente, ma letta dai lettori di schermo.
- aria-hidden: indica che un elemento deve essere ignorato dai dispositivi assistivi, se ritenuto non rilevante o puramente decorativo.
Approfondiremo ora quando e perché usarli, evidenziando in che modo contribuiscono all’accessibilità e a un’esperienza utente più inclusiva. Per ulteriori dettagli, puoi consultare anche le linee guida WAI-ARIA del W3C o la documentazione su MDN.
Differenza tra label visivo e label semantico
Label visivo
Il label visivo corrisponde al testo o all’elemento grafico che accompagna un controllo interattivo (come il testo di un pulsante). In molti casi, è sufficiente per chi vede il contenuto, ma potrebbe non essere fruibile da chi utilizza screen reader.
Label semantico
Il label semantico, invece, fornisce informazioni testuali specifiche ai lettori di schermo, consentendo di comprendere la funzione di un determinato elemento quando non è immediatamente intuibile dal contenuto visivo. Proprio qui entrano in gioco gli attributi aria-label e aria-labelledby, che rendono l’interfaccia più chiara per chi naviga senza percepire l’aspetto grafico.
Quando usare aria-label e aria-labelledby
- aria-label:
Usalo per fornire un’etichetta diretta in modo testuale. Ideale quando non esiste un testo visivo chiaro o l’elemento è rappresentato solo da un’icona. - aria-labelledby:
Usalo quando esiste già un testo visivo (ad esempio un<label>o un altro elemento di testo), e vuoi “collegarlo” semantemente all’elemento da descrivere attraverso l’ID. Eviti così duplicazioni e mantieni coerenza tra ciò che si vede e ciò che si “ascolta”.
Esempi pratici di codice
Bottone con icona (es. “Invia”)
<button type="button" aria-label="Invia il modulo">
<i class="fa fa-paper-plane"></i>
</button>In questo esempio, l’utente vede solo un’icona (un aereo di carta), mentre il lettore di schermo leggerà “Invia il modulo”, rendendo l’azione del bottone evidente.
Elemento decorativo da ignorare
<span class="decorative-icon" aria-hidden="true"></span>
Se l’icona è puramente estetica, aria-hidden="true" dice allo screen reader di saltarla, evitando ridondanze.
Labeling tramite un elemento già esistente (aria-labelledby)
<h2 id="formTitle">Contattaci</h2>
<form aria-labelledby="formTitle">
<!-- campi form -->
</form>Chi usa un lettore di schermo saprà che il form è descritto dal testo “Contattaci”. Un metodo efficace per mantenere coerenza semantica.
Errori comuni da evitare
- Nascondere contenuti importanti con aria-hidden
Se un testo è essenziale, non andrebbe mai etichettato comearia-hidden="true", pena la perdita di informazioni fondamentali. - Duplicare label
Impostare siaaria-labelchearia-labelledbysullo stesso elemento può creare confusione per gli utenti di screen reader. - Testi poco descrittivi
Searia-labelriporta un testo generico (“Bottone”) si perde l’occasione di comunicare la funzione reale (“Invia commento”, “Chiudi finestra” etc.). - Ignorare HTML semantico
ARIA non sostituisce i tag semantici (ad esempio<button>,<header>,<form>,<nav>, etc.). Usare correttamente HTML e, solo se serve, arricchirlo con ARIA.
Risorse interne e link utili
Per approfondire i concetti di semantica e accessibilità, ti consigliamo anche i seguenti articoli su CyberAlchimista:
- HTML Semantico: i tag essenziali per SEO
- Guida HTML5: Nuovi Tag e Funzionalità per un Web Moderno e Semantico
- Come Creare un Form di Contatto in HTML e CSS
E, per la documentazione ufficiale, fai riferimento a:
Conclusioni su aria-label aria-hidden accessibilità
Integrare aria-label aria-hidden accessibilità nei tuoi progetti vuol dire rendere il web più inclusivo e usabile per tutti. Aggiungere un semplice aria-label su un pulsante, o nascondere un’icona decorativa con aria-hidden, può fare un’enorme differenza per chi naviga con lettori di schermo. È essenziale adottare un approccio strategico e consapevole, testando regolarmente la resa di questi attributi con tecnologie assistive reali. Ricorda: la vera accessibilità non si riduce a un’aggiunta di “optional”, ma deve essere una parte integrante di ogni progetto frontend.
