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

Hace unos meses publiqué un artículo denominado formularios accesibles con javascript, para ello usaba el atributo onsubmit de la etiqueta form para validar el formulario web con javascript.

A continuación, explicaré con un ejemplo como implementar en nuestro desarrollo web, javascript no intrusivo para validar formularios accesibles sin onsubmit.

Ventajas validar formularios accesibles sin onsubmit

• Se cumplen los estándares web del W3C.
• Se cumplen las pautas de accesibilidad web.
• Código HTML más limpio y compacto.
• No es necesario tener javascript habilitado.
• Compatible con la totalidad de navegadores web.

Ejemplo validar formularios accesibles sin onsubmit

Descarga el ejemplo validar formularios accesibles sin onsubmit.

Para validar formularios web lo primero que debemos hacer es embeber el código javascript o cargarlo mediante un fichero externo entre las etiquetas head de nuestro código html:

<script type="text/javascript">
/**
 * Validar Formulario Accesible sin onSubmit
 * (c) 2009 Alejandro Arco
 * Por Alejandro Arco - http://www.alejandroarco.es
 */
validateForm=function() {
	var nombre = new Array(document.getElementById('nombre'), document.frm['nombre'].value);
	var apellidos = new Array(document.getElementById('apellidos'), document.frm['apellidos'].value);
	var email = new Array(document.getElementById('email'), document.frm['email'].value);
	var telefono = new Array(document.getElementById('telefono'), document.frm['telefono'].value);
	var consulta = new Array(document.getElementById('consulta'), document.frm['consulta'].value);
	var submit = document.getElementById('submit');	

	/* Eventos */
	nombre[0].onfocus = onFocus; nombre[0].onblur = onBlur;
	apellidos[0].onfocus = onFocus; apellidos[0].onblur = onBlur;
	email[0].onfocus = onFocus; email[0].onblur = onBlur;
	telefono[0].onfocus = onFocus; telefono[0].onblur = onBlur;
	consulta[0].onfocus = onFocus; consulta[0].onblur = onBlur;
	submit.onclick = validateFields;

	/* Funciones */
	function onFocus() { if(document.frm[this.name].value==eval(this.name)[1]) document.frm[this.name].value='' }	

	function onBlur() {
		var value = document.frm[this.name].value;
		value = value.replace(/^\s*/, ''); value = value.replace(/\s*$/, '');
		if(!value) document.frm[this.name].value = eval(this.name)[1]
	}

	function validateFields() {
		if(document.frm['nombre'].value == nombre[1]) { document.frm['nombre'].focus(); alert('El campo "nombre" es obligatorio.'); }
		else if(document.frm['apellidos'].value == apellidos[1]) { document.frm['apellidos'].focus(); alert('El campo "apellidos" es obligatorio.'); }
		else if(document.frm['email'].value == email[1]) { document.frm['email'].focus(); alert('El campo "email" es obligatorio.'); }
		else if(document.frm['consulta'].value == consulta[1]) { document.frm['consulta'].focus(); alert('El campo "consulta" es obligatorio.'); }
		else { return true; }
		return false;
	}
}

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

Posteriormente, crearemos nuestro formulario web accesible y añadiremos su código entre las etiquetas body de nuestro contenido HTML.

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

En este ejemplo no hacemos uso del atributo onsubmit para validar nuestro formulario web mediante javascript no intrusivo, de este modo, obtenemos un código html más limpio y compacto.

Si tenéis alguna duda referente a la validación de formularios web accesibles sin onsubmit, dejadme un comentario en este artículo y lo responderé gustosamente. ¿Habéis validado anteriormente formularios web con javascript no intrusivo?

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.

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

Tras escribir mi anterior artículo Validar flash en XHTML y HTML sin hacer uso de javascript para maximizar la compatibilidad, os traigo un nuevo artículo para validar flash. Esta vez mediante el uso de javascript con la librería swfobject, que se ofrece bajo licencia MIT License.

De este modo, os sugiero otra forma de cumplir los estándares web de la W3C y las pautas de accesibilidad web respecto a la validación flash que tantos problemas nos ha dado a los desarrolladores web puristas de la validación web y el SEO.

Características validar flash con JavaScript y SWFObject

SWFObject es una pequeña librería en javascript que nos permite incluir contenido flash de forma práctica y sencilla, permitiendo agregar contenido alternativo en caso de que el navegador no tenga habilitado javascript o el flash player.

• No se hace uso de la etiqueta embed y noembed.
• No hay redundancia de información en la inicialización del contenido flash.
• Cumple los estándares web de la W3C y las pautas de accesibilidad web.
• Permite visualizar contenido alternativo a los usuarios que no tengan el flash player o naveguen con javascript deshabilitado.
• El código fuente de nuestro desarollo web queda más limpio y legible.

Parámetros constructor SWFObject, validar flash, validar swf

• SWFObject(swf, id, width, height, version);
• swf - La ruta y el nombre de su archivo flash.
• id - La id de su objeto flash.
• width - El ancho de su objeto flash.
• height - El alto de su objeto flash.
• version - La versión requerida del flash player.

Ejemplo validar flash con JavaScript y SWFObject

Lo primero que debemos de hacer es incluir nuestra librería swfobject entre la etiqueta <head>…</head> de nuestro documento.

<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>

Posteriormente, crearemos nuestra contenedor flash con id única donde irá insertado nuestro flash y  le agregaremos el contenido alternativo, todo ello irá ubicado entre la etiqueta <body>…</body> de nuestro documento.

<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div><br />

Después, llamaremos al constructor SWFObject de la librería en javascript agregada anteriormente.

<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>

Finalmente, nuestro código HTML completo usando la librería SWFObject quedaría de la siguiente forma:

<html>
<head>
<title>Validar flash con JavaScript y SWFObject</title>
<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>
</head>

<body>
<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div>
<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>
</body>
</html>

Como podéis observar la librería SWFObject es una herramienta muy potente y fiable en el desarrollo web de aplicaciones siempre y cuando el navegador del usuario tenga javascript habilitado.