In un mio precedente post avevo sottolineato come JavaScript e accessibilità non siano incompatibili, a patto di rispettare alcune semplici best practices. Una di queste riguarda i link ed il modo di mantenerli accessibili anche con JavaScript disabilitato o non supportato. In tal senso occorre distinguere tra link effettivi (che conducono l'utente ad una nuova pagina o che comunque linkano a delle risorse) e link trigger, ossia link privi di contenuti effettivi ma che servono per "innescare", appunto, delle azioni JavaScript.
Una pratica da evitare è quella dei link privi di valore per l'attributo href, come <a href="" id="trigger" >...</a>. Nei browser privi di supporto a JavaScript come Lynx, un link di questo genere avrà l'effetto di ricaricare interamente la pagina. Ovviamente possiamo interamente generare il trigger con JavaScript, ma poi il link non sarà disponibile qualora JavaScript non fosse supportato o disabilitato. Molti siti statici usano questa tecnica anche per generare i permanent link, in quanto il browser considererà la pagina corrente come valore mancante dell'attributo href.
Quindi occorre dare un valore a questo attributo, considerando anche il fatto che per le specifiche XHTML l'attributo href non può essere vuoto. Ma quale? Molti hanno scelto di usare il carattere cancelletto (#) come riempimento. Tuttavia, anche questa soluzione ha dei limiti, in quanto con JavaScript disabilitato o non supportato otterremo l'effetto di creare un riferimento ad un'ancora inesistente, il che può disorientare chi naviga il Web con una tecnologia assistiva non visuale.
La soluzione, ovviamente, è una via di mezzo: possiamo infatti creare un'ancora che punti a del contenuto effettivo presente sulla pagina. Nel caso di contenuto generato tramite JavaScript, possiamo usare un approccio di questo tipo:
<input type="text" name="email" id="email" />
<span class="help"><a href="#email-help" id="trigger">Aiuto</a></span>
<div id="email-help">
L'email deve essere nel formato nomeutente@dominio.estensione
</div>
Assegniamo degli stili al nostro div, che nasconderemo con JavaScript. Se JavaScript non è supportato o disbailitato, il nostro div resterà semplicemente visibile. Per nasconderlo, usiamo una classe CSS da linkare al momento del caricamento del documento:
.hidden {
position: absolute;
top: -1000em;
}
Sia jQuery che Prototype dispongono di metodi per nascondere un elemento, ma ricordiamo che essi fanno uso della dichiarazione display: none. Tale dichiarazione viene purtroppo interpretata dai lettori di schermo, che hanno un supporto parziale a JavaScript, impedendogli di leggere il contenuto di un elemento. A questo punto, se usiamo jQuery, possiamo scrivere:
$('#trigger').click(function() {
$('#email-help').removeClass('hidden');
});
Ho volutamente evitato di inserire la dichiarazione return false; perchè alcuni lettori di schermo sono in grado di interpretare un evento click, equiparandolo in alcuni casi ad un evento da tastiera. Se avessi inserito tale dichiarazione, tali programmi non avrebbero seguito la destinazione del link e quindi non sarebbero stati in grado di leggere il contenuto del nostro div. L'unico effetto spiacevole per i normali browser è quello di vedere l'ancora aggiunta all'URL della pagina corrente, ma questo non inficia minimamente l'accessibilità e l'usabilità della stessa.