Cómo crear formularios accesibles

Últimamente estoy especialmente sensibilizado (o sensible 😉 con el tema de los formularios y su accesibilidad.

La verdad es que es la parte más crítica y a la vez importante, ya que en ella se mezclan prioridades en cuanto a seguridad, usabilidad y accesibilidad. Es más, normalmente aquí la usabilidad está enfrentada con la accesibilidad ya que nos solemos apoyar en javascript para mostrar los errores sin necesidad de enviar los formularios.

Si bien para los diseñadores y webmasters la accesibilidad de los formularios es algo que lleva trabajo y que debe ser tomado en consideración, no podemos olvidar que para los discapacitados es crítico, ya que puede cambiar su posición de “meros consumidores  de información” a “generadores de contenido y transacciones”.

Sin más rodeos, vamos a ver algunas técnicas que nos permiten mejorar la accesibilidad de nuestros formularios.

Señala y asocia todos los campos de los formularios mediante la etiqueta <label>.

...
<form action="#" method="post">
  <div>
    <label for="nombre">Nombre: </label>
    <input id="nombre" type="text" name="cnombre" value="Nombre">
    <input type="submit" value="aceptar" />
...

Hay varios componentes del formulario que no debemos etiquetar, puesto que ya se utiliza el propio valor mediante el parámetro “value”. Éstos son:

  • Submit o reset: Ej:<input type=”submit” value=”aceptar” />
  • Botones tipo imagen.
  • Botones ocultos: Ej:<input type=”hidden” value=”aceptar” />
  • Botones de envío de tipo “button.”

Esconde la etiqueta label cuando no desees mostrarla.

Si en algún momento el uso de la etiqueta es un problema para tu maquetación, y el campo es fácilmente reconocible, puedes utilizar css para esconder la etiqueta.

Pongamos por ejemplo el caso del buscador superior de nuestra página:

...
<form action="#" method="post">
  <div>
    <label for="cbuscar" class="oculto">Buscar</label>
    <input id="cbuscar" type="text" name="Buscar" value="palabra a buscar">

En la CSS definiríamos la clase “oculto” de la siguiente manera:

.oculto{display:none;}

¿Usar Javascript?

Bueno, debemos conseguir que todo funcione sin javascript, pero no podemos olvidar también que no debemos únicamente centrarnos en los invidentes: una vez hemos agrupado los controles, minimizado los posibles errores de usuario, es aquí donde javascript puede ayudar a los usuarios, y no funcionar como una barrera.

Para ello debemos recordar usar los eventos onfocus además de los onmouse.

Mantener informado al usuario

  • Alertar al usuario cuando algo no va bien.
  • Describir cómo puede solucionar el error.
  • Facilitar el acceso a los campos erróneos.
  • No obligar al usuario a reinsertar todos los datos
  • Evitar errores, permitir volver atrás y confirmar

Autoactualizar campos dependientes.

Por ejemplo, si al seleccionar un país, queremos que automáticamente filtren las ciudades de un combo.

Esta técnica también es muy útil para esconder o mostrar campos según lo que seleccione un usuario.

Y ahora lo mejor de este post, los enlaces de más información:

Bruno Rico Autor

Marketing, posicionamiento, diseño,accesibilidad, fotografía, internet...y un toque de banca (por de-formación profesional)

Deja un comentario

Tu dirección de correo electrónico no será publicada.