Vai ai contenuti

LAU



Home > realizzare > accessibilità: codice HTML/XHTML > Form per una newsletter


Form per una newsletter

Creare un modulo di registrazione per una newsletter di un sito web secondo i criteri di accessibilità.

a cura di: Fabio Regina | 7 maggio 2007


Introduzione

I form, attraverso l'immissione di dati ed informazioni tramite moduli che è possibile compilare e inviare on-line, sono tra i principali strumenti di interazione tra un sito web e l'utente.
In questo articolo cercheremo di fornire alcuni consigli utili per migliorare l'accessibilità dei form (prestando particolare attenzione a tutte quelle categorie di utenti che fruiscono dei servizi informativi attraverso tecnologie assistive), realizzando un ipotetico modulo di iscrizione alla newsletter di un sito web facendo uso di codice standard (X)HTML 1.0 Strict.

L'ipotetico modulo di registrazione alla newsletter verrà organizzato in tre aree distinte:

  1. un'area dedicata all'inserimento di informazioni del registrante;
  2. un'area riservata al recapito degli utenti;
  3. un'area riservata a un questionario per ricavare le aspettative degli utenti.

Dopo tali premesse entriamo nel vivo dell'articolo cominciando a riempire il modulo dei vari elementi (campi di testo, menù a tendina dove effettuare scelte preimpostate, box di selezione multipla o per singola scelta, pulsanti, etc.).

torna su

1. Un'area dedicata all'inserimento di informazioni del registrante

Prima cosa da fare nella realizzazione di un form è dare un titolo chiaro ed esplicativo che consenta di comprendere immediatamente il tipo di modulo che si dovrà compilare. Un ulteriore ausilio alla comprensione del modulo potrebbe essere una breve spiegazione introduttiva per far capire ulteriormente il motivo della richiesta dei dati o semplicemente per specificare l'obbligatorietà di alcuni campi.

Esempio:

Modulo di registrazione alla newsletter
Per ricevere tutte le informazioni relative ai nuovi prodotti, alle offerte speciali, compila il modulo sottostante. Riceverai la Newsletter con periodicità mensile direttamente al tuo indirizzo e-mail.
Si ricorda agli utenti che i campi contrassegnati da * sono obbligatori.

I dati che chiederemo agli utenti attraverso questa area sono i seguenti:

  • Nome
  • Cognome
  • Anno di nascita
  • Titolo di studio
  • Occupazione

Pertanto, in questa prima parte del modulo utilizzeremo 3 campi di testo ("Nome", "Cognome", "Anno di nascita") e 2 "select" (menu a tendina) per "Titolo di studio" e "Occupazione".

