Cosa sono gli attributi ARIA-label?
Sono valori che etichettano un elemento interattivo (button o input). In altre parole, sono informazioni utili che vengono riconosciute dallo Screen Reader e servono per creare un’esperienza d’uso simile a quella di chi non usa queste tecnologie. Quelli di cui vorrei parlare sono di 4 tipi:
- aria-label
- aria-labelledby
- aria-describedby
- aria-description
1. aria-label
Probabilmente è il più famoso. Possiamo usarlo:
- Quando un elemento interattivo non ha un nome accessibile;
- Quando un nome accessibile non è ottimale;
- Quando non c’è contenuto visibile (e utilizzabile) nel DOM.
Esempio: in un bottone senza testo possiamo usare aria-label per assegnare un’indicazione accessibile, riconoscibile solo dallo Screen Reader. È consigliato comunque aggiungere un testo visibile, così da non differenziare l’esperienza con e senza tecnologia assistiva.
2. aria-labelledby
Possiamo usarlo:
- Per creare il nome accessibile usando un altro elemento;
- L’altro elemento è da qualche parte nel DOM;
- Questo attributo ha la precedenza più alta quando il browser calcolai nomi accessibili.
Esempio: in una <section> che vogliamo trasformare in landmark accessibile, possiamo usare aria-labelledby per creare il nome usando un titolo introduttivo già presente. Basta usare l’attributo ID del titolo e collegarlo alla <section>. Abbiamo visto questo esempio nel post n. 35 (Ruba dai migliori siti web accessibili)..
Altro esempio: aria-labelledby è molto interessante perché consente la combinazione di più ID. Ad esempio, possiamo migliorare il link “read more” creando una label formata da titolo del link + titolo dell’articolo. Il risultato è: “read more How to use aria-labels”.
3. aria-describedby
È simile ad aria-labelledby. Possiamo usarlo:
- Per descrizioni più lunghe;
- Solo per testi, altrimenti è meglio usare aria-details.
Esempio: in un bottone di cancellazione possiamo usare aria-describedby per aggiungere un’informazione più estesa da collegare al bottone. Funziona come aria-describedby
4. aria-description
Non è ancora ben supportato, come spiega Darin Senneff nel suo articolo “aria-description crash course“. In ogni caso è un metodo fantastico perché mescola i vantaggi di aria-label con aria-labelledby. Se hai elementi utili nel DOM, meglio comunque usare aria-labelledby.
Esempio: label e description sono fuori dal DOM e vengono letti solo dallo Screen Reader. È comunque una formula molto pratica perché non richiede che i testi nel DOM siano funzionali all’accessibilità.
Regola finale
Meglio non eccedere nell’uso di aria-labels; usiamo ARIA solo quando è utile, altrimenti si rischia l’effetto opposto.