Ir a la página de inicio

Saltar menú

Blog de ST Visual, dedicado al diseño Web, posicionamiento en buscadores, etc.

Como crear un enlace que se abra en una nueva ventana que cumpla con los estándares, sea accesible y válido para los buscadores

26 de noviembre, 2008

Hasta hace poco tiempo la mejor forma de crear un enlace que se abriera en una nueva ventana era utilizar el atributo target=”_blank” ,esta instrucción en HTML hacía que la página de destino del enlace que incorporaba este atributo se abría en una nueva ventana del navegador.

Como la mayoría de nuestros lectores saben la especificación XHTML 1.0 strict ya no permite el uso de la etiqueta target por lo que para conseguir el mismo efecto nos vemos obligados a utilizar javascript. Pero hay que tener cuidado con este código, ya que mal aplicado nos podría traer problemas.

Uno de los problemas sería que la página podría no cumplir con los criterios de accesibilidad Web y otro poblema sería la pérdida de indexabilidad de la página Web o pérdida del valor del enlace de cara a los buscadores, dependiendo del uso que le queramos dar.

Es muy habitual en este tipo de enlaces encotrarnos con el siguiente código: a xhref=javascript:void(0)” onClick=”m = window.open(‘paginadestino.htm’ … este código hace que la página de destino se abra en una nueva ventana del navegador, pero se trata de javascript intrusivo lo cual probocará que si un usuario entra sin tener activado el javascript no funcionará el enlace. Además el robot de Google no podrá seguir el enlaces.

Una buena opción sería cambiar este código por el siguiente: a xhref=”paginadestino.htm” onclick=”window.open(this.href); return false;
Con esto conseguimos que el código de nuestra página Web sea válido y cumpla con el estandar, que la páginas Web sea accesible, ya que si un usuario entra sin el javascript activado omitirá la instrucción onclick pero funcionará el enlace al estar la página de destino dentro del atributo href. Y también conseguiremos que la araña de Google pueda seguir el rastro al enlace.

Como hacer accesibles las peliculas flash en las páginas Web

20 de agosto, 2008

El flash es uno de los elementos de una página Web más inaccesible que nos podemos encontrar. Como ya sabemos el existen tres niveles de accesibilidad Web: Nivel A, Nivel AA y Nivel AAA. El Nivel A es el más básico y dentro de las pautas para cumplir con este nivel de accesibilidad está el mostrar un contenido alternativo a los elementos multimedia, entre ellos el flash.

Muchas veces incorporamos elementos flash en nuestros diseño utilizando el típico código que generar programas del tipo Dreamweaver, Front Page, etc. El código generado por estos programas son inaccesibles ya que entre otras cosas utilizan código obsoleto y además no contemplan la posibilidad de incorporar contenido alternativo para las personas que no puedan reproducir o ver la animación Flash.

El flash no deja de ser una película, un elemento multimedia. Da igual que el flash incorpore un menú, que una pequeña animación, etc. Debemos siempre de dotas a un contenido alternativo. Por ejemplo en el caso de un menú realizado con flash deberemos de incorporar un menú alternativo que se muestre cuando un usuario acceda a nuestra Web sin el flash activado, ya que de lo contrario le será imposible navegar por nuestra Web. Lo mismo nos pasa con una animación, deberemos de mostrar un contenido alternativo como puede ser una imagen, sin olvidar que también deberemos de dar un contenido alternativo a dicha imagen.

¿Y como hacemos esto? Pues utilizando la etiqueta object e ir anidando tantas etiquetas object como necesitemos, normalmente dos como mucho. En el caso de una animación, que puede ser el más complicado, deberíamos de utilizar el primer object para mostrar la película flash, a continuación anidaremos un object donde mostraremos la imagen alternativa y por último habría que incluir el texto alternativo de la imagen que hemos colocado por alternativa.

Para el que no lo sepa decir que además de la etiqueta img podemos mostrar imágenes en la Web con la etiqueta object. Un ejemplo de esto que acabamos de explicar sería como sigue:

Clasificado bajo: Accesibilidad | Sin comentarios »

La importancia del atributo alt en las imágenes de nuestra página Web

7 de febrero, 2008

Es muy habitual encontrarnos con páginas Web que omiten el atributo alt del código fuente de sus páginas Web. La etiqueta alt es un atributo que se aplica sobre la etiqueta HTML img, la encargada de insertar imágenes en la página. Este atributo sirve para poner una breve descripción de la imagen que estamos publicando y su uso es muy importante.

Es importante primeramente si queremos que nuestras páginas Web validen su código en base a los estándares HTML y XHTML de la W3C.

Es importante para que nuestras páginas Web sean accesibles, ya que los usuarios que por cualquier circunstancia no puedan ver la imagen (bien porque tengan algún tipo de ceguera o porque estén utilizando un navegador de texto) se les mostrará el texto que hayamos incluido en el atributo alt. Este es uno de los requisitos más básicos de la accesibilidad.

Es importante también desde el punto de vista SEO, ya que Google tiene en cuenta el contenido del atributo alt, esto es aprovechado por muchos SEO para incluir palabras clave dentro de este atributo, aunque como decíamos anteriormente el uso correcto es el de ofrecer una descripción breve de la imagen publicada.

Por último es importante para el fenómeno Google Images. El buscador de imágenes de Google cada vez es más utilizado y un porcentaje de las visitas a nuestras Webs puede venir por ahí, Google toma el alt como uno de los parámatros a considerar para devolver los resultados. En otro post hablaremos como posicionar imágenes en Google Images.

Diseño Web: ST Visual - © 2007 - Todos los derechos reservados - Aviso Legal - Accesibilidad

  • XHTML Válido!
  • CSS Válido!
  • CSS Válido!