Etichetta nel nome

Cosa richiede

Se un pulsante riporta «Invia la domanda» sullo schermo, un utente del controllo vocale dovrebbe poter dire «clic su Invia la domanda» e il clic dovrebbe andare a segno. Questo funziona solo quando l’etichetta visibile è contenuta nel nome accessibile — preferibilmente come prime parole. Se il nome accessibile è «Spedisci il modulo» mentre il testo visibile dice «Invia la domanda», il comando vocale fallisce in silenzio.

WCAG richiede che il testo dell’etichetta visibile faccia parte del nome accessibile. Il nome accessibile può includere altro (contesto aggiuntivo), ma il testo visibile deve essere presente, con lo stesso ordine delle parole.

Come soddisfarlo

• Per pulsanti e link con testo, non occorre fare nulla di speciale — il contenuto testuale diventa automaticamente il nome accessibile.
• Quando si aggiunge aria-label a un controllo che già dispone di testo visibile, includere il testo visibile all’inizio: <button aria-label="Invia la domanda — si apre la conferma">Invia la domanda</button>.
• Per i pulsanti con icona e testo, lasciare che il testo determini il nome. Non sovrascriverlo con un aria-label riferito alla sola icona.
• Per i link il cui testo recita «Leggi di più», estendere il nome accessibile con aria-label="Leggi di più su WCAG 2.2 — articolo completo", in modo che il «Leggi di più» visibile rimanga comunque come prefisso.
• Quando l’etichetta visibile di un controllo è un’immagine (icona con sovrapposizione testuale, logo), assicurarsi che il testo alternativo corrisponda esattamente al testo visibile.

Errori frequenti

• Un pulsante con la scritta «Cerca» e aria-label="Trova". Gli utenti vocali dicono «clic su Cerca» e non ottengono risposta.
• Pulsanti «Aggiungi al carrello» con aria-label="Aggiungi la T-shirt blu taglia M al tuo carrello della spesa" — il nome è prolisso e il testo visibile «Aggiungi al carrello» non è più il prefisso. Il comando vocale «clic su Aggiungi al carrello» non trova corrispondenza.
• Pulsanti icona-e-testo in cui il designer ha aggiunto aria-label="icona carrello" e ha sovrascritto il testo visibile «Checkout».
• Siti localizzati in cui il testo visibile è stato tradotto ma l’aria-label è ancora in inglese.
• Pulsanti di azione flottanti che mostrano «Chat» visivamente ma portano aria-label="Apri il widget di assistenza".

Perché è importante

Questo è il criterio di successo che tutela l’accessibilità per gli utenti del controllo vocale — persone che utilizzano Dragon NaturallySpeaking, Controllo vocale su iOS/macOS, Accesso vocale su Android o Riconoscimento vocale di Windows. Per questi utenti, l’etichetta visibile è il comando. Una mancata corrispondenza non è un piccolo inconveniente: è la differenza tra un controllo utilizzabile e uno inaccessibile. Aiuta anche gli utenti di screen reader a seguire la conversazione quando un assistente vedente dice «clic sul pulsante Salva» — l’annuncio corrisponde alle parole sullo schermo. Il criterio 2.5.3 è facile da correggere e facile da trascurare, perché gli strumenti automatici raramente lo segnalano: uno sviluppatore che legge il codice vede un aria-label e lo ritiene sufficiente. Verificare sempre il nome accessibile rispetto al testo visibile.