Dopo aver letto alcuni contributi di Cameron Adams su JavaScript e accessibilità, ho completamente cambiato il mio modo di concepire la validazione dei dati lato client. Il punto non riguarda l'accessibilità di JavaScript, quanto piuttosto il livello di supporto da parte delle tecnologie assistive (lettori di schermo in testa). Dagli studi di Adams emerge come JavaScript crei più problemi di quanto non ne risolva per quello che concerne la validazione dei form. In particolar modo, la validazione istantanea presenta alcune problematiche peculiari.
In genere noi usiamo gli eventi focus e blur per validare i campi di un form. Il punto è che questi eventi una volta attivati sono difficili da gestire per un lettore di schermo. I lettori di schermo infatti non riescono a gestire i messaggi di errore generati da JavaScript su nessuno di questi due eventi. Cosa succede?
Quando creiamo un messaggio di errore non facciamo altro che aggiungere uno o più nodi al DOM:
$('input.email').blur(function() {
// valida l'email
if(!valid) {
$('<div class="error"/>').
text('Errore').
insertAfter($(this));
}
});
Quello che noi scriviamo e leggiamo nel DOM è questo:
<input type="text" class="email" name="email" />
<div class="error">Errore</div>
Il lettore di schermo invece leggerà questo:
<input type="text" class="email" name="email" />
In altre parole, i lettori di schermo al momento non sono in grado di leggere i contenuti dinamici generati tramite la validazione istantanea. Ecco perchè, in sintesi, essa andrebbe ponderata con attenzione.