Alejandro Arco

En muchas ocasiones durante un desarrollo web accesible, necesitamos usar el atributo target=”_blank” para abrir mediante un enlace externo una ventana nueva.

En este caso, haremos uso de la librería desarrollada en javascript para abrir los enlaces externos en pestañas nuevas de nuestro navegador, cumpliendo los estándares web del W3C y las pautas de accesibilidad web correspondientes.

Características target=”_blank” accesible con javascript

ExternalLinks es una pequeña librería en javascript que nos permite incluir el atributo target=”_blank” de forma accesible y usable, permitiendo agregar enlaces externos de forma no intrusiva, aunque el navegador no tenga javascript habilitado.

• Todos los enlaces externos de abren en pestañas nuevas.
• Y también, los enlaces que hagan uso del atributo rel=”external”.
• Cumple los estándares web del W3C y las pautas de accesibilidad web.
• El código fuente de nuestro desarollo web queda más limpio y legible.

Descargar ExternalLinks JS

ExternalLinks JS (749 bytes)

Código target=”_blank” accesible con javascript

A continuación, adjunto el código de la librería ExternalLinks para ejecutar el atributo target=”_blank” de forma no intrusiva:

/**
 * Enlaces Externos Accesibles
 * (c) 2009 Alejandro Arco - http://www.alejandroarco.es
 * MIT-style license
 */
setExternalLinks=function() {
	if(!document.getElementsByTagName) { return null; }

	var anchors = document.getElementsByTagName('a');
	for(var i=0;i<anchors.length;i++) {
		var anchor = anchors[i];
		if((anchor.getAttribute('href').substr(0,7)=='http://' && anchor.getAttribute('href').lastIndexOf(document.domain)==-1) || anchor.getAttribute('rel')=='external') { anchor.setAttribute('target','_blank'); }
	}
}

if(document.all&&window.attachEvent) { window.attachEvent("onload",setExternalLinks); } // IE-Win
else if(window.addEventListener) { window.addEventListener("load",setExternalLinks,false); } // Otros

Muchos 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.

La usabilidad web se refiere a la facilidad o dificultad de uso de una aplicación web, es decir, al nivel en el que el diseño de una interfaz web facilita o dificulta su uso. De este modo, la experiencia del usuario se basa en estos tres principios de usabilidad web: facilidad de uso, flexibilidad en el intercambio de información y la robustez de la web.

Todo sitio web usable debe responder a las necesidades del usuario, de este modo detallaré a continuación algunas de las pautas de usabilidad web comunes a cualquier interfaz web.

Pautas de usabilidad web

• Cumplir con los estándares web de la W3C.
  Validar XHTML y CSS
• Hacer que nuestro sitio web sea accesible.
  Validar accesibilidad web
• Realizar mapa web, distribución racional y consistente.
• Tiempos de carga reducidos, captar la atención del usuario.
• Logotipo enlazado con la sección de inicio.
• Eslogan que describa la temática del sitio web.
  Usabilidad web: administracion de sistemas y desarrollo web de aplicaciones.
• Lo más importante, siempre debe aparecer al principio de la web.
• Existencia de un buscador que funcione correctamente.
• Texto claramente legible y formateado, incluso en las imágenes.
• Botones de acción llamativos.
  Usabilidad web: botón llamativo de comprar ó enviar formulario.
• Enlaces para acción alternativa, aunque menos deseables.
  Usabilidad web: botón adicional de reestablecer formulario menos llamativo.
• Diseño web inteligente con facilidad de navegación.
  Usabilidad web: menú en la cabecera y en el pie de página redundante.
• No debe haber momento de fin de proceso.
  Usabilidad web: una vez finalizado un proceso de compra se mostrarían artículos adicionales destacados.
• Control de errores 404.
  Usabilidad web: página 404 personalizada con información relevante del sitio.
• Hacer uso de atajos de teclado “accesskey”.
  Usabilidad web: asignar atajos de teclado a las secciones estáticas relevantes.

¿Podemos hablar por tanto de los parámetros de usabilidad web como algo que va más allá de una guía de estilo realizada por el diseñador web? La respuesta es sí.