Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

Accesibilidad en formularios

04 Abr 2011 por Jose

Comentarios: 0

Formularios

Los formularios son la principal herramienta de comunicación e interacción entre los usuarios y las aplicaciones web; pueden usarse para distintos fines como solicitud de datos personales, comentarios, búsqueda de productos, ... Como elemento imprescindible de comunicación los formularios deben ser accesibles, sencillos y fáciles de utilizar para todos los usuarios.

Un ejemplo donde esta situación no se cumple es en los formularios de contacto que obligan a dar un teléfono para ponerse en contacto con el usuario, sin proporcionar otro medio alternativo de comunicación; ¿qué sucede entonces con los usuarios que tienen algún problema de audición? No podrían completar correctamente este formulario, por lo tanto debemos tener en cuenta las necesidades de los usuarios a la hora de crear formularios web, para ello veamos unas normas para la creación de formularios accesibles.

Normas generales

Acceso a los formularios mediante teclado

Esto se realiza usando los atributos accesskey y tabindex.

accesskey
Son atajos de teclado que se usan para poder acceder directamente a una etiqueta en el documento pulsando una combinación de teclas.
tabindex
Proporciona el orden de tabulación a través del documento.
Etiqueta explícitamente todos los campos del formulario

Identifica el texto asociado a cada campo con la etiqueta label asociándola a éste mediante el atributo id.

En los campos de texto (textarea, input type="text") la etiqueta se coloca antes del campo, mientras que los campos input type="radio" y input type="checkbox" llevarán la etiqueta después.

Indica cuáles son los campos obligatorios en la etiqueta label mediante un texto "obligatorio" o un asterisco con una leyenda que explique su significado.

Ordena los campos del formulario de una forma lógica

Los bloques pequeños de información son más sencillos de asimilar que los formularios enormes sin ningún tipo de agrupamiento. Esto se realiza con el uso de las etiquetas fieldset y legend.

Puedes agrupar también semánticamente los controles relacionados, especialmente los campos input type="radio" y input type="checkbox".

Agrupa las opciones de menú

En los campos select demasiado largos deberás clasificar sus opciones mediante la etiqueta optgroup.

<label for="provincia">Elige una provincia</label>
<select name="provincia" id="provincia">
	<optgroup label="Asturias"">
		<option value="oviedo">Oviedo</option">
	</optgroup>
	<optgroup label="Galicia">
		<option value="acoruña">A coruña</option">
		<option value="portugal">Lugo</option">
		<option value="ourense">Ourense</option">
		<option value="pontevedra">Pontevedra</option">
	</optgroup>
</select>

Otras recomendaciones para la creación de formularios accesibles

  • Proporciona un botón de tipo submit para los cambios de contexto. Si la modificación de un campo del formulario provoca un cambio de contexto debes informar de ello.
  • A la hora de validar el formulario, siempre que se produzcan errores deberás proporcionar una descripción de la naturaleza del problema, destacar claramente los campos donde se ha producido el error y si es posible proporcionar ejemplos de los valores correctos para los campos.
  • Los campos que necesiten un formato concreto (fechas, documentos de identidad, ...) deberán llevar asociada la información sobre dicho formato.
  • Informa claramente si el formulario fue correctamente enviado.
  • Cuando vayas a realizar operaciones irreversibles en la aplicación (modificación de datos, borrado, transacción bancaria, ...) deberás solicitar confirmación antes, del tipo "¿Está usted seguro que desea realizar la siguiente operación?" e indicar sus consecuencias.
  • Si usas Javascript en la validación asegúrate que lo haces de forma correcta. Por ejemplo, el siguiente código no permite el envío del formulario cuando Javascript está desactivado:
    function validar()
    {
    	document.forms[0].submit();
    }
    <form action="#">
    	<input type="button" value="Enviar" onclick="validar()" />
    </form>

Más información

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?