Giorno 28 – Etichettate gli elementi dei moduli

Giorno 28: Etichettate gli elementi dei moduli

Vi siete mai chiesti perchè i moduli (form) sul web siano così difficili da usare? Ad esempio, nelle normali applicazioni  GUI, in un checkbox potete cliccare in qualsiasi parte dell’etichetta relativa, per selezionarne o deselezionarne la voce, mentre nelle applicazioni web si può solo cliccare sul quadratino stesso. Questo disturba un pò, anche se non è fondamentale.  Per i non vedenti, la situazione è sicuramente peggiore. Anche moduli semplici, come quelli per i commenti, possono essere difficoltosi da usare se non è possibile vederli tutti insieme contemporaneamente. (Abbiamo notato un   simile problema con le tabelle; un calendario di un weblog  è facile da usare se si può vedere tutto insieme, ma difficile se si può solo vedere un giorno alla volta.)

Ci sono tag di HTML che possono aiutarci a rendere i moduli più semplici da usare. Parlerò di uno di loro, il tag <label>; potete leggere degli altri nella sezione “Approfondimenti”.

Il tag  <label> consente di associare un’etichetta a qualsiasi elemento di input dei moduli: casella di testo (text box), aree di testo multilinea (multi-line text area), scelta multipla (checkbox), scelta unica (radio button), qualsiasi appunto. Questo consente ai lettori di schermo di annunciare intelligentemente cosa rappresenti un particolare elemento di input, leggendone l’etichetta. Inoltre, se utilizzate il tag  <label> associato ad un checkbox (<input type="checkbox">) con vicino il relativo testo, il vostro modulo web funzionarà come una applicazione GUI: cliccando sull’etichetta del testo, il checkbox viene selezionato/deselezionato.

A chi serve?

  1. A Jackie. Quando Jackie passa da un elemento di modulo all’altro (con il tasto  TAB ), JAWS ne annuncia il nome (indicato nella proprietà  name), che può essere o meno intellegibile. Ma se l’elemento del modulo è associato ad una <label> , JAWS leggerà quanto ivi indicato. “Text: name.” (TAB) “Text: email address.” (TAB) “Text: URL.” (TAB) “Text area: comments.” E così via.
  2. A Lillian. Una volta che gli elementi del modulo sono associati ad una etichetta, Lillian  può cliccare ovunque sul testo posto accanto al riquadro di spunta, in modo da selezionarlo (o deselezionarlo se già attivo). Questo consente un più ampio margine di errore nella selezione con il mouse, e, a causa della sua vista limitata, più la zona è ampia, meglio è.
  3. Potrebbe servire anche a Bill, ma non ancora. Naviga per lo più con il tasto TAB. Quando arriva su un checkbox di un modulo, Mozilla dovrebbe impostare un rettangolo intorno all’etichetta, ad indicare la possibile selezione, ma non lo fa; mette il rettangolo solo sul riquadro stesso. (Internet Explorer, invece, si comporta correttamente, così come anche Netscape 4. Solo Mozilla no.)

Come fare: Movable Type

In Movable Type, modificate il modello Comment Listing. Quasi alla fine, dovreste trovare un modulo che contiene questi elementi:

Name:<br />
<input name="author" /><br /><br />

Email Address:<br />
<input name="email" /><br /><br />

URL:<br />
<input name="url" /><br /><br />

Comments:<br />
<textarea name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" name="bakecookie" />Remember info?<br /><br />

Tutte queste etichette devono essere riportate nel tag   <label>.   Inoltre, poichè il tag  <label> punta ad un elemento del modulo identificato da ID (e non dal nome), ogni tag  <input> necessita dell’attributo ID. Fatto tutto, alla fine sarà così:

<label for=”author”>Name:</label><br />
<input id=”author”name="author" /><br /><br />

<label for=”email”>Email Address:</label><br />
<input id=”email”name="email" /><br /><br />

<label for=”url”>URL:</label><br />
<input id=”url”name="url" /><br /><br />

<label for=”text”>Comments:</label><br />
<textarea id=”text”name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" id=”bakecookie”name="bakecookie" /><label for=”bakecookie”>Remember info?</label><br /><br />

Assicuratevi di apportare gli stessi cambiamenti ai modelli Comment Preview, Comment Error, ed all’ Individual Entry Archive.

Come fare: Greymatter

Sotto ”Edit Karma & Comments-Related Templates”, dovreste trovare un modello chiamato “{{entrycommentsform}} Posting form” che include questo:

Name
<BR>
<INPUT TYPE=TEXT NAME="newcommentauthor" SIZE=40>
<P>
E-Mail (optional)
<BR>
<INPUT TYPE=TEXT NAME="newcommentemail" SIZE=40>
<P>
Homepage (optional)
<BR>
<INPUT TYPE=TEXT NAME="newcommenthomepage" SIZE=40>
<P>
Comments
<BR>
<TEXTAREA NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Cambiatelo così:

<label for=”newcommentauthor”>Name</label>
<BR>
<INPUT TYPE=TEXT id=”newcommentauthor”NAME="newcommentauthor" SIZE=40>
<P>
<label for=”newcommentemail”>E-Mail (optional)</label>
<BR>
<INPUT TYPE=TEXT id=”newcommentemail”NAME="newcommentemail" SIZE=40>
<P>
<label for=”newcommenthomepage”>Homepage (optional)</label>
<BR>
<INPUT TYPE=TEXT id=”newcommenthomepage”NAME="newcommenthomepage" SIZE=40>
<P>
<label for=”newcommentbody”>Comments</label>
<BR>
<TEXTAREA id=”newcommentbody”NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Approfondimenti

Potrebbero interessarti anche i seguenti articoli

Condividi:

Informazioni sull'autore

Franco Carcillo
Franco Carcillo
Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni