Etichetta nel nome

Silktide confronta il testo visibile ai visitatori su pulsanti e collegamenti con il nome che la tecnologia assistiva utilizza per lo stesso controllo. Quando i due elementi non corrispondono, le persone che utilizzano i siti web tramite comandi vocali non possono attivare il controllo pronunciando ciò che vedono.

Perché è importante

Gli utenti del riconoscimento vocale guardano lo schermo e pronunciano ciò che vedono: "fai clic su Invia". Il software confronta queste parole con il di ciascun controllo, ovvero il nome utilizzato dalla . Attributi come aria-label sostituiscono quel nome, quindi un pulsante che mostra "Invia" ma ha l'etichetta aria-label="Submit" risponde solo a "fai clic su Submit". La parola visibile non produce alcuna risposta e l'utente non ha modo di scoprire il nome nascosto che avrebbe dovuto pronunciare.

Questa mancata corrispondenza confonde anche gli utenti dei che lavorano con colleghi vedenti e sentono un nome diverso da quello che vede la persona accanto a loro.

Questo è il criterio di successo 2.5.3 di (Etichetta nel nome), un requisito di , ovvero parte del livello di conformità più basilare.

Come risolvere il problema

Rimuovi l'override quando non aggiunge nulla: un pulsante il cui testo visibile indica già la sua funzione non ha bisogno di aria-label.
Quando l'override aggiunge contesto, inizia con il testo visibile: aria-label="Leggi di più sui prezzi" per un collegamento "Leggi di più" mantiene funzionante il comando vocale.
Non usare mai aria-label per esprimere qualcosa di diverso dal testo visibile.

<!-- Problema: dice "Invia" ma risponde a "Submit" -->
<button aria-label="Submit">Invia</button>

<!-- Soluzione: il testo visibile è incluso nel nome accessibile -->
<button aria-label="Invia messaggio">Invia</button>

<!-- Soluzione più semplice: nessun override -->
<button>Invia</button>

Come Silktide esegue il controllo

Trova i pulsanti e i collegamenti visibili su ogni pagina, inclusi gli elementi con un ruolo ARIA button o link.
Esegue il controllo solo sui controlli che sovrascrivono il proprio nome con aria-label o aria-labelledby: senza un override, il testo visibile è il nome accessibile e il criterio è automaticamente soddisfatto.
Legge l'etichetta visibile del controllo: il suo contenuto testuale più il di eventuali immagini al suo interno. Le etichette più brevi di 2 caratteri vengono ignorate, così come i controlli con un nome accessibile vuoto (un problema distinto trattato da altri controlli).
Normalizza entrambe le stringhe, convertendo le lettere in minuscolo, compattando gli spazi e rimuovendo la punteggiatura decorativa, quindi verifica che l'etichetta visibile compaia nel nome accessibile.
Per i collegamenti in stile scheda che contengono un'intestazione e un testo di supporto, accetta invece l'intestazione come etichetta, poiché è il testo che un visitatore pronuncerebbe naturalmente.

Risoluzione dei problemi

Il nome accessibile è più lungo del testo visibile

Non è un problema, purché il testo visibile compaia al suo interno. WCAG raccomanda che il nome accessibile inizi con il testo visibile, ma qualsiasi posizione è sufficiente per superare questo controllo.

I campi dei moduli non vengono controllati

Gli input di testo e gli altri campi dei moduli ricavano la propria etichetta visibile da un elemento <label> anziché dal proprio testo, quindi sono trattati da controlli di etichettatura separati e non da questo controllo.