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