D27: XHTML i CSS. Introducció als estàndards i accessibilitat web

Formularis usables i accessibles

Quan es dissenyen formularis per a web, es essencial seguir un procés per el qual mitjançant diferents passos s'aconsegueixi la construcció de sistemes usables i accessibles. Abans de res, cal incloure una fase d'anàlisi que ajudi a determinar allò que es necessita i quins són els medis que s'utilitzaran per aconseguir els objectius.

Fase d'anàlisi

En aquesta fase d'anàlisi es desenvolupa, segons els requeriments, un model lògic dels sistema de recol·lecció d'informació que inclou:

les funcions i característiques del formulari,
els inputs necessaris, quina classe d'outputs són necessaris i com seran processats,
les qüestions tecnològiques que s'hauran de tenir en compte segons el context: llenguatges de programació, compatibilitats, etc.

Conèixer quin és l'objectiu bàsic del formulari, a qui va dirigit i com es vol retornar la informació, s'aconseguirà un panorama general del disseny funcional del formulari, els camps necessaris, la programació a utilitzar, la forma d'emmagatzemament i de lliurament de la informació als encarregats de recopilar-la i analitzar-la.

Construcció del formulari

En la construcció d'un formulari, tal com hem vist en la pràctica anterior, no hi ha cap ciència oculta, es tracta només de sentit comú. Els formularis han de ser omplerts fàcilment pels usuaris, per això requereixen com a mínim:

Títols i consignes clares que indiquin a l'usuari què es requereix per a la interacció.
Agrupar de manera lògica i homogènia els camps, mitjançant elements de disseny com marcs que donin a l'usuari una idea de blocs de contingut que faran més llegible el conjunt.
Prescindir, dintre que el que sigui possible, de la necessitat de tornar a escriure dades.
Oferir alternatives al camp de text lliure quan les respostes són predictibles, per tal d'evitar errors d'escriptura.
Dissenyar formularis amb un flux apropiat, construint-lo en base a un ordre de tabulació, és a dir, que es pugui recórrer totalment amb la tecla Tab, fent que el cursor vagi d'un camp al següent.
Intentar que tots els formularis siguin curts, no més d'una pàgina, i que les dades que es demanin siguin coherents i consistents amb els objectius del formulari. Si no es poden fer en una sola pàgina, s'haurà d'indicar a l'usuari, en cada fase i mitjançant un indicador, en quina fase del formulari es troba i quant falta per la finalització del mateix.
Quan es validen les dades ingressades en el formulari per part dels usuaris, s'ha d'evitar els missatges d'error molt tècnics que desanimen a l'usuari a tornar enrera per reparar alguna cosa que no és correcta. Resulta molt útil indicar el camp exacte de l'error, així com la descripció del mateix i la possible solució.
L'usuari ha de tenir la possibilitat de canviar les seves respostes abans de fer el clic final.
S'ha de prescindir de la demanda de dades inútils. Cal fer una planificació adequada i el més simple possible de les dades que s'han d'exigir als usuaris perquè completin el formulari.
Quan es confeccioni el formulari, el botó de submit ha d'estar a l'esquerra i el de reset a la dreta, per evitar que l'usuari, després d'haver completat les dades seguint un ordre de tabulació, les esborri sense voler.
Provar i testejar el formulari abans de penjar-lo a la xarxa. Mai amb els usuaris finals!

Elements d'un formulari

El dissenyador, al composar un formulari, es troba davant de moltes i molt diverses opcions de presentar la informació: camps de text, llistes, llistes desplegables, caselles de selecció, botons d'opció (radio buttons), entre d'altres opcions. Però cal tenir en compte en la construcció del formulari, que no tots els elements serveixen per a tot i que hi ha elements que són més convenients que d'altres per a certes funcions. Per exemple:

Un camp de text s'ha de pensar d'acord amb la informació que s'espera recollir. És a dir, les seves dimensions han de ser adequades a la informació sol·licitada: si es demana un comentari, aquest ocuparà més d'una línia; o bé si el que es demana és un codi postal, el camp no haurà de tenir més quantitat de caràcters que els necessaris. La mida del camp dóna als usuaris una idea del tipus d'informació que s'està demanant.
Una llista pot utilitzar-se quan els valors que contenen són coneguts i l'usuari pot seleccionar més d'un. També és una bona opció per usuaris que no utilitzen el ratolí a causa d'alguna discapacitat.
Un menú desplegable és útil si l'espai és limitat, encara que no és molt aconsellable. També és recomanable si els ítems de la llista són coneguts per l'usuari, per exemple una llista de països on l'usuari només necessita conèixer la seva opció, en aquest cas, el seu país.

Exemple de botons d'opció i caselles de selecció

