Tag Archives: Accesibilidad web

Validación en el cliente con Mootools para formularios accesibles

Tal como discutimos en el artículo anterior acerca de formularios –Un básico copia y pega de un formulario de contacto accesible –  hicimos la validación del formulario usando una clase que resalta y nos indica los elementos que necesitan ser llenados o corregidos en caso de que la validación haya fallado.

Ahora, el único punto débil desde el punto de vista del usuario es el hecho de que necesitamos recargar la página cada vez que se haga click en submit y esto es de alguna forma fastidioso. Hoy en día la mayoría de los navegadores ofrecen capacidades de procesamiento en el lado del cliente (javascript) que puede ser usado para validación local – evitando recargar la página.

No me malinterpreten, la parte del lado del servidor necesita permanecer intacta para propósitos de accesibilidad.

La versión mas reciente de MooTools ofrece agregados de validación en el paquete “mootools-more”, que nos ayudará a resolver nuestras tareas. Básicamente necesitamos añadir algunas clases para dar salida a las entradas, para reflejar el tipo de validación que queremos. Para nuestro formulario sólo necesitamos un nombre – obligatorio, y correo electrónico – obligatorio + formato correcto de correo electrónico.

Así que usaremos requerido: required y validar email: validate-email de la lista de validadores que se encuentran incluidos, así:

<label for="name">Name <span>(required)</span></label>
<input  tabindex="1" type="text" name="name" id="name" class="required" />
<label for="mail">Email <span>(required)</span></label>
<input  tabindex="2" type="text" name="mail" id="mail" class="validate-email required" />

Crear el código que haga la validación

En el evento domready de la ventana (necesitamos permitir al html cargar y entonces será capaz de acceder a él), nosotros adjuntamos el validador a nuestro formulario con los métodos necesarios para mostrar al usuario lo que ha hecho mal (en caso de que lo haya hecho). Para mantener la presentación y la accesibilidad intacta – como en la validación definitiva – añadiremos el siguiente código:

window.addEvent('domready', function(){
 
var myFormValidator = new FormValidator($('contact'), {
 
onFormValidate: function(ok) {
 if (!ok) {
  $('error_wrapper').getElements('a').dispose();
  if (!ok) {
 
   $('contact').getElements('.validation-failed')
   .each( function(el) {
      var a = new Element( "a",{'href' : "#add"})
      .addEvent('click', function(){ el.focus(); return false; })
      .set('text', el.get('id').capitalize() )
      .inject($('error_wrapper'));
 
  })
 
 $('error_wrapper').setStyle('display','block');
 }
 else {
   $('error_wrapper').setStyle('display','none');
 }
 
}
},
stopOnFailure:true,
evaluateFieldsOnBlur:false
 
});
 
})

Ok, es un poco largo, pero básicamente está validando cada campo que se necesite, tal como se especifica en la clase, y adjunta en la envoltura del error (error_wraper) las etiquetas para las entradas erróneas. Es mejor estudiar el código fuente para ver cómo está hecho.

Validación en el cliente con Mootools

La librería de Mootools está validando cada campo que le especificamos en el evento enviar (submit) del formulario y añade predeterminadamente una clase validation-failed o validation-passed a cada campo que fue enviado a la rutina de validación.

Podemos usar esas dos clases para mejorar visualmente al formulario – aquí sólo hice que los fallidos fuesen rojos. Si la validación fallare, el evento enviar (submit) de la forma será detenido y los datos incompletos no alcanzarán a llegar al servidor.

Validacion con Mootools

Próximo paso: completar la data correctamente y reenviar.

Aquí esta el DEMO

La clase validadora del formulario es mas poderosa que esta así que dale un vistazo a la documentación en el sitio de MooTools. De cualquier manera, no importa lo que haga, no olvide hacer la validación del lado del servidor también. Es obligatorio para la seguridad de su servidor.

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.

Porqué “Binevenida” es tan importante?

Últimamente veo muchos sitios web que abren sus páginas principales con un gran titulo de “Bienvenida”. Lo bello de este título es que usualmente alguien decide que es tan importante que se merece un encabezado H1.

Desde la perspectiva de la chica de mercadeo – o el chico de relaciones públicas, si se quiere – probablemente dar la bienvenida a los visitantes con tan bonito y educado encabezado es algo bien hecho. Y cuando un programador como yo decide que darle la bienvenida no vale el H1 y reduce su importancia a H3 (porque no se me permite borrarlo completamente) entonces la guerra en la compañía está a punto de comenzar.

Cuando no tienes nada más que decir

Algunas personas piensan que lo más importante en tu sitio eres . El nombre de tu compañía, el eslogan, descubrimientos, noticias… Algunas veces el logo también es H1 – Chicago, otras veces no. Y aquí es donde te detienes. No todos están de acuerdo, pero todos concuerdan en que tú tienes que tener un H1.

La siguiente línea es un H2. Puedes usarla de cualquier manera que quieras, pero debes tener en cuenta que Google está escuchando y este H2 significará mucho para la el motor de búsqueda. Y ahora volvamos a la “Bienvenida”.

Que está aprendiendo Google de ti cuando el mensaje mas importante en tu página es “Bienvenido”.?

Olvídate de Google, que hay de la información?

Desde el punto de vista de la Arquitectura de la Información, el hecho de SAMSUNG que abras tu sitio web con un mensaje de “Bienvenida” significa que no tienes nada mejor que decir. wholesale jerseys

Cuando lo veo pienso que esta compañía no tiene nada interesante que escribir en la página de inicio. Los encabezados me ayudan a comprender que hace la compañía y cómo puede ayudarme (porque es por eso que estoy aquí, no estoy Hacked navegando en la red para perder el tiempo), así que la página de inicio es la página mas importante wholesale nfl jerseys en todo el sitio web.

La manera en que está diseñado, el contenido y sobre todo los encabezados deben hacerme entender el usando propósito y actividades de la compañía y convencerme de no marcharme del sitio de inmediato.

Nadie lee, todos escanean

Por qué son tan importantes los encabezados?, Además de la carrera para ganar el corazón de Google, se trata de dinero!, cuando tienes una página de inicio aburrida By con encabezados aburridos y contenido insípido, el gigantesco Flash en medio de la página no ayudará a que dejes de perder visitantes. Si los visitantes vienen, se aburren/asustan/o son indiferentes, entonces se irán a otra parte y se llevarán su billetera con ellos.

En caso de que no te importe una… flor la opinión de un especialista web acerca de tu sitio web, entonces el siguiente argumento debería ganar. Los analíticos fueron inventados con un propósito. El saber cuantos visitantes wholesale nba jerseys vienen y van, cuento tiempo pasan en tu sitio web y por qué se marchan luego de 30 segundos se supone que te debe hacer ganar o por lo menos dejar de perder dinero. Si eres mas insensible que eso, piensa en ellos como billeteras. Los visitantes se van = el dinero se va.

Te hace esto estar más interesado en la opinión del Arquitecto web?