Proprietà Relazione

`aria-label`

Fornisce un nome accessibile come stringa quando non è disponibile testo visibile. Si utilizza solo in assenza di un'etichetta a schermo — se esiste del testo visibile, è preferibile aria-labelledby in modo che il nome annunciato corrisponda a ciò che l'utente vede.

Quando utilizzarlo

Quando un controllo non ha testo visibile — pulsanti con sola icona, campi di ricerca con solo un’icona a lente di ingrandimento, pulsanti di chiusura (×), icone di link verso i social media. La stringa inserita in aria-label diventa il nome accessibile dell’elemento, e gli screen reader la annunciano al posto di qualsiasi testo interno.

L’equivalente HTML nativo è l’elemento <label> per gli input di modulo, o il testo visibile di un pulsante. Si ricorre ad aria-label solo quando nessuna delle due opzioni è praticabile.

Come si comporta

Accetta una singola stringa. Il valore di aria-label sovrascrive qualsiasi testo visibile all’interno dell’elemento — il nome accessibile è ciò che gli utenti di tecnologie assistive sentono, ma è invisibile agli utenti vedenti. Questa asimmetria è la causa della maggior parte degli errori legati a questo attributo.

La stringa non viene tradotta automaticamente. Se il sito supporta più lingue, il valore di aria-label deve essere localizzato come qualsiasi altra stringa dell’interfaccia. Gli screen reader trattano il valore come testo normale — niente HTML, né interruzioni di riga, né markup.

Se l’elemento contiene testo visibile, è preferibile usare aria-labelledby puntando a quel testo, in modo che l’etichetta visibile e il nome accessibile rimangano sincronizzati.

Errori comuni

Inserire aria-label="Clicca qui" su un pulsante che già riporta «Invia ordine» — il testo visibile è ora nascosto alla tecnologia assistiva e l’utente sente la cosa sbagliata.
Violare il criterio di successo WCAG 2.5.3 Label in Name: aria-label="Invia" su un pulsante il cui testo visibile recita «Manda l’ordine» significa che un utente con controllo vocale non può dire «clicca Manda l’ordine» per azionarlo.
Aggiungere aria-label a un elemento non interattivo come un <div> o uno <span> — la maggior parte dei browser lo ignora perché l’elemento non ha un role che supporta un nome.
Lasciare il valore non tradotto quando il resto della pagina è in un’altra lingua.
Usare aria-label al posto di un vero <label> su un campo di modulo, eliminando la possibilità di mettere a fuoco il campo cliccando sull’etichetta.
Inserire istruzioni in aria-label invece di usare aria-describedby. Il nome deve essere breve; il testo di aiuto appartiene alla descrizione.

Esempio

<!-- Pulsante con sola icona: nessun testo visibile, aria-label è obbligatorio -->
<button type="button" aria-label="Chiudi finestra di dialogo">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Testo visibile + icona: NON usare aria-label qui -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Chiudi finestra di dialogo
</button>