El Comercio Digital

Webmaster Libre

Subtitulo del blog

Context Hover, destaca todos los enlaces con el mismo destino a la vez

Hay algunas sutiles diferencias en los sitios web que los hacen más o menos usables. Una de ellas es, sin lugar a dudas, el resaltado de los enlaces cuando hacemos foco sobre ellos. Con esta pequeña pista visual ofrecemos a nuestros usuarios una forma simple de diferenciar un hipervínculo de cualquier otro tipo de texto formateado.

Por lo que se vé, Opera Mini hace un esfuerzo extra y resalta no uno si no todos los enlaces que apuntan al mismo lugar cuando hacemos foco sobre uno de ellos. Una pequeña pista que puede añadir un poco más de usabilidad a nuestros sitios. Todo esto lo digo gracias al artículo de Kilian Valkhov, que al comprobar lo práctico de esa interesante característica de Opera Mini, decidió emularla con jQuery y CSS.

La técnica consiste en crear un class .hover que emule completamente el aspecto de nuestra pseudo-clase :hover


a:hover,
a.hover { … }

Y luego, con la ayuda de jQuery detectamos los enlaces que comparten URL de destino y al hacer foco sobre uno de ellos aplicamos la clase .hover a los demás. Eso si, nos apoyamos en eventos de ratón y por tanto sólo es funcional con usuarios que usan uno y los que navegamos principalmente con el teclado nos quedamos sin usabilidad extra.


$("a").hover(
function() {$("[href="+$(this).attr("href")+"]").addClass("hover");},
function() {$("[href="+$(this).attr("href")+"]").removeClass("hover");}
);

Kilian además de explicarnos la técnica, muy sencillita, nos ha dejado una demo para que le echemos un vistazo.

Es una idea que me gusta pero me gustaría más si usase eventos como focus y blur para no depender de la disponibilidad del ratón. He hecho una prueba rapidita y me ha quedado un javascript algo más largo pero que funciona para navegación con teclado y con ratón. Estoy segura de que se puede mejorar pero aquí os lo dejo para que sirva de “inspiración”:


$(document).ready(function(){
$("a").focus(
function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");});
$("a").blur(
function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
$("a").hover(
function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");},
function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
});

Se aceptan sugerencias en los comentarios.

Otras entradas

Esta entrada fue publicada por Alma Fernández el Martes, 27 de Mayo de 2008 y está archivada en: Javascript. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

1 Comentario

Agrega el tuyo
  1. [...] I did not cover enough in my first article is the accessibility side of things. This has led to a Spanish article adding focus and blur events to the effect as well. That might seem like a good and accessible [...]

    Context hover - accessibility | KilianValkhof.com 2 Junio, 2008

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)