Etichettatura con l'attributo title

Silktide controlla i pulsanti e i link nelle tue pagine per individuare i controlli che dipendono dall'attributo title per spiegare cosa fanno. I browser mostrano title solo come descrizione comando ritardata quando il puntatore del mouse passa sopra l'elemento, quindi la maggior parte delle persone non la vede mai.

<!-- Problema: la descrizione comando è l'unica etichetta -->
<button title="Close"><svg>…</svg></button>

<!-- Soluzione: assegna al controllo un nome accessibile reale -->
<button aria-label="Close"><svg>…</svg></button>

Perché è importante

Una descrizione comando title appare solo per gli utenti del mouse e solo dopo un ritardo. Gli utenti della tastiera, gli utenti di dispositivi touch e mobili e la maggior parte degli utenti di non la ricevono mai, quindi un controllo etichettato solo tramite title è un pulsante misterioso per una grande parte dei tuoi visitatori. I lettori di schermo gestiscono inoltre title in modo non uniforme: alcuni lo leggono, altri lo ignorano. Questo lo rende inaffidabile anche per gli utenti a cui dovrebbe servire.

Quando un controllo ha sia un title sia un diverso, il problema è la coerenza: un utente del mouse vede brevemente una descrizione, mentre un utente di una tecnologia assistiva ne sente un'altra, e le due descrizioni si allontanano ulteriormente man mano che la pagina viene aggiornata.

Come risolvere il problema

Assegna al controllo un'etichetta appropriata: testo visibile quando possibile, oppure un attributo aria-label di (o aria-labelledby che punti a testo esistente) per i controlli composti solo da icone.
Se il controllo ha sia un title sia un aria-label che non concordano, scegli la formulazione più utile e usala ovunque. Di solito, la soluzione più semplice è eliminare title e lasciare che aria-label fornisca la descrizione.
Mantieni title solo per informazioni aggiuntive realmente utili. Non deve mai essere l'unico modo per capire cosa fa un controllo.

Come Silktide esegue questo controllo

Individua i pulsanti, i link e i controlli di divulgazione visibili in ogni pagina, inclusi gli elementi con role="button" o role="link".
Per ogni controllo con un attributo title non banale, controlla se dispone di un'altra etichetta: testo visibile, di un'immagine, aria-label o aria-labelledby.
Segnala i controlli la cui unica etichetta è l'attributo title.
Quando un controllo ha sia un title sia un aria-label o aria-labelledby esplicito, confrontali e segnalali quando esprimono concetti sostanzialmente diversi. Se uno si limita a estendere l'altro (un title di "Search" con un nome di "Search now"), non viene segnalato.

I campi dei moduli come <input> e <select> non vengono testati da questo controllo; la loro etichettatura è trattata da etichette dei controlli dei moduli.

Risoluzione dei problemi

L'attributo title è obbligatorio sugli iframe

Corretto: title su un <iframe> è il modo standard per assegnargli un nome e questo controllo non testa gli iframe. Testa solo i controlli interattivi come pulsanti e link.

La mia descrizione comando aggiunge informazioni utili

È un uso legittimo, purché il controllo disponga anche di un'etichetta reale. Questo controllo segnala solo i controlli in cui title è l'unica etichetta o contraddice il nome accessibile.