Guida all’uso delle label HTML nei form, per un sito più accessibile.
Esistono due metodi HTML per contrassegnare un campo di un form con un’etichetta.
Il primo è usare l’attributo “for” sulla label, con un valore corrispondente all’id dell’elemento associato:
<label for="email">email:</label>
<input type="text" id="email" />Il secondo è inserire il campo del form all’interno della label HTML:
<label>email: <input type="text" /></label>Personalmente preferisco il primo metodo, ma il secondo è comunque valido e riconosciuto come corretto.
Label HTML nascoste
Un metodo molto diffuso ultimamente è quello di non visualizzare la label, inserendo un placeholder all’interno del campo, o usando JavaScript per nascondere al clic un valore che fa da segnaposto, come il classico “inserisci qui la tua email”.
Questa tecnica può essere tranquillamente utilizzata, ma non autorizza ad eliminare l’etichetta associata. La label deve essere sempre presente, anche se invisibile.
HTML5 e le label
Parlando di HTML5, il discorso è più o meno analogo. C’è un interessante articolo di Steve Faulkner sull’argomento con alcuni test pratici: HTML5 accessibility chops – form control labeling.
Dai risultati si nota come il metodo più sicuro per far riconoscere una label al browser (o a una tecnologia assistiva come uno screen reader) sia sempre l’attributo for abbinato ad un id.
Un altro metodo efficace è l’utilizzo dell’attributo aria-labelledby, che viene riconosciuto come valido:
<label id="email">email</label>
<input type="text" aria-labelledby="email">Inserire il campo input all’interno di una label non è un metodo pienamente supportato, quindi con HTML5 è meglio evitarlo, almeno per ora.
Creare un form accessibile non è complicato, seguendo queste poche indicazioni avete tutti gli elementi per utilizzare correttamente le label HTML. La cosa importante è ricordarsi di avere sempre un minimo di attenzione ai dettagli. Basta veramente poco per rendere un form accessibile, con qualsiasi specifica.
Attualmente sto aiutando una persona quasi cieca con la navigazione sul Web e le problematiche annesse all’uso del PC. Jaws è sicuramente uno strumento molto potente. Il punto è che gli sviluppatori per lo più non lo conoscono nè sanno come funziona. Nonostante articoli come il tuo siano letteralmente perle sparse nel deserto, c’è da dire che niente è meglio dell’esperienza diretta. C’è poco rispetto di best practices come queste citate da te perchè vengono viste come regole teoriche da applicare solo perchè si deve, quasi che fossero leggi burocratiche da espletare. Ma se gli sviluppatori sentissero come un lettore di schermo usa un form e i suoi elementi, capirebbero molte cose. Purtroppo gli screen reader hanno un costo elevato, e anche se attualmente vi sono soluzioni di terze parti che ne emulano il comportamento, non si riesce a ricrearne il funzionamento al 100%. Per di più sui siti di supporto degli screen reader mancano riferimenti agli standard ARIA supportati, quindi è anche difficile stabilire se lo screen reader X supporta una data caratteristica di WAI-ARIA. Sulle mailing list del W3C dedicate all’iniziativa WAI occorrerebbe verificare quanti implementatori di screen reader partecipano alle discussioni per vedere se effettivamente sono coinvolti nelle iniziative del W3C. Mancando questi dati, si è costretti a sperare che il dato lettore di schermo o la data tecnologia assistiva supporti i nuovi standard. Davvero un articolo interessante: ottimo, conciso, preciso, motivato. ciao :-)
Grazie Gabriele, è sempre un piacere ricevere resoconti di esperienze dirette come la tua. Il problema è soprattutto far capire che seguire un certo metodo di lavoro non è un capriccio o un esercizio di stile, ma una necessità.
ho una domanda riguardante le label nascoste tramite js.
Per esempio il google bot come si comporta trovando del testo nascosto? Penalizza la pagina? Oppure essendo nascosto mediante js non lo rileva tale?
@Massimo per quanto riguarda Google non preoccuparti troppo, quando un elemento viene nascosto tramite JavaScript i bot in linea di massima lo leggono comunque. I problemi si hanno quando la label non viene inserita o non è ben collegata al campo relativo, ma sono problemi di usabilità e accessibilità della pagina, non di indicizzazione.