Un básico copia y pega de un formulario de contacto accesible

Una buena manera de aprender acerca de accesibilidad es a través de ejemplos y discusiones. En este post trataré de traducir las reglas WCAG -algunas-veces-difíciles-de-obtener en un ejemplo real de un formulario de contacto. Puede mirar el enlace de prueba, bajar el código y/o continuar leyendo un poco más.

Como mencioné antes, los formularios de contacto son una gran necesidad especial para mantenerse accesible. Y parece que siempre hay lugar para mejoras – en caso de que tengas sugerencias o su aproximación es diferente, me encantaría escuchar de usted.

Formulario de contacto simple con 4 campos y validación PHP en el servidor

Mi sugerencia es un formulario de contacto simple con 4 campos con validación PHP en el servidor. Luego de que el usuario envíe la información requerida, la página es cargada de nuevo y nuevos mensajes son mostrados dependiendo de la acción del usuario. Por supuesto que usted sabe que la forma necesita una etiqueta

<label for="name">

y algún tipo de validación – todos escriben acerca de la necesidad de mostrar una forma accesible con campos requeridos y además los mensajes de error (usualmente indicando que faltan algunos campos) – pero pocos ofrecen un código simple y directo para copiar y pegar en nuestros sitios.
Formulario de contacto accesible

El código

La hoja de estilo es bastante ligera – debemos darle estilo al formulario, pero la novedad es una clase para los campos que son requeridos y aún no han sido llenados.

.faulty_field,.validation-failed	{
   background:#fff4f4;
   color:#ff0000;
   border:1px solid #ff0000;
}

De esta manera, luego de que validemos, retornaremos el mensaje de error con enlaces a los campos que faltan pero además lo resaltamos para una experiencia mas usable e intuitiva. La parte de PHP lee las entradas, las verifica, y mira si las requeridas fueron llenadas. Un mensaje de agradecimiento se muestra en caso de que el usuario llene todos los campos requeridos.

El número de campos pueden ser incrementados, pero no olvide validarlos – cuando alguien entiende cómo los formularios funcionan y cuales fueron los elementos de accesibilidad que fueron incluidos construyendo formularios más complejos se convierte sólo en una cuestión de tipearlos.