- docs.argus
- accessibilitat
- Formularis accessibles?
Formularis accessibles? Quina creu!
per MARTA MARTÍNEZ i RAMON GIL
14 de FEBRER 2006
Si fer formularis costa, fer-los usables, semànticament correctes, amb codi estàndard i a més a més accessibles pot esdevenir la creu del més trempat desenvolupador web. Us presentem un petit tutorial molt pràctic que de ben segur ajudarà.
L'hem dividit en 3 parts en funció del vostre nivell de temeritat i/o expertesa: bàsic, mitjà i avançat.
Basat en l'article publicat a http://www.accessify.com.
HTML Utilitzats
Els principals tags d'un formulari són:
- L'element
<form> - L'element
<input>- que pot ser de diversos tipus: text, submit, button, radio button i checkbox - L'element
<textarea>- per entrar text llargs com ara comentaris - i l'element
<select>
En principi aquests elements es comporten de manera idéntica en qualsevol navegador.
Regles bàsiques de la usabilitat
Hi ha principis bàsics de la interacció home màquina que tothom espera trobar quan està davant d'un formulari. És a dir, si seguim aquests principis els nostres formularis seran més usables. Per això, algunes tecnologies com els lectors de pantalles, segueixen de manera estricta aquestes regles. Per exemple:
<input type="text" name="firstname" id="firstname" /> - Escriu el teu nom<br />
<input type="text" name="surname" id="surname" /> - Escriu el teu cognom
Pot crear dificultats, ja que associa el segon input amb la primera línia del text. Per tant és important l'ordre. A efectes d'un invident hagués escrit el seu nom dins del camp del cognom. Per al lector de veu, el segon text és com si estigués comentat.
<input type="text" name="surname" id="surname" /><-- Escriu el teu nom <br />
La millor manera de trobar un equilibri entre la part visual i la part accessible és seguir les següents regles:
| element d'HTML i tipus | Ordre d'aparició | Exemple |
|---|---|---|
| input type="text" | Etiqueta descriptiva, element d'HTML | Nom<br /> |
| input type="password" | Etiqueta descriptiva, element d'HTML | Paswword<br /> |
| input type="button" | No aplica la regla anterior (cal fer servir l'atribut value) | <input type="button" name="cmdChkAvail" value="Check Availability" /> |
| input type="submit" | No aplica la regla anterior (cal fer servir l'atribut value) | <input type="submit" name="cmdEnviarDades" value="Enviar Dades" /> |
| input type="radio" | Element d'HTML, etiqueta descriptiva | <input type="radio" name="radMarried" value="Yes" /> Sí, estic casat<br/> |
| input type="checkbox" | Element d'HTML , etiqueta descriptiva | <input type="checkbox" name="chkSubscribe" value="Subscribe"/> |
| select | Etiqueta descriptiva, element d'HTML |
|
| textarea | Etiqueta descriptiva, element d'HTML | Comentaris<br /> |
Que fem amb el javascript?
No donem per fet que els usuaris tenen el javascript activat. Un formulari ha de funcionar malgrat que el javascript no estigui activat.
Assegura't que el formulari funcioni amb el javascript desactivat - és el servidor el que ha de fer la feina!
Evita el JavaScript per a la navegació
Què fem amb les Taules?
Evitem l'ús de les Taules per fer donar efectes visuals al formulari. L'important és l'ordre de l'html i la visualització ha de dependre del CSS.
Més informació
Els nostres projectes web, siguin claus en mà o associats a algun punt del cicle de vida, són necessàriament usables, accessibles doble A, com per exemple Dona Badalona o l'Ajuntament de Lliçà d'Amunt, i utilitzen els estàndards XHTML i CSS per a l'estructuració i organització de la informació i per a la seva presentació visual. A més, la seva producció se sosté en la nostra plataforma tecnològica 100% java i 100% web, eGestió, i el seu avançat mòdul de creació, gestió i manteniment de sites, eGestió CMS.
argus.net
email.argus
accés directe a la teva bustia de correu
