Cos'è
Un'etichetta codificata correttamente è testo esplicitamente collegato a un campo modulo specifico nel codice sottostante della pagina (tipicamente tramite un attributo for che corrisponde all'id del campo), così che uno screen reader annunci quell'etichetta nell'istante in cui un visitatore sposta il focus nel campo — "Indirizzo email, modifica testo", per esempio. Questo è un requisito più rigoroso e tecnico rispetto ad avere semplicemente un testo simile a un'etichetta visibile da qualche parte vicino al campo, che è l'angolazione trattata nella nostra guida generale sull'etichettatura dei campi modulo focalizzata sui tassi di conversione.
Un campo può apparire perfettamente etichettato a un visitatore vedente (testo posizionato proprio accanto alla casella) pur non avendo alcuna connessione codificata reale tra quel testo e il campo — che è esattamente la lacuna che questo controllo focalizzato sull'accessibilità sta cercando.
Perché è importante
Uno screen reader non vede il layout visivo di una pagina — legge la struttura di codice sottostante, quindi un'etichetta che è solo visivamente vicina a un campo ma non esplicitamente collegata ad esso nel codice potrebbe non essere mai annunciata quando un utente di screen reader raggiunge quel campo. Senza sentire a cosa serve un campo, sono lasciati a indovinare o a saltarlo completamente, il che può significare che un utente di screen reader semplicemente non riesce a completare un modulo che un visitatore vedente trova perfettamente semplice.
Questo è uno dei requisiti più consolidati e specificamente nominati nelle WCAG (le linee guida standard per l'accessibilità che molte organizzazioni devono rispettare legalmente), proprio perché i moduli sono così centrali per completare effettivamente un'attività sul web — iscriversi, fare il checkout, mettersi in contatto.
Come risolverlo
- Per ogni campo del modulo, aggiungi un elemento
<label>con un attributoforche corrisponda esattamente all'attributoiddi quel campo. - In alternativa, avvolgi direttamente il campo dentro il tag
<label>stesso, il che crea la stessa connessione esplicita senza bisogno di ID corrispondenti. - Per un campo senza alcuna etichetta visibile intenzionalmente (un campo con solo un'icona di ricerca, per esempio), usa
aria-label="Cerca"direttamente sul campo così uno screen reader annuncia comunque il suo scopo. - Evita di affidarti solo al testo segnaposto come sostituto di una vera etichetta — gli screen reader gestiscono il testo segnaposto in modo incoerente, e comunque scompare una volta inserito il testo.
- Testa navigando il tuo modulo con solo la tastiera e uno screen reader gratuito (NVDA, VoiceOver) per confermare che ogni campo annunci uno scopo chiaro.