Front-end, Web Standards & Accessibility

Voy a comentar una técnica de la cual no soy partidario. Pero como ya sabéis, existen veces en las que tus ideas y argumentos no coinciden con los del cliente y te ves obligado a usar este tipo de cosas.

Imagen ilustrativa de enlace que recibe el foco

Cuando hacemos clic en un enlace los navegadores te muestran una línea discontinua para indicar el elemento que ha recibido el foco.
Parece una tontería pero fijaros que los navegadores usan inteligentemente contornos dinámicos (propiedad outline de CSS) para no afectar a la maqueta del diseño web.

¿Como evitar el foco?

Esta línea discontinua podemos eliminarla con una simple regla de CSS donde hacemos uso de la pseudo-classe :focus.

	*:focus { outline: none; }

Este ejemplo es el más global, afectando a todos los elementos. Podemos usar algo más concreto y afectar únicamente a nuestro menú de navegación principal. Por ejemplo:

	#menu a:focus { outline: none; }

¿Y el por que no me gusta eliminar el foco?

Resulta evidente… Pero algunas simples razones:

• Accesibilidad, por ejemplo las persona con poca visión pueden así reconocer adecuadamente en que elemento esta operando.
• Usabilidad, no se enfatiza y refuerza el elemento sobre el que se hace clic.
• Otro ejemplo, ¿qué sucede si quieres navegar con el tabulador…?