Moduli (Form) e accessibilità
I Moduli (Form) sono una parte fondamentale nell'interfacciamento tra gli utenti ed i servizi vari offerti sul web(moduli di contatto, pagamento, registrazione ad un servizio ed altro ancora) ed è giusto che nessuno venga descriminato al loro utilizzo.
Cominciamo con definire cos'è un Modulo:
Parte di una pagina web contenente delle etichette e campi editabili dall'utente per l'inserimento dei propri dati.
Solitamente i dati vengono elaborati e racchiusi dentro database.
Presentare il modulo all'utente
Una buona norma è quella di predisporre le etichette ed i form con un buon contrasto cromatico, perciò è sconsigliato utilizzare delle etichette con colori chiari su uno sfondo chiaro e viceversa per siti con colori scuri.
Organizzare la struttura logica dei dati, evitare le tabelle per l'impaginazione dei moduli a scopo visivo, non tutti possono navigare con browser visuali, meglio impiegare elementi strutturali favorendo così chi utilizza delle tecnologie assistive o brower testuali.
Le etichette devono essere scritte in modo comprensibile, evitare ridondanze o abbreviazioni, e quando non si può fare a meno, utilizzare i tag HTML specifici o realizzare una legenda in un punto facilmente accessibile.
Quando vengono impostate le misure delle etichette e moduli, predisporre l'unità di misura in modo relativo dando la possibilità all'utente di poterli ingrandire.
Realizzare i moduli (codice HTML)
Esempio di codice HTML di un modulo
<form action="..." method="post">
<fieldset>
<legend>Dati Anagrafici</legend>
<label for="nome" accesskey="n">Nome [n]:</label>
<input id="nome" name="nome" type="text" tabindex="1" title="inserire il tuo nome" />
<label for="cognome" accesskey="c">Cognome [c]:</label>
<input id="cognome" name="cognome" type="text" tabindex="2" title="inserire il tuo cognome" />
<label for="indirizzo" accesskey="i">Indirizzo [i]:</label>
<input id="indirizzo" name="indirizzo" type="text" tabindex="3" title="inserire il tuo indirizzo" />
<label for="telefono" accesskey="t">Telefono [t]:</label>
<input id="telefono" name="telefono" type="text" tabindex="4" title="inserire il tuo numero di telefono" />
<input name="invia" type="button" value="Invia" tabindex="5" title="invia i dati" />
</fieldset>
</form>
Risorse sull'argomento (siti esterni):
Moduli ad elevata accessibilità su Diodati.org
Moduli (Form) accessibili su Webaccessibile.org
Risorse sull'argomento in lingua inglese(siti esterni):
Better Accessible forms
su accessify.com