accesskey_mod_content

Formularios

Siempre que exista un texto visible que actúa como etiqueta de un campo de formulario se debe marcar con el elemento LABEL . El texto de dicha etiqueta debe identificar claramente qué información se pide al usuario en cada control.

Todos los elementos LABEL y, por tanto, los textos de las etiquetas deberán ser visibles y no se podrán usar técnicas de ocultamiento mediante las hojas de estilo a no ser que se use una técnica alternativa para etiquetar el campo de formulario como, por ejemplo, el título.

En caso de que en el diseño de la página no exista un texto visible que se pueda marcar como etiqueta con el elemento LABEL, entonces se puede usar el atributo title del campo de formulario para identificar cuál es su función.

Por ejemplo, si se usan tres campos contiguos para solicitar una fecha (día, mes y año) se puede usar el atributo title para identificar cada control en vez de incluir una etiqueta para cada uno.

Ejemplo de código
<fieldset>
<legend>Fecha de nacimiento:</legend>
<input name="dia" type="text"
title="Día (dos dígitos)" size="2" /> /
<input name="mes" type="text"
title="Mes (dos dígitos)" size="2" /> /
<input name="anio" type="text"
title="Año (cuatro dígitos)" size="4" />
</fieldset>

Para realizar una asociación correcta se debe realizar una asociación explícita de las etiquetas con sus respectivos controles.

La asociación explícita se realiza a nivel de código HTML, indicando un atributo for para la etiqueta y un atributo id para el control. Ambos atributos deben tener el mismo valor.

Ejemplo de código

<p><label for="nombre">Nombre: </label><input type="text" id="nombre" /></p> <p>Sexo: </p>

<p><input type="radio" name="sexo" id="hombre" value="hombre" /> <label for="hombre">Hombre</label></p>
<p><input type="radio" name="sexo" id="mujer" value="mujer" /> <label for="mujer">Mujer</label></p><p><label for="hijos">Número de hijos: </label> <select id="hijos"> <option value="0">Ninguno</option> <option value="1">Uno</option> <option value="mas">Más de dos</option> </select><p> 

 

Las ayudas y las notas informativas acerca del uso de los controles de formulario deben proporcionarse en formato de texto accesible. Por tanto, la mejor forma de indicar un campo obligatorio es incluyendo dicha información en la etiqueta del campo (por ejemplo, añadiendo el texto “obligatorio” o “campo obligatorio").

Sin embargo, y dado que su amplio uso lo ha convertido en un estándar de facto, una manera adecuada y accesible para identificar los campos obligatorios de un formulario es utilizar asteriscos para marcarlos. Antes del formulario se colocará una nota explicativa indicando que los campos con un asterisco son obligatorios.

En la etiqueta de cada campo obligatorio se colocará un asterisco, preferentemente antes del texto de la etiqueta. Dicho asterisco se podría marcar como una abreviatura cuyo atributo title será “campo obligatorio” por ejemplo.

Ejemplo de código
<form action=”formulario.html” method=”post”>
<p>Nota: Los campos marcados con un * son obligatorios</p>
<label for=”nombre”> <abbr title=”campo obligatorio”>*</abbr> Nombre: <input type=”text” id=”nombre” />
</label>
<input type=”submit” value=”Enviar” />

 

Cuando en un formulario existen más campos obligatorios que campos opcionales se puede optar por la estrategia contraria. Es decir, se puede indicar al inicio del formulario que todos los campos son obligatorios excepto cuando se indique lo contrario, en cuyo caso se incluirá en cada campo un texto que lo identifique como campo opcional.

La validación de los datos introducidos en un formulario se puede realizar tanto en el cliente mediante javascript como en el lado del servidor o, como opción más recomendable, usando ambas técnicas. En caso de realizarse en el lado del cliente se ha de hacer mediante el uso de javascript accesible. Es decir, que tanto el código javascript como el código generado y/o modificado mediante los scripts sea compatible con los lectores de pantalla y otros productos de apoyo.

Por otra parte, independientemente de la técnica empleada para validar el formulario, se debe informar de todos los errores de validación que se produzcan. Debe mostrarse un aviso antes del formulario y en forma de texto accesible que informe sobre los errores de validación existentes de forma que éstos no pasen inadvertidos para el usuario.

Algunos nuevos tipos de campos de formulario en HTML5 posibilitan la validación automática de forma nativa en los navegadores compatibles. Cuando HTML5 esté ampliamente soportado esta podrá ser una técnica alternativa para la validación en cliente. Mientras tanto, en caso de usarse, deberá ofrecerse una alternativa para los navegadores que aún no soporten esta característica.

Se debe informar acerca de todos los errores de validación producidos al introducir datos en un formulario de forma que los usuarios sean conscientes de que se han producido dichos errores, determinen su causa y puedan corregirlos adecuadamente.

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 formulario se ha de mostrar con todos los datos previamente introducidos por el usuario a no ser que se trate de datos que afecten a la seguridad y no sea apropiado mostrarlos como, por ejemplo, las contraseñas.

Los mensajes de error deben ser lo más específicos posible proporcionando información acerca de la naturaleza de los datos incorrectos y sobre cómo corregirlos:

  • Se deben proporcionar descripciones textuales que identifiquen los campos obligatorios que no han sido completados. Para que la información sea clara y la puedan entender todos los usuarios se ha de proporcionar en forma de texto, considerándose insuficiente el incluir únicamente marcas como asteriscos o indicaciones 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.

Estas descripciones de error se podrán incluir junto al correspondiente campo de formulario, al lado o como parte de su etiqueta, como un resumen en forma de listado de errores antes del formulario o como una combinación de ambas técnicas.

En caso de incluir un listado de errores al comienzo del formulario se recomienda proporcionar enlaces que permitan saltar directamente desde un mensaje de error al campo correspondiente de forma que los usuarios no tengan que buscarlos en el formulario. Esto es especialmente útil para los usuarios de lectores de pantalla.

Adicionalmente, es recomendable resaltar o enfatizar visualmente dónde se ha producido un error mediante imágenes, colores, estilos de texto, etc., pero siempre de forma complementaria a la información proporcionada en formato textual.

Cuando los datos introducidos por el usuario son incorrectos pero se conoce un posible valor correcto entonces se debe sugerir un texto con la corrección. De esta forma se facilita a los usuarios la corrección de los errores. Algunos ejemplos de sugerencias pueden ser correcciones ortográficas, valores similares dentro de un conjunto de valores posibles (p. ej. nombre de provincia similar al introducido y que es incorrecto), hacer preguntas adicionales para refinar datos ambiguos o proporcionar alternativas similares para evitar repetición de valores (p. ej. indicar nombres de usuario alternativos a uno ya existente).

Por el contrario, en caso de que no se produzcan errores de validación se recomienda también mostrar un mensaje de confirmación a los usuarios indicando que los datos del formulario se han enviado correctamente.

Punto de Acceso General
Punto de Acceso General