Per rappresentare i 3 campi di testo utilizzeremo gli elementi (X)HTML '<input>' e '<label>' i quali, devono essere associati correttamente. L'associazione esplicita tra etichetta ('<label>' ) e rispettivo controllo ('<input>') deve essere assicurata attraverso l'utilizzo degli attributi "id" (per il controllo) e "for" (per l'etichetta). Il valore dell'attributo "for" dell'elemento '<label>' deve corrispondere al valore dell'attributo "id" dell'elemento interno al modulo ("id") ha valore unico in tutta la pagina).

Ad esempio:

<label for="nome">Nome</label>
<input type="text" id="nome" /> 

In questo modo la tecnologia assistiva riesce ad "agganciare" l'etichetta anche se posizionata, ad esempio, in un'altra sezione della pagina; ciò consente con maggior facilità il posizionamento da parte di utenti con disabilità motorie e facilita la comprensione e la compilazione dei form da parte di quegli utenti che la pagina non la vedono, ma la ascoltano con l'ausilio di uno screen reader.
Per quanto riguarda le 2 select (menù a tendina) utilizzeremo gli elementi (X)HTML '<select>' e '<option>'. Anche in questo caso deve realizzarsi l'associazione esplicita tra l'etichetta ('<label>') e il rispettivo controllo che in questo caso è l'elemento ('<select>').
Ciascuna voce deve essere compresa all'interno del tag '<option>' e il valore deve essere specificato attraverso l'attributo "value". Con l'attributo "selected" si può indicare una scelta predefinita.

Questo è il codice (X)HTML per questa prima parte del form:

<h1>Modulo di registrazione alla newsletter</h1>
<p>Per ricevere tutte le informazioni...</p>
<form>
<fieldset>
<legend>Informazioni sul registrante </legend>
 <label for="nome">Nome*</label>
 <input type="text" name="textField" id="nome" />
 <label for="cognome">Cognome*</label>
 <input type="text" name="textField" id="cognome" />
 <label for="anno">Anno di nascita*</label>
 <input type="text" name="textField" id="anno" />
 <label for="titolo_studio">Titolo di studio</label>
 <select name="studi" id="titolo_studio">
  <option value="1" selected="selected">licenza media</option>
  <option value="2">diploma</option>
  <option value="3">laurea</option>
 </select>
 <label for="occupazione">Occupazione</label>
 <select name="occup" id="occupazione">
  <option value="1" selected="selected">disoccupato</option>
  <option value="2">impiegato</option>
  <option value="3">avvocato</option>
 </select>
</fieldset>
</form>

Questo è il risultato della prima area del modulo.

torna su

2. Un'area riservata al recapito degli utenti

I dati che chiederemo agli utenti attraverso questa area sono i seguenti:

  • Via
  • Città
  • CAP
  • E-mail

Pertanto, in questa seconda parte del modulo utilizzeremo 4 campi di testo ("Via", "Città", "CAP" e "E-mail") con le stesse modalità utilizzate per realizzare i campi di testo precedenti.

Questo è il codice (X)HTML per questa seconda parte del form:

...
<form>
...
<fieldset>
<legend> Recapito utente </legend>
 <label for="via">Via*</label>
 <input type="text" name="textField" id="via" />
 <label for="citta">Citt&agrave;*</label>
 <input type="text" name="textField" id="citta" />
 <label for="CAP">CAP*</label>
 <input type="text" name="textField" id="CAP" />
 <label for="mail">E-mail*</label>
 <input type="text" name="textField" id="mail" />
</fieldset>
</form>

Questo è il risultato della seconda area del modulo.

torna su

3. Un'area per ricavare le aspettative degli utenti

Nella terza ed ultima area chiederemo agli utenti di:

  • rispondere ad alcune domande (utilizzeremo i classici menu a tendina utilizzati nella prima area del form);
  • selezionare alcuni campi di loro interesse (utilizzeremo i "checkbox");
  • lasciare un commento (utilizzeremo una "textarea")

Infine, diamo la possibilità di inviare il form o cancellare i dati inseriti.

Per quanto riguarda il primo punto di quest'area utilizziamo 2 elementi '<select>' con le stesse modalità utilizzate per quelle della prima area del form.
Invece, per quanto riguarda le selezioni a scelta multipla utilizzeremo l'elemento (X)HTML '<input>' di tipo "checkbox". Anche in questo caso l'elemento ' <input type="checkbox">' sarà associato all'elemento '<label>' . In generale la regola per il posizionamento della '<label>', è che va posta prima di un campo '<input>' ; fanno eccezione, gli elementi "checkbox" e "radio button" per i quali invece, la '<label>' va posta subito dopo.

Per dare la possibilità all'utente di lasciare un commento utilizziamo l'elemento '<textarea>'. Le aree di testo, come noto, servono a permettere l'immissione di commenti, messaggi, codici ed altro; è indispensabile stabilire il numero di colonne dell'area (larghezza) ed il numero di righe (altezza). Anche in questo caso deve verificarsi l'associazione tra etichetta ('<label>') e rispettivo controllo ('<textarea>').

Infine, per dare la possibilità di inviare il form al server, e permettere quindi l'elaborazione o l'acquisizione dei dati, utilizziamo l'elemento '<input>' di tipo "submit"; invece, se vogliamo dare la possibilità all'utente di cancellare e ricompilare il modulo utilizziamo l'elemento '<input>' di tipo "reset". È da notare che per questi elementi, se pur di tipo '<input>' , non va associata alcuna '<label>'.

Questo è il codice (X)HTML per questa terza ed ultima parte del form:

...
<form>
...
<fieldset>
<legend> Questionario</legend>
<p>Un breve questionario ci permetter&agrave;...</p>
 <label for="azienda">Come ha conosciuto la nostra azienda?</label>
 <select name="conoscere" id="azienda">
  <option value="1" selected="selected">Pubblicità su riviste</option>
  <option value="2">Pubblicità su internet</option>
  <option value="3">Pubblicità in TV</option>
 </select>
 <label for="prodotti">Hai mai acquistato nostri prodotti?</label>
 <select name="conoscere" id="prodotti">
  <option value="1" selected="selected">Si, una volta</option>
  <option value="2">Si, più di una volta</option>
  <option value="3">No, mai</option>
 </select>
<p>Seleziona i campi di tuo interesse: </p>
 <input id="sport" type="checkbox" name="checkbox" value="checkbox" class="check" />
 <label for="sport">sport</label>
 <input id="musica" type="checkbox" name="checkbox" value="checkbox" class="check" />
 <label for="musica">musica</label>
 <input id="arte" type="checkbox" name="checkbox" value="checkbox" class="check" />
 <label for="arte">arte</label>
 <input id="cultura" type="checkbox" name="checkbox" value="checkbox" class="check" />
 <label for="cultura">cultura</label>
 <input id="informatica" type="checkbox" name="checkbox" value="checkbox" class="check" />
 <label for="informatica">informatica</label>
<p><label for="commento">Commento</label>
 <textarea id="commento" cols="30" rows="10"></textarea>
</p>
</fieldset>
 <input name="pulsante" type="submit" id="invia" value="invia" class="check2" />
 <input name="reset" type="reset" id="canc" value="cancella" class="check2" /></form>
</form>

Questo è il risultato della terza ed ultima area del modulo.

Da notare come ogni area è trattata come se fosse un contenitore; infatti, l'elemento '<fieldset>' consente, insieme all'elemento '<legend>', il raggruppamento di gruppi omogenei di campi.

A questo punto desideriamo fare un piccolo test.
Se procediamo con la validazione del codice (X)HTML 1.0 Strict (il linguaggio che abbiamo utilizzato per la realizzazione del form) e lo diamo "in pasto" ad un qualsiasi strumento automatico di validazione del codice (noi abbiamo utilizzato il validatore automatico del W3C [link esterno]), otterremo la sua corretta validazione.
La verifica automatica dell'accessibilità della pagina, invece, è stata affidata allo strumento fornito dal sito di webxact [link esterno].
Tuttavia, nonostante abbiamo utilizzato codice valido, l'accessibilità della pagina non è pienamente raggiunta (a dimostrazione del fatto che la validazione del codice e la verifica dell'accessibilità sono cose distinte e separate). In particolare, il problema consiste nel mancato utilizzo dei caratteri di default come segnaposto nelle caselle per l'immissione di testo a una riga (i campi input) oppure a più righe (il campo dell'area di testo).

