accesskey_mod_content

Formularis

  • Escoltar
  • Imprimir PDF
  • Compartir

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.

Así, si se producen errores de validación al enviar un formulario se debe mostrar un aviso en forma de texto al comienzo de la página y antes del formulario informando sobre la existencia de errores de forma que estos no pasen desapercibidos para el usuario. Se recomienda incluir también esta notificación de presencia de errores en el título de la página (TITLE) ya que es la primera información a la que accede 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.
  • Se deben proporcionar descripciones textuales que indiquen al usuario que ha introducido un dato que no cumple el formato requerido o que no se encuentra entre los valores permitidos. Por ejemplo, por introducir un teléfono, código postal, fecha o dirección de correo electrónico incorrecto o por usar valores no permitidos como nombres de provincia incorrectos, NIF inexistentes, fechas fuera de cierto rango (nacimiento en el futuro), etc. En todos los casos se debe describir cuál es la naturaleza del 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.