accesskey_mod_content

Formularis

Sempre que existeixi un text visible que actua com a etiqueta d'un camp de formulari s'ha de marcar amb l'element LABEL . El text d'aquesta etiqueta ha d'identificar clarament quina informació es demana a l'usuari en cada control.

Tots els elements LABEL i, per tant, els textos de les etiquetes hauran de ser visibles i no es podran usar tècniques d'ocultamiento mitjançant les fulles d'estil tret que s'usi una tècnica alternativa per etiquetar el camp de formulari com, per exemple, el títol.

En cas que en el disseny de la pàgina no existeixi un text visible que es pugui marcar com a etiqueta amb l'element LABEL, llavors es pot usar l'atribut title del camp de formulari per identificar quin és la seva funció.

Per exemple, si s'usen tres camps contigus per sol·licitar una data (dia, mes i any) es pot usar l'atribut title per identificar cada control en comptes d'incloure una etiqueta per a cadascun.

Exemple de codi

Data de naixement:
title="Dia (dos dígits)" size="2" /> /
title="Mes (dos dígits)" size="2" /> /
title="Any (quatre dígits)" size="4" />

Per realitzar una associació correcta s'ha de realitzar una associació explícita de les etiquetes amb els seus respectius controls.

L'associació explícita es realitza a nivell de codi HTML, indicant un atribut for per a l'etiqueta i un atribut aneu per al control. Tots dos atributs han de tenir el mateix valor.

Exemple de codi

Sexe:


 

 

Les ajudes i les notes informatives sobre l'ús dels controls de formulari han de proporcionar-se en format de text accessible. Per tant, la millor forma d'indicar un camp obligatori és incloent aquesta informació en l'etiqueta del camp (per exemple, afegint el text “obligatori” o “camp obligatori").

No obstant això, i atès que el seu ampli ús ho ha convertit en un estàndard de facto, una manera adequada i accessible per identificar els camps obligatoris d'un formulari és utilitzar asteriscos per marcar-los. Abans del formulari es col·locarà una nota explicativa indicant que els camps amb un asterisc són obligatoris.

En l'etiqueta de cada camp obligatori es col·locarà un asterisc, preferentment abans del text de l'etiqueta. Aquest asterisc es podria marcar com una abreviatura l'atribut de la qual title serà “camp obligatori” per exemple.

Exemple de codi

Nota: Els camps marcats amb un * so obligatoris



 

Quan en un formulari existeixen més camps obligatoris que camps opcionals es pot optar per l'estratègia contrària. És a dir, es pot indicar a l'inici del formulari que tots els camps són obligatoris excepte quan s'indiqui el contrari, en aquest cas s'inclourà en cada camp un text que ho identifiqui com a camp opcional.

La validació de les dades introduïdes en un formulari es pot realitzar tant en el client mitjançant javascript com en el costat del servidor o, com a opció més recomanable, usant ambdues tècniques. En cas de realitzar-se en el costat del client s'ha de fer mitjançant l'ús de javascript accessible. És a dir, que tant el codi javascript com el codi generat i/o modificat mitjançant els scripts sigui compatible amb els lectors de pantalla i altres productes de suport.

D'altra banda, independentment de la tècnica empleada per validar el formulari, s'ha d'informar de tots els errors de validació que es produeixin. Ha de mostrar-se un avís abans del formulari i en forma de text accessible que informi sobre els errors de validació existents de manera que aquests no passin inadvertits per a l'usuari.

Alguns nous tipus de camps de formulari en HTML5 possibiliten la validació automàtica de forma nativa en els navegadors compatibles. Quan HTML5 estigui àmpliament suportat aquesta podrà ser una tècnica alternativa per a la validació en client. Mentrestant, en cas d'usar-se, haurà d'oferir-se una alternativa per als navegadors que encara no suportin aquesta característica.

S'ha d'informar sobre tots els errors de validació produïts en introduir dades en un formulari de manera que els usuaris siguin conscients que s'han produït aquests errors, determinin la seva causa i puguin corregir-los adequadament.

Així, si es produeixen errors de validació en enviar un formulari s'ha de mostrar un avís en forma de text al començament de la pàgina i abans del formulari informant sobre l'existència d'errors de manera que aquests no passin desapercebuts per a l'usuari. Es recomana incloure també aquesta notificació de presència d'errors en el títol de la pàgina (TITLE) ja que és la primera informació a la qual accedeix un lector de pantalla.

El formulari s'ha de mostrar amb totes les dades prèviament introduïts per l'usuari tret que es tracti de dades que afectin a la seguretat i no sigui apropiat mostrar-los com, per exemple, les contrasenyes.

Els missatges d'error han de ser el més específics possible proporcionant informació sobre la naturalesa de les dades incorrectes i sobre com corregir-los:

  • S'han de proporcionar descripcions textuals que identifiquin els camps obligatoris que no han estat completats. Perquè la informació sigui clara i la puguin entendre tots els usuaris s'ha de proporcionar en forma de text, considerant-se insuficient l'incloure únicament marques com a asteriscos o indicacions de color.
  • S'han de proporcionar descripcions textuals que indiquin a l'usuari que ha introduït una dada que no compleix el format requerit o que no es troba entre els valors permesos. Per exemple, per introduir un telèfon, codi postal, data o adreça de correu electrònic incorrecte o per usar valors no permesos com a noms de província incorrectes, NIF inexistents, dates fora de cert rang (naixement en el futur), etc. En tots els casos s'ha de descriure quin és la naturalesa de l'error.

Aquestes descripcions d'error es podran incloure al costat del corresponent camp de formulari, al costat o com a part de la seva etiqueta, com un resum en forma de llistat d'errors abans del formulari o com una combinació d'ambdues tècniques.

En cas d'incloure un llistat d'errors al començament del formulari es recomana proporcionar enllaços que permetin saltar directament des d'un missatge d'error al camp corresponent de manera que els usuaris no hagin de cercar-los en el formulari. Això és especialment útil per als usuaris de lectors de pantalla.

Addicionalment, és recomanable ressaltar o emfatitzar visualment on s'ha produït un error mitjançant imatges, colors, estils de text, etc., però sempre de forma complementària a la informació proporcionada en format textual.

Quan les dades introduïdes per l'usuari són incorrectes però es coneix un possible valor correcte llavors s'ha de suggerir un text amb la correcció. D'aquesta forma es facilita als usuaris la correcció dels errors. Alguns exemples de suggeriments poden ser correccions ortogràfiques, valors similars dins d'un conjunt de valors possibles (p. ex. nom de província similar a l'introduït i que és incorrecte), fer preguntes addicionals per refinar dades ambigües o proporcionar alternatives similars per evitar repetició de valors (p. ex. indicar noms d'usuari alternatius a un ja existent).

Per contra, en cas que no es produeixin errors de validació es recomana també mostrar un missatge de confirmació als usuaris indicant que les dades del formulari s'han enviat correctament.

Subscriu-te al canal de youtube de l'OBSAE
Subscriu-te al canal de youtube de l'OBSAE