La legge Stanca [link esterno] non fa nessun riferimento a tale problema in nessuno dei 22 requisiti; diversamente, nel punto 10.4 delle WCAG 1.0 [link esterno] si afferma che:

Fino a quando gli interpreti non gestiranno in maniera corretta controlli vuoti, inserire caratteri di default come segnaposto nelle caselle per l'immissione di testo a una riga oppure a più righe. [Priorità 3]
Per esempio, in HTML, fare questo per TEXTAREA e INPUT.

In molti casi la scelta di inserire caratteri di default come segnaposto nelle caselle per l'immissione di testo è dettata dalla volontà di rispettare quanto suggerito al punto di controllo 10.4 delle WCAG 1.0.

In realtà questa è una norma transitoria, ovvero, la sua applicazione viene raccomandata solo finché i programmi utente in uso, tecnologie assistive comprese, non gestiranno correttamente i controlli vuoti.

Ad oggi, i programmi utente utilizzati, dai più datati browser grafici agli screen reader come Jaws [link esterno], sono in grado di gestire correttamente anche i campi modulo vuoti. Pertanto, continuare a mettere del testo segnaposto all'interno dei campi di testo potrebbe essere inutile se non a dirci cose superflue come: "inserire qui il testo". Inoltre, la presenza di un testo da cancellare all'interno di un campo di immissione può indurre a problemi di usabilità: molti utenti, infatti, dimenticano di cancellare il testo segnaposto, o lo cancellano parzialmente, e ciò finisce con l'invalidare inevitabilmente i dati che essi inoltrano.

Tuttavia, esiste una soluzione che consente di raggirare parzialmente il problema (molto utilizzata dagli sviluppatori) e richiede l'utilizzo di un semplice javascript. Con tale metodo, nel momento in cui il campo riceve il focus (quando cioè l'utente si porta con il cursore al suo interno, anche con il tasto TAB), il testo segnaposto viene eliminato automaticamente e sostituito con un nuovo valore di default equivalente ad una stringa vuota.
Prendiamo, ad esempio, come riferimento il campo '<textarea>' al quale aggiungiamo un valore di default, ovvero:

<label for="commento">Commento</label>
<textarea id="commento" cols="30" rows="10">
Inserisci il tuo commento
</textarea>

Successivamente aggiungiamo al codice dell'elemento '<textarea>' una semplice istruzione. Il codice che ne risulta è il seguente:

<label for="commento">Commento</label>
<textarea id="commento" cols="30" rows="10"  
onfocus="if(this.value==this.defaultValue)this.value=''" >
Inserisci il tuo commento
</textarea>

Questo č il risultato con l'utilizzo di javascript.

Teniamo a precisare, comunque, che la disattivazione o il mancato supporto di javascript compromette il corretto funzionamento di tale tecnica riproponendo in tal modo il problema di usabilità di cui parlavamo precedentemente.

Ma, come già detto, la corretta associazione tra l'etichetta e il rispettivo controllo sono già sufficienti a facilitare la comprensione e la compilazione dei form da parte di quegli utenti che utilizzano le tecnologie assistive (a tal proposito consigliamo l'approfondimento dell'argomento nell'articolo "Realizzare form accessibili e...usabili?" presente in questo sito).
Jaws, ad esempio, leggerebbe i primi campi della newsletter in questo modo:

  • "Editare: Nome"
  • "Editare: Cognome"
  • "Editare: Anno di nascita"

e cosė via.

Pertanto, riempire tutti i campi con un valore di default, potrebbe essere del tutto inutile in quanto non farebbe altro che appesantire la pagina e creare un senso di disorientamento all'utente, soprattutto per i moduli pių complessi.

In conclusione, precisiamo che per la formattazione del form è stato utilizzato un semplice foglio di stile attraverso il quale abbiamo gestito il posizionamento degli elementi.

Ricordiamo, infine, che è possibile scaricare l'(X)HTML e il CSS relativo all'esempio.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità

[ Torna all’inizio della pagina ]