Accessibilità Web:
Capire gli attributi
ARIA-label + esempi

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 36

Data di pubblicazione: 29 Novembre 2022

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:

  1. aria-label
  2. aria-labelledby
  3. aria-describedby
  4. 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.