Alejandro Arco Alejandro Arco

Formularios accesibles con javascript

accesibilidad, usabilidad 6 Comentarios »

formulario-accesible - Formularios accesibles con javascriptMuchos desarrolladores web de aplicaciones hacen uso formularios para el envío y recepción de información, pero no todos hacen formularios accesibles y usables, que permitan además validar los campos del formulario através de javascript (en caso de que este habilitado).

En esta situación haremos uso de la accesibilidad web y la usabilidad web, para en conjunto, realizar formularios accesibles con javascript en los desarrollos web de aplicaciones que realicemos.

Ventajas formularios accesibles

  • Compatible con la totalidad de navegadores web.
  • No es necesario tener javascript habilitado.
  • Permite validar los campos del formulario por javascript.
  • Se cumplen los estándares web de la W3C.
  • Se cumplen las pautas de accesibilidad web.

Ejemplo formularios accesibles con javascript

Descarga el ejemplo Formularios accesibles con javascript.

En primer lugar debemos añadir entre las etiquetas head el código javascript para validar el formulario accesible:


<script type="text/javascript">
  	function validarFrm() {
	  if(!document.frm['nombre'].value) { document.frm['nombre'].focus(); alert('El campo "nombre" es obligatorio.'); }
	  else if(!document.frm['apellidos'].value) { document.frm['apellidos'].focus(); alert('El campo "apellidos" es obligatorio.'); }
	  else if(!document.frm['email'].value) { document.frm['email'].focus(); alert('El campo "email" es obligatorio.'); }
	  else if(!document.frm['consulta'].value) { document.frm['consulta'].focus(); alert('El campo "consulta" es obligatorio.'); }
	  else { document.frm.submit(); }
	  return false;
	}
</script>

Más tarde, entre las etiquetas body añadimos el código html del formulario usable:


  <form name="frm" action="#submit" enctype="multipart/form-data" method="post" onsubmit="return validarFrm()">
    <fieldset>
	  <legend>Formulario accesible</legend>
	  <p>Ejemplo de <strong>formulario accesible</strong> con <em>javascript</em>, no olvide que todos los campos marcados con (*) son obligatorios.</p>
	  <label for="nombre">Nombre *<input type="text" name="nombre" id="nombre" accesskey="n" tabindex="1" /></label>
	  <label for="apellidos">Apellidos *<input type="text" name="apellidos" id="apellidos" accesskey="a" tabindex="2" /></label>
	  <label for="email">Email *<input type="text" name="email" id="email" accesskey="e" tabindex="3" /></label>
	  <label for="telefono">Teléfono <input type="text" name="telefono" id="telefono" accesskey="t" tabindex="4" /></label>
	  <label for="consulta">Consulta *<textarea name="consulta" id="consulta" accesskey="c" tabindex="5" cols="1" rows="1"></textarea></label>
	  <label for="submit"><input type="submit" name="submit" id="submit" accesskey="s" tabindex="6" value="Enviar" /></label>
	</fieldset>
  </form>

El código html referente al formulario usable contendrá:

  • Etiquetas fieldset, legend, label e input.
  • Etiqueta form con el atributo onsubmit.
  • Llamada a la función en javascript para validar los campos del formulario.
  • Los atributos name, id, accesskey y tabindex en los campos del formulario.
  • Campo tipo submit para poder enviar el formulario sin javascript.

Si seguimos las prácticas detalladas anteriormente, nuestros formularios accesibles serán además formularios usables por cualquier usuario con acceso al sitio web. Responderé cualquier duda referente a las etiquetas y/o atributos usados en el artículo.

OME’09: Congreso de Marketing Online 2009

talleres y ponencias Escribir un comentario »

ome-marketing-online - OME’09: Congreso de Marketing Online 2009El próximo 1 y 2 de abril de 2009 se celebrará la quinta edición de la feria congreso para Marketing Digital y Publicidad en Internet (OME’09), este evento se realizará en Madrid (IFEMA) en el Pabellón 2 y en el Auditorio Sur.

La entrada al congreso de marketing digital es gratuita e incluye el acceso a la feria y a las 3 salas de conferencias del pabellón 2 para aquellos asistentes que se registren online.

En esta feria de publicidad en internet se tratarán temas tan diversos como el marketing en buscadores, email marketing, analítica web y el marketing en las redes sociales entre muchos otros.

Congreso de Marketing Online 2009 en Madrid

Horario 1 de Abril de 2009: 10.00 - 20.00 h.
Horario 2 de Abril de 2009: 09.00 - 18.00 h.
IFEMA - Feria de Madrid (Pabellón 2 y Auditorio Sur)
Madrid, España
Inscripción al Congreso de Marketing Online 2009 en Madrid

Este congreso de marketing online es un punto de encuentro del sector del marketing digital. Con un poco de suerte nos vemos por allí…

Rollover CSS en imágenes sin javascript

css 10 Comentarios »

css - Rollover CSS en imágenes sin javascriptEn el desarrollo web de aplicaciones es muy común usar rollover en las imágenes, por este mismo motivo detallaré posteriormente una forma de realizar rollover CSS en imágenes sin usar javascript.

Para que funcione en Internet Explorer 6 el rollover CSS es necesario que la imagen esté dentro de un enlace, ya que la única etiqueta compatible con este navegador es a:hover.

Actualmente muchos desarrolladores web siguen usando funciones javascript y etiquetas HTML como onload, onmouseover y onmouseout para realizar rollover en imágenes… siendo este método poco accesible, ya que es necesario que el usuario web tenga javascript habilitado.

Ventajas rollover CSS en imágenes

  • Compatible con Internet Explorer 6 y 7, y derivados de Mozilla como Firefox.
  • Código CSS y HTML más reducido y limpio.
  • No es necesario tener javascript habilitado.
  • Se cumplen los estándares web de la W3C.
  • Se cumplen las pautas de accesibilidad web.

Ejemplo rollover CSS en imágenes

Descarga el ejemplo Rollover CSS en imágenes.

En primer lugar debemos crear un gif transparente y los estados over y out de la imagen que deseamos enlazar para poder realizar el rollover CSS en imágenes.

Posteriormente definimos el estilo CSS del contenedor de la imagen con la imagen de fondo out definiendo además en el las dimensiones de la imagen.

<style type="text/css">
img { border:0; }
#rollover { width:175px; height:27px; background:url(/wp-content/uploads/2009/03/desarrollo-web-off.gif) top left no-repeat; }
#rollover img, #rollover a:hover { width:175px; height:27px; }
#rollover a:hover { position:absolute; background:url(/wp-content/uploads/2009/03/desarrollo-web-on.gif) top left no-repeat; }
</style>

Después agregamos las dimensiones de la imagen a enlazar mediante CSS a la etiqueta img y al propio a:hover para asegurarnos la compatibilidad con algunos navegadores y que el enlace abarque todo el contenedor.

<h1>Ejemplo Rollover CSS en imágenes</h1>
<div id="rollover"><a href="http://www.alejandroarco.es" title="desarrollo web" accesskey="1"><img src="/wp-content/uploads/2009/03/pixel.gif" alt="desarrollo web" /></a></div>

Finalmente, definimos al estilo a:hover que se posicione de forma absoluta respecto al contenedor y le asignamos la imagen de fondo over correspondiente.

Si tenéis alguna duda sobre el funcionamiento del rollover CSS en imágenes sin javascript, no dudéis en dejarme un comentario al respecto.

Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.