Capire gli attributi ARIA-label + esempi

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:

1. aria-label
2. aria-labelledby
3. aria-describedby
4. aria-description

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.

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”.

È 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.

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à.

Meglio non eccedere nell’uso di aria-labels; usiamo ARIA solo quando è utile, altrimenti si rischia l’effetto opposto.