Uno degli incubi ricorrenti di chi - non vedente - desidera consultare l'orario dei treni via Internet, è l'apposito modulo (o "form", in inglese) sul sito di trenitalia.com. Sono anni ormai che le associazioni di disabili tentano senza successo di indurre le Ferrovie dello Stato a modificare sito e modulo, affinché possano essere utilizzati anche per mezzo di browser testuali e tecnologie assistive. Ma cos'ha questo modulo (o form) di così sbagliato? Niente di particolare... a parte il fatto di essere inserito in un frame privo di descrizione testuale alternativa, all'interno di una pagina gestita per mezzo di tabelle e con codice HTML approssimativo, di essere completamente privo di elementi specifici di ausilio per l'accessibilità (FIELDSET, LEGEND, LABEL) e di essere infine inoltrabile solo per mezzo di un javascript... Non c'è che dire: un bel servizio pubblico!
Ma è inutile insistere sull'inaccessibilità dei moduli di trenitalia.com: se ne sono già dette e scritte tante in proposito, che continuare a parlarne equivale a sparare sulla Croce Rossa. Vediamo piuttosto quali accorgimenti utilizzare per rendere accessibile al meglio un modulo web che non sia bacato in partenza.
· Usare gli appositi elementi strutturali per i moduli. La stragrande maggioranza dei moduli web è inserita all'interno di tabelle di impaginazione, utilizzate per disporre i vari campi in una griglia che soddisfi le esigenze grafiche dello sviluppatore. Rispetto a questo sistema, un'alternativa più accessibile è costituita dall'utilizzare i CSS per la presentazione visuale. In questo modo è possibile, in molti casi, ottenere un risultato estetico del tutto analogo a quello consentito dall'uso delle tabelle. È possibile inoltre ottenere un importante vantaggio: nel codice HTML rimangono i soli elementi strutturali del modulo, il che aiuta sicuramente l'interpretazione della pagina da parte di browser testuali e tecnologie assistive. In particolare è consigliabile usare l'elemento FIELDSET come contenitore di gruppi omogenei di campi e l'elemento LEGEND per dare un nome ai gruppi, come nell'esempio seguente:
<form action=ìì..." method="post">
<fieldset>
<legend>Dati anagrafici</legend>
... campi in cui inserire i dati anagrafici ...
</fieldset>
<fieldset>
<legend>Informazioni sulla privacy</legend>
... campi in cui inserire le info sulla privacy ...
</fieldset>
<fieldset>
<legend>Procedura d'acquisto</legend>
... campi in cui inserire i dati per l'acquisto ...
</fieldset>
</form>
Un altro elemento strutturale utile per l'accessibilità è OPTGROUP: consente di raggruppare in insiemi omogenei le opzioni inserite per mezzo dell'elemento OPTION all'interno di un elemento SELECT. tramite OPTGROUP si potrebbero per esempio suddividere, all'interno di un lungo menu a discesa, i nomi delle province italiane in gruppi più brevi ripartiti in base all'appartenenza ad una stessa regione. Un esempio di applicazione di questo elemento è contenuto nel capitolo delle Specifiche HTML 4.01 dedicato ai moduli.
· Usare l'elemento LABEL per etichettare i campi. Una delle regole per rendere più accessibile un modulo è quella di tenere vicini i campi in cui va inserito il testo, e i relativi nomi: bisogna fare in modo, insomma, che l'utente non abbia mai dubbi su quale sia l'etichetta di un campo. Ma la sola vicinanza può non bastare. Per limitare dubbi o errori da parte dell'utente, l'HTML mette a disposizione degli autori l'elemento LABEL, il cui scopo è di associare strutturalmente un'etichetta ad un controllo. L'associazione si può fare in due modi: o tramite l'uso combinato degli attributi "for" e "id", a cui si dà il medesimo valore, come in
<label for="nomeutente">Inserisci il tuo nome</label><br /> <input type="text" size="20" id="nomeutente" name="nomeutente" />
oppure annidando il campo testo all'interno dell'elemento LABEL nel modo seguente
<label>Inserisci il tuo nome<br />
<input type="text" size="20" id="nomeutente" name="nomeutente" /> </label>
· Usare gli attributi "tabindex" e "accesskey" per favorire la navigazione da tastiera. L'attributo "tabindex" serve per definire l'ordine di selezione di un campo modulo all'interno della pagina, in modo che possa essere selezionato dall'utente per mezzo di pressioni successive del tasto TAB. È buona norma utilizzare come valori per quest'attributo numeri che aumentano di dieci in dieci, in modo da lasciare la possibilità di inserire in seguito uno o più campi intermedi, senza dover riscrivere tutti i valori di "tabindex" dei campi successivi a quelli aggiunti. Gli screen reader più recenti hanno la capacità di attivare direttamente il primo campo modulo presente nella pagina. Ciò renderebbe inutile per i non vedenti la presenza di "tabindex", a meno che l'autore non voglia stabilire un ordine di selezione dei campi differente da quello che è il loro ordine di successione naturale sulla pagina. Tuttavia, è consigliabile che gli sviluppatori usino comunque l'attributo "tabindex", se non altro per consentire una più rapida selezione degli elementi del modulo a chi non può utilizzare il mouse. Ecco un esempio di impostazione di questo attributo:
<input type="text" size="20" tabindex="10" id="nome" name="nome" />
.....
<input type="text" size="20" tabindex="20" id="cognome" name="cognome" />
.....
<input type="text" size="20" tabindex="30" id="e-mail" name="e-mail" />
In aggiunta all'attributo "tabindex" si può utilizzare - per esempio per i campi principali di un modulo molto lungo - l'attributo "accesskey", il cui scopo è consentire di selezionare per mezzo di una scorciatoia da tastiera l'elemento in cui è inserito. Nel caso di un modulo complesso, l'utente che naviga tramite tastiera potrebbe così saltare direttamente ad uno dei campi principali, senza essere costretto ad attivare in successione tutti i campi intermedi premendo il tasto TAB innumerevoli volte consecutive. Ecco di seguito un tipico esempio di uso dell'attributo "accesskey" (l'applicazione dell'attributo all'elemento LABEL fa sì che il fuoco della selezione cada sul campo testo ad esso associato):
<label accesskey="n" for="nome">Inserisci il tuo nome [n]</label><br /> <input type="text" size="20" id="nome" name="nome" />
Va precisato che l'utilizzo di "accesskey" come ausilio di accessibilità genera alcuni problemi. Innanzitutto non è stata ancora definita una convenzione standard che associ determinati tasti a specifiche funzioni: ciò comporta per gli utenti la necessità di leggere e imparare le associazioni tasto/funzione per ogni sito che utilizza scorciatoie da tastiera. In secondo luogo non esiste ancora una convenzione standard su come rendere nota la presenza di queste scorciatoie agli utenti vedenti che visitano il sito o la pagina. Un terzo problema è costituito, infine, dalle procedure di attivazione delle scorciatoie, che cambiano da browser a browser, e rendono dunque impossibile fornire agli utenti istruzioni semplici ed universali per l'uso degli accesskey impostati. Per tali motivi, pur non sconsigliando l'uso di questo attributo, suggeriamo di utilizzare di preferenza "tabindex", utile soprattutto se l'ordine logico di selezione non corrisponde per qualche ragione all'ordine di successione dei campi sulla pagina.