Remover la línea punteada de los enlaces clickados.

Yo no se si existe la palabra 'clickados' pero me refiero a los que hacemos click en un vínculo.
Han visto ustedes que cada vez que hacemos click sobre un enlace/link/vínculo web, ya sea de texto o de imagen siempre se dibuja una delgada linea de pequeños puntos que rodean el texto o la imagen? Por si no entienden a que me refiero pueden hacer click en cualquier enlace de esta página sin soltar el botón izquierdo del mouse para que vean el efecto.

Esta era una duda que siempre había tenido, sobre el por qué de ese efecto y afortunadamente encontré la respuesta que me ilustro esa duda.

No estoy seguro de cómo esto podría ser interpretado por los amigos que piensan siempre en la accesibilidad, pero debo admitir que me siento enfermo y cansado de esos molestos bordes punteados. El punteado visual desordena algunas veces la presentación. Yo entiendo que, al usar un teclado en lugar de mouse este indicador punteado es útil en función de identificar los elementos con vinculos visualmente en una página web. Sin embargo, estoy convencido que con ciertos diseños y maromas con CSS (técnicas de reemplazo de imágenes) esto se puede volver bastante confuso tener estos bordes punteados apareciendo. Para un mejor entendimiento, pienso que aún puede afectar la experiencia del usuario.

Como ejemplos, las cosas realmente se vuelven feas en algunos navegadores cuando usas la técnica de reemplazo de imagenes de Mike Rundle para ocultar el texto al moverlo fuera de la pantalla con indentado de texto negativo. Cuando esta técnica es usada un cuadro punteado aparece y no solo la imagen visible, sino que también el texto que está indentado. Esto a menudo causará (Mozilla) un gigantesco cuadro punteado sobre el contenido puesto que se intenta enfocar el texto indentado. El elemento enfocado se pierde. Así, en este escenario parecería que los bordes usados para mostrar el enfoque del navegador se volvería inútil. No me interpreten erróneamente, pues no estoy diciendo que la técnica de reemplazo de imágenes es incorrecta. Ahora, he usado esta técnica por algo de tiempo. Es buena! Lo que estoy diciendo es que esos molestos bordes pueden causar confusión visual, en lugar de ayudar al usuario a determinar un enfoque visual.

Otro ejemplo de los bordes no solicitados mostrandose es cuando tu desencadenas un evento que no refresca la página web. Esto es bastante común en estos días con todas las llamadas trasnsparentes a lo que pasa en el servidor (AJAX). Sin un refresco de página, el enfoque del navegador permanece en el elemento que desencadeno los eventos en el navegador. Por ejemplo, esos pequeños iconos usados para expander y contraer (los iconos de menos y más -+) el contenido oculto recibirá el enfoque hasta que el usuario desate otro evento. Estos bordes a menudo pueden cambiar el aspecto visual de los iconos e imágenes. Esto puede ser un poquito sucio pero sólo manda al diablo ese efecto cuando las capas visuales cambian sin mi consentimiento.

Así, solo porque soy un controlador de fenómenos cuando van dirigidos a la capa visual he decidido eliminar los bordes punteados cuando es posible. Con los navegadores basados en Mozilla esto es bastante simple. En tu archivo CSS global simplemente pon las siguientes declaraciones.

:focus { -moz-outline-style: none; }

En Internet Explorer, por supuesto que no es tan fácil como agregar una declaración CSS. Para ocultar los bordes en IE vas a tener que añadir el siguiente atributo y valor a los elementos de enlaces (etiquetas A - link) en los que no quieres recibir los bordes punteados.

<a href="" onfocus="this.hideFocus=true;">link</a>

Ahora si eres como yo, añadir un atributo a cada uno de los enlaces suena muy desagradable, por muchas razones. Más que todo, hace que mantener el código del lado cliente sea más complicado. Con esto en mente he decidido que sería más simple escribir algo de Javascript que añadiría este atributo y valor a todos los enlaces en un documento HTML.

Observa este código Javascript de abajo.
[source language='javascript']
[/source]

Ejemplo real: Click para ver página de ejemplo

Código fuente completo del ejemplo anterior:
[source language='html']







enlace 1

enlace 2


[/source]

La cuestión de la Accesibilidad
El efecto que ocurre cuando pulsamos un enlace es una característica de accesibilidad para las personas que no pueden usar el mouse por alguna razón. Se supone que muestra en donde se encuentra el enfoque cuando usas la tecla TAB para moverse a través de un documento ó página web, y desempeña un buen trabajo.

Pero porque aparece cuando estás usando el mouse para hacer clic en un vínculo?
Esta pista naturalmente disimulada se ha vuelto una convención a través de todos los navegadores, asegurando al usuario cuando ellos han hecho click correctamente sobre un enlace. Sin él, los usuarios intentarían muchas veces de hacer click en un enlace que no halla funcionado y si el servidor no tiene una respuesta inmediata ellos asumen que el navegador se ha paralizado y en consecuencia contemplan la posibilidad de cerrarlo.

Artículo actualizado el 26 de junio de 2008.

Parte del anterior artículo ha sido una traducción completa al español del artículo publicado en el sitio web de Cody Lindley el cual se titula Hiding the Browsers Focus Borders. Should I, Or Shouldn’t I?. Pueden visitarlo haciendo click en el enlace anterior.