Cómo crear formularios web accesibles

En uno de nuestros artículos anteriores, os hablábamos de la importancia de comprobar la accesibilidad web para poder asegurarnos de que todos los usuarios podían disfrutar de nuestro proyecto web. En este artículo, centramos nuestra atención en los formularios web accesibles.

Si queremos que un usuario compre nuestros productos, haga un pedido o se ponga en contacto con nosotros, debemos permitirle hacerlo, obvio. Para eso debemos asegurarnos que el formulario es accesible mediante teclado y que va a dar la información correcta, para ello deberemos usar controles estándar, siempre que sea posible:

Situar correctamente las etiquetas label

• Antes del campo (los puedes poner encima o la izquierda) para los “textarea” y “select”, así como para los inputs de tipo “password”, “text” y “file”.
• Detrás del campo para los tipo “checkbox” (multiselección) o “radio” (excluyente)

Etiquetar los controles del formulario de forma correcta

• Label for: la relación entre la etiqueta y el control del formulario al que pertenece,  debe estar siempre asociada con for.
• For: debe ser siempre igual al id del control del formulario, y cada id debe ser único.

Label no debe usarse para los campos:

• “Imágenes”, como puede ser el caso de un botón enviar, en estos elementos utiliza el atributo alt.
• Para los tipos “submit” y “reset”,  en cuyo caso debes usar “Value”.
• Para los “button” en los que su contendido se usa como una etiqueta

Informar semánticamente de la estructura de los campos del formulario

Cuando sea necesario y/o aclaratorio (si no lo es, puede crear más confusión que ayudar, por lo tanto piensa siempre en su utilidad antes de hacerlo) como por ejemplo:

• Agrupar semánticamente un número de controles del formulario mediante el campo “fieldset”, muy importante, por ejemplo en una agrupación de opciones de radios o checks.
• Puedes añadir una descripción a esta agrupación con el elemento “legend”.
• Con “optgroup”, podemos agrupar una serie de “options” dentro de un “select”. Con este elemento puedes ayudar a los usuarios a encontrar la información de una forma más simple, sobre todo en listas muy largas.

Identifica de forma correcta los campos obligatorios del formulario

• Para minimizar los errores, indica al usuario qué campos son obligatorios poniendo Obligatorio a su derecha. Se ha usado durante años el * para indicar que un campo es requerido, y además había que añadir el texto “Los campos con * son obligatorios” o similar. Poniendo directamente el texto “obligatorio” vas a evitar más confusiones en la interpretación. Ej: Email (obligatorio)
• Identifica los errores marcando el foco con cambio de color en el campo que se ha producido, y además describiendo con texto el error cometido. No debes identificar un campo obligatorio sólo con color (recuerda todo lo que hemos comentado en nuestro post de contenidos accesibles y la problemática de las personas con daltonismo).
• Los textos de los mensajes de la validación deben ser lo más descriptivos posible y aclarar al usuario lo que está sucediendo, no nos vale “Se ha dejado campos obligatorios sin completar”. Con este tipo de mensaje , es complicado que el usuario sepa en qué ha fallado, prueba por ejemplo con “El email que has completado no es correcto, por favor, revisa si has introducido bien campos como por ejemplo @, .com, .es”
• La validación debe ser tanto en cliente como en servidor, pero si se realiza mediante javascript en cliente, y los mensajes se crean de forma dinámica, deben insertarse con funciones DOM.

Y  aunque esto no tiene nada que ver con la accesibilidad del formulario,  recuerda que una vez enviado debes informar al usuario  de lo que va a suceder después, por ejemplo, si  es un formulario de contacto, debes indicar cómo se le va a responder, en qué periodo de tiempo, etc., en el caso de una confirmación de pedido hay que mostrar siempre el número de seguimiento para que el usuario lo pueda guardar, independientemente del envío a su email con la información.

Si necesitas es una consultoría de usabilidad y accesibilidad en el desarrollo de tu sitio web, escríbenos contándonos tu proyecto y nuestro equipo estará encantado de ayudarte.