- docs.argus
- accessibilitat
- Formularis accessibles? (i III)
Formularis accessibles? (i III)
On em trobo?
Un percentatge dels usuaris d'internet utilitzen el teclat per a navegar per la pàgina web. A vegades, hi ha la dificultat de veure el punt enfocat. Els navegadors normalment utilitzen una línia puntejada al voltant del element del formulari que està seleccionat, però ho podriem fer més senzill..
En Cascading Style Sheets Level 2 (CSS2), hi ha una propietat focus que pot aplicarse en qualsevol element d'HTML però és particularment efectiu amb els formularis. Aquesta propietat no es suporta en tots els navegadors, però sí en els que treballan amb base Mozilla. Utilitzant el següent:
input:focus, select:focus, textarea:focus
{ background:#eee; color:#333; }
... el resultat és un indicador fàcil de reconèixer quan es navega amb el tabulador dins del formulari, això farà que el formulari sigui molt més fàcil de utilitzar/interactuar per a qualsevol usuari amb deficiencies motrius.
Dreceres en Inputs i Labels
Una drecera (accesskey) és una eina d'accessibilitat molt útil que es pot utilitzar a qualsevol pàgina web. Es pot associar una lletra del teclat a qualsevol element de la pàgina, fent un accés ràpid. Per exemple, un cercador que aparegui a la part superior de cada pàgina es podria assignar l'accesskey "c".
<input type="text" name="txtsearch" accesskey="c" />
Es pot fer servir un accesskey fàcilment a l'element <label> i al <input>. Per tal que l'usuari pugui veure que pot utilitzar la drecera, s'hauria d'indicar d'alguna manera que aquell element en té. Un suggeriment seria el que es fa servir a les aplicacions basades en Windows, subratllant la tecla que farà d'accès directe:
<label for="txtsearch" accesskey="S" title="accesskey S" ><span class="accelerator">C</span>ercar:</label>
<input type="text" name="txtsearch" id="txtsearch" />
Necessitaràs especificar a la fulla d'estils, que la classe accelerator té l'efecte de subratllat
.accelerator {text-decoration:underline;}
Report d'errors
Quan l'usuari té un error a l'omplir el formulari, hi ha varis camins per avisar d'aquest error.
- Un camí és utitlitzar el client-side scripting (JavaScript) que no envia el formulari si hi ha quelcom incorrecte. Evidentment, si el Javascript està desactivat aquest avis no funcionarà.
- L'altre camí és fer que l'error el retorni el servidor.
Client-side Error Reporting
Prepossem que el Javascript està activat. En aquest cas hi ha varis camins per fer l'script, que no es contemplen en aquest article. No obstant, hi han alguns dels camins que faràn que siguem més accessibles que d'altres, fixa't.
Sovint, quan el validador del formulari està fet amb JavaScript, tots els errors s'acumulen en un únic avis com ara en aquest exemple:
Aquest mètode és sovingt engorrós de cara a l'usuari ja que ha de recordar quins son els camps que tenen errors.
Un mètode millor seria fer un "alert" amb el primer error trobat, i quan l'usuari li doni al Acceptar el propi Javascript l'hauria de portar al camp on ha fet l'error.
També és pot fer servir el JavaScript per a fer que el camp amb errors estigui destacat d'alguna manera, com ara amb un borde o un color de fons.
Molta gent però, segur que pensa que aquest mètode és repetitiu i difícil. Per descomptat, per alguns usuaris serà una murga, però en aquest punt tu ets qui ha de jutgar que l'accessibilitat està treballant en contra de l'usabilitat de la pàgina per a la gran majoria.
Server-side Error Reporting
Una vegada que el formulari ha estat processat, i s'hagin trobat els errors, el metòde més net és presentar un sumari de tots els errors al principi de la pàgina i destacar tots els camps del formulari que han tingut algun tipus d'error. Això és perfecte, però si pensem en un navegador de veu, la informació no és inmediatament obvia, (Bé, he enviat aquest formulari i ara torno a estar a la mateixa pàgina, que està passant?)
Un truc seria alertar del problema en el <title> de la pàgina (normalment la primera part de la pàgina que llegeix el lector de pantalles).
<title>Hi ha hagut alguna dada no introduida en el formulari que ha enviat: Dades personals </title>
Assegurem-nos que en el sumari hi haurà un link que portarà a l'usuari a l'apartat on falta la informació.
I que passa si la pàgina te més d'un error? Quan l'usuari hagi clicat al primer link com sabrà quin son els altres erros que ha de solventar?
L'última cosa que vols és fer que l'usuari estigui fent atràs i adelante amb el navegador, i no et suggereixo que hi hagi un 'tornar a l'inici' al mig del formulari. No obstnat, algo d'aixo és necessari. Pots fer un petit sumari amb els errors que l'usuari necessita corregir:
Però potser hi ha algo més que puguis fer? A més de enviar la mateixa pàgina a l'usuari amb alguns camps omplerts, i alguns amb errors/buits, pots provar:
- capturar les dades correctes i emmagatzemar-les d'una manera segura.
- presentar només els camps incorrectes que l'usuari ha de corregir.
En comptes de forçar l'usuari a navegar per tot el formulari, simplement presentar els camps a solventar sense altra distracció a la plana.
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.
per MARTA MARTÍNEZ i RAMON GIL
14 de FEBRER 2006
argus.net
email.argus
accés directe a la teva bustia de correu
