Un campo modulo senza un'etichetta correttamente collegata è l'errore più comune che riscontriamo nei moduli di contatto, nei processi di acquisto e nelle schermate di accesso. L'etichetta è spesso presente, visivamente ben posizionata sopra o accanto al campo di input, ma nel codice sorgente non è collegata a quel campo. Uno screen reader legge il campo come "modifica, vuoto" senza spiegare a cosa serve.
Il problema sorge solitamente perché un'etichetta e un campo di input sono visivamente associati, ma il programmatore (o il sistema di costruzione) non ha stabilito una relazione tecnica tra i due. Per un utente vedente non rappresenta un problema: vede semplicemente l'etichetta. Per chi utilizza uno screen reader, questa vicinanza visiva non esiste. Ciò che conta è il collegamento nel codice, e questo manca più spesso di quanto ci si aspetterebbe, anche su siti che sembrano ben curati.
Tre varianti dello stesso errore
La forma più comune è l'etichetta che appare sullo schermo ma esiste in modo indipendente dal campo nel codice, senza collegamento tecnico. La seconda forma è l'uso di un testo segnaposto nel campo stesso come unica spiegazione: non appena l'utente inizia a digitare, il testo scompare, e uno screen reader inoltre non sempre tratta un segnaposto come un'etichetta completa. La terza forma la vede spesso con le icone: un campo di ricerca con solo un'icona di lente di ingrandimento, o un pulsante con solo un pittogramma, senza testo che uno screen reader possa leggere.
Tutte queste varianti hanno in comune il fatto che l'errore di solito non è intenzionale. Nessuno costruisce un modulo per renderlo inaccessibile. Accade perché un'etichetta è visivamente corretta e il costruttore assume che sia sufficiente, mentre il collegamento tecnico è un passaggio separato che è facile saltare, soprattutto sotto pressione di tempo o con un modello originariamente costruito senza considerare l'accessibilità.
Perché questo pesa più di quanto sembri
Un modulo è spesso il punto in cui un visitatore vuole effettivamente risolvere qualcosa: completare un ordine, creare un account, mettersi in contatto. Se l'etichetta manca proprio in quel momento, il processo si blocca per alcuni dei vostri visitatori, mentre il resto del sito funziona perfettamente. Le autorità di vigilanza e i valutatori guardano quindi spesso prima a questo tipo di problemi nei moduli, perché hanno un impatto diretto sul fatto che qualcuno possa usufruire di un servizio.
Inoltre, questo errore si diffonde facilmente. Un'etichetta senza collegamento in un modello per un campo indirizzo spesso compare in decine di pagine contemporaneamente, perché lo stesso componente viene riutilizzato ovunque. Un collegamento mancato nella base colpisce così l'intero processo di acquisto o l'intera schermata di accesso.
Come testarlo e dove una scansione automatica ha i suoi limiti
Una scansione automatica riconosce bene una parte di questi errori: vede se un'etichetta è tecnicamente collegata a un campo e se un campo di input non ha affatto un nome. Ciò che una scansione fatica a valutare è se un'etichetta è corretta dal punto di vista del contenuto, se un segnaposto come unica spiegazione è sufficientemente chiaro, e se l'ordine di lettura per uno screen reader è logico. Questo è esattamente il motivo per cui in ogni relazione specifichiamo cosa un test automatico copre e cosa no; in questo modo saprete cosa deve ancora essere controllato manualmente.
Se desiderate farvi una prima impressione, il test più semplice è navigare il modulo usando solo la tastiera e verificare che ogni campo abbia un nome chiaro quando vi selezionate. Per un'analisi più approfondita, incluso il processo di acquisto e il flusso di accesso, aiuta la scansione completa che guarda oltre la pagina iniziale per vedere dove mancano le etichette o sono disconnesse dai loro campi.
Cosa un widget overlay non risolve qui
Un widget di accessibilità incollato sopra il sito non può riparare un collegamento mancante tra un'etichetta e un campo; quel collegamento risiede nel codice sorgente stesso e deve essere corretto lì. Questo è uno dei motivi per cui non vendiamo overlay: nascondono questo tipo di errori all'occhio, ma uno screen reader non se ne accorge.
La soluzione stessa è solitamente limitata in ambito: il costruttore collega l'etichetta al campo, sostituisce un segnaposto usato come etichetta con un'etichetta vera, oppure aggiunge testo invisibile a un pulsante icona. Non è una grande ristrutturazione, ma è un lavoro che deve essere svolto in modo mirato, per ogni modulo e per ogni template. In la knowledge base con spiegazioni per argomento scoprirete come questi e altri errori simili si relazionano ai requisiti di EN 301 549.
Dopo la correzione: documentazione e monitoraggio
Un'etichetta che correggerete oggi potrebbe scomparire di nuovo alla modifica successiva del template, ad esempio quando un designer restylelizza il modulo senza controllare nuovamente il collegamento. Per questo motivo una correzione non deve essere risolta solo dal punto di vista tecnico, ma deve essere inclusa nel piano di miglioramento, in modo che sia chiaro chi è responsabile e quando verrà controllato nuovamente. Come organizziamo quel controllo e quella ripetizione è spiegato nella pagina su come viene effettuata la valutazione.
Se siete incerti che i vostri moduli contengano questo errore, spesso è visibile già in pochi minuti navigando con la tastiera. Se lo desiderate in modo strutturato e con un elenco prioritario, iniziate con la scansione rapida gratuita, oppure consultate prima le domande frequenti su cosa controlla e non controlla una scansione.