Jour 28 : Expliciter les éléments de formulaire

Avez vous déjà été ennuyé par les formulaires qui sont très difficiles à utiliser ? Par exemple, dans les applications graphiques (GUI) courantes, vous pouvez cliquer partout sur l'étiquette d'une boite à cocher ou décocher, mais dans une application Web, vous pouvez cliquer uniquement le carré de la boite de sélection. C'est ennuyeux mais pas inutilisable. Mais pour les utilisateurs aveugles, la situation est plus compliquée. Mais les formulaires les plus simple, comme un formulaire pour poster des commentaires peut-être difficiles à utiliser si vous ne pouvez pas les utiliser tous en même temps. (Nous notons un problème similaire pour les tableaux ; un calendrier de weblog est facile à utiliser si vous pouvez le voir en un seul bloc, mais difficile si vous ne pouvez voir qu'un jour à la fois.)

Il existe des balises HTML qui peuvent aider à faciliter l'utilisation des formulaires, la balise <label> ; vous pouvez apprendre les autres dans la section "Approfondir".

La balise <label> permet d'associer une étiquette à n'importe quel élément de saisie du formulaire : boîte de texte, zone de texte multi-lignes, case à cocher, bouton radio, tout ce que vous voulez. Ceci permet aux lecteurs d'écran d'annoncer intelligemment la fonctionnalité de l'élément de saisie en lisant l'étiquette. De plus, si vous utilisez une balise <label> pour associer une case à cocher (<input type="checkbox">) avec le texte suivant la case, votre formulaire Web fonctionnera comme une application graphique : en cliquant n'importe où sur le texte de l'étiquette activera la case à cocher.

Qui en bénéficie ?

  1. Jackie en bénéficie. Quand Jackie utilise la touche tabulation pour naviguer dans la page, JAWS announce le nom de chaque élément (par la propriété name), qui peut être ou pas intelligible. Mais si l'élément de formulaire est associé avec une étiquette, JAWS lira le texte de l'étiquette à la place. "Text: nom." (TAB) "Text: adresse email." (TAB) "Text: URL." (TAB) "Text area: commentaires." Et ainsi de suite.
  2. Liliane en bénéficie. Une fois que les éléments ont été associés avec des étiquettes, Liliane peut cliquer n'importe où sur le text qui accompagne la case à cocher et cela activera la case. Cela permet une marge d'erreur bien plus grande pour l'activation de la case avec une souris et avec sa vision limitée, plus c'est large, mieux c'est.
  3. Guillaume devrait en bénéficier mais il ne le fait pas encore. Il navigue principalement avec le clavier, ce qui signifie avec la touche TAB. Quand il appuie sur la touche tab pour atteindre une case à cocher dans un formulaire, Mozilla devrait créer un rectangle de signalisation sur l'étiquette au complet, mais il ne le fait pas ; il place uniquement le rectangle autour de la case à cocher elle-même. (Internet Explorer le fait correctement, pourtant. Même Netscape 4 le fait correctement. Mauvais Mozilla)

Comment le réaliser : Movable Type

Dans Movable Type, éditez votre gabarit listant les commentaires (Comment Listing Template). Près du bas de la page, vous devriez voir un formulaire qui contient des éléments comme :

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 />

Chacune de ces étiquettes a besoin d'être enveloppées dans une balise <label>. De plus comme les balises <label> font référence aux éléments de formulaire grâce à l'attribut ID (et pas name), chaque balise <input> aura besoin d'un attribut ID. Cela ressemblera finalement à ceci :

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

<label for="email">Courrier électronique:</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">Commentaires:</label><br />
<textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">Conserver les infos ?</label><br /><br />

Prenez garde d'effectuer des changements similaires dans le gabarit de prévisualisation des commentaires (Comment Preview), votre gabarit d'erreur pour commentaire (Comment Error) et votre archive d'entrée individuelle.

Comment le réaliser : Greymatter

Dans "Edit Karma & Comments-Related Templates", vous devriez voir un gabarit appelé "{{entrycommentsform}} Posting form" qui inclue ceci :

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>

Changez le pour :

<label for="newcommentauthor">Nom</label>
<BR>
<INPUT TYPE=TEXT id="newcommentauthor" NAME="newcommentauthor" SIZE=40>
<P>
<label for="newcommentemail">E-Mail (optionnel)</label>
<BR>
<INPUT TYPE=TEXT id="newcommentemail" NAME="newcommentemail" SIZE=40>
<P>
<label for="newcommenthomepage">Page d'accueil (optionnel)</label>
<BR>
<INPUT TYPE=TEXT id="newcommenthomepage" NAME="newcommenthomepage" SIZE=40>
<P>
<label for="newcommentbody">Commentaires</label>
<BR>
<TEXTAREA id="newcommentbody" NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Approfondir

 
<< Jour 27 : Utilisez de vraies en-têtes  Jour 29 : Permettre la recherche partout >>  Sommaire