aria-label vs aria-labelledby

Quando la denominazione nativa non basta, avete due strumenti ARIA: aria-label per una stringa inserita direttamente e aria-labelledby per fare riferimento a un testo esistente.

Usate aria-label quando non c'è testo visibile da riutilizzare. Inserite il nome pronunciato direttamente nell'elemento.

Usate aria-labelledby quando un testo visibile nella pagina può fungere da nome. Il suo valore è l'id di quell'elemento, non una stringa.

Usate prima aria-labelledby. Riutilizzare il testo visualizzato mantiene automaticamente sincronizzati il nome pronunciato e quello visibile.

Indicate diversi id separati da spazi in aria-labelledby e il browser unirà il loro testo, in quell'ordine, in un unico nome.

Se sono presenti entrambi, prevale aria-labelledby. Il browser ignora completamente aria-label, quindi non aspettatevi che vengano combinati.

Con aria-labelledby un elemento può fare riferimento al proprio id, una soluzione utile per assegnare a un'area il nome del testo della sua intestazione visibile.

Un aria-label non appare mai sullo schermo. Modifica solo ciò che annunciano le tecnologie assistive, quindi gli utenti vedenti non notano alcuna differenza.

Un aria-label è testo semplice che i traduttori delle pagine spesso ignorano, mentre labelledby riutilizza contenuti visibili che vengono tradotti.

L'id di aria-labelledby deve corrispondere a quello di un elemento reale. Un errore di battitura lascia silenziosamente l'elemento senza alcun nome calcolato.

Chiedetevi dove si trova il nome. Se è già visibile, usate aria-labelledby; se esiste solo per le tecnologie assistive, usate aria-label.

Avete imparato a usare aria-labelledby per il testo visibile già esistente e aria-label per i nomi inseriti direttamente e invisibili, senza mai aspettarvi che vengano combinati. 🎯