Els botons d'opció, radio buttons, són eficients ja que permeten detectar immediatament les opcions disponibles, encara que es recomana que el nombre d'ítems a seleccionar no sigui massa gran, de dos a sis.

La característica essencial dels botons d'opció és que només permeten seleccionar una opció cada vegada. Per la qual cosa, si es vol deixar que l'usuari tingui la possibilitat de múltiples opcions s'hauran d'utilitzar les caselles de selecció.

Els botons posseeixen funcions restringides, no han de ser usats per altra cosa que no sigui el disparador de l'acció del formulari o la funció de neteja, reset, és desaconsellable usar-los com enllaços a altres documents. Generalment, un formulari ple de botons és molt poc amigable.

Quins elements ha de tenir un formulari per a ser accessible?

Tots els elements d'un formulari, camps de text, botons d'opció, caselles de selecció, etc., per tal que siguin accessibles han de tenir associat:

Un fieldset. És un element utilitzat per agrupar camps, facilita la comprensió i enteniment dels formularis llargs. El fieldset conté una etiqueta legend que dóna títol a l'agrupació.

Un label descriptiu. Una etiqueta que envolta el camp i l'anomena. Cal tenir en compte que sempre ha d'estar ubicat a l'esquerra del camp que descriu, excepte en el cas dels botons d'opció o caselles de verificació, on pot situar-se a la dreta de l'element.

<fieldset> <legend>Introducció de dades</legend>
   <fieldset><legend>Dades personals</legend>
   <p>
   <label>Nom: </label><input name="nom"/>  
   <label>Cognoms: </label><input name="cognom"/>
   </p>
   <p>
   <label>Adreça electrònica: </label><input name="mail"/>
   <label>Contrasenya</label><input name="senya"type="password"/>
   </p>
   </fieldset>
</fieldset>

Un accesskey. Una drecera del teclat per poder accedir al camp independentment del dispositiu que s'utilitzi, per exemple, per poder accedir des del teclat. Està inclòs com un atribut de l'etiqueta label.

<fieldset> <legend>Introducció de dades</legend>
<fieldset><legend>Dades personals</legend>
<p>
<label accesskey="N">Nom: </label>
<input name="nom"/>
<label accesskey="C">Cognoms: </label>
<input name="cognom"/>
</p>
<p>
<label accesskey="M">Adreça electrònica: 
</label><input name="mail" /> 
<label accesskey="P">Contrasenya</label>
<input name="senya" type="password" />
</p>
</fieldset>
</fieldset>

Un tabindex, és una variable inclosa dintre de l'etiqueta label que indica l'ordre que seguirà la tabulació.

<fieldset><legend>Introducció de dades</legend>
<fieldset><legend>Dades personals</legend>
<p>
<label accesskey="N" tabindex="1">Nom: </label>
<input name="nom"/>
<label accesskey="C" tabindex="2">Cognoms: </label>
<input name="cognom"/>
</p>
<p>
<label accesskey="M" tabindex="3">Adreça electrònica: </label>
<input name="mail" /> 
<label accesskey="P" tabindex="4">Contrasenya</label>
<input name="senya" type="password" />
</p>
</fieldset>
</fieldset>

Aquest atribut no és correcte si es treballa amb XHTML 1.0 Strict.

Un submit button que no utilitzi JavaScript, tot i que pot ser que en alguns navegadors no funcioni correctament.
```
<fieldset>
<p>
<input name="submit" type="submit" value="enviar" />
</p>
</fieldset>
```

Veieu el codi resultant del formulari i, seguidament, el formulari en acció.

<form method="post" action="mailto:identificador@xtec.cat">
<fieldset><legend>Formulari accessible</legend>
   <fieldset><legend>Introducció de dades</legend>
      <fieldset><legend>Dades personals</legend>
      <p class="form">
      <label class="align" accesskey="N" tabindex="1">Nom: </label>
      <input name="nom"/>
      <label class="align" accesskey="C" tabindex="2">Cognoms: </label><input name="cognom"/>
      </p>
      <p class="form">
      <label class="align" accesskey="M" tabindex="3">Adreça electrònica: </label><input name="mail" /> 
      <label class="align" accesskey="P" tabindex="4">Contrasenya</label><input name="senya"    type="password" />
      </p>
   </fieldset>
</fieldset>
   <fieldset class="button">
   <p>
   <input name="submit" type="submit" value="enviar" />
   </p>
   </fieldset>
</fieldset>
</form>

Finalment, la recomanació és usar els formularis amb prudència, poden ser una arma molt poderosa per la recol·lecció de dades estadístiques, però en molts casos als usuaris no els interessa omplir formularis interminables o complicats.

Tornar a l'inici de la pràctica