07Ene
Desarrollo frontend

Iconos como enlaces

Los iconos juegan un papel muy beneficioso para el usuario puesto que son altamente descriptivos y ayudan rápidamente al reconocimiento de la acción. Pero también pueden ser un arma de doble filo, tal cual se ha comentado en Reconocer o memorizar en un sitio web.

En este post pretendo explicar como diseñar iconos que funcionen como enlaces, teniendo en cuenta 4 objetivos:

  • Accesibilidad
  • Usabilidad
  • Estándares
  • Semántica

CSS

.ico {
	padding-left: 22px;
	background-position: center left;
	background-repeat: no-repeat;
	background-color: transparent;
}
.iemail {background-image: url(images/email.gif); }
.ifeed { background-image: url(images/feed.gif); }

He definido una clase llamada «ico» que afectará al elemento XHTML que tiene el icono.

  • Como el icono se va a situar a la izquierda debemos correr el texto contenido con padding-left, el tamaño es de 22px teniendo en cuenta que el icono mide 16px.
  • Si el font-size tomado por herencia es menos alto que icono observaremos que nos queda recortado, para solucionarlo basta con especificar un line-height igual al alto del icono.
  • A continuación se especifica que el icono será expuesto como fondo:
    • Centrado y a la izquierda.
    • Sin repeticiones (ni horizontales, ni verticales)
    • Y con un color de fondo transparente, esta regla es necesaria para no levantar posibles alertas relacionadas con el color de primer y segundo plano.

Posteriormente se indica en cada clase la imagen icono-gráfica con ayuda de background-image.

XHTML

<ul id="options">
	<li><a class="ico iemail" href="http://aurea.es/email/">E-mail</a></li>
	<li><a class="ico ifeed" href="http://aurea.es/feed/">Feed RSS</a></li>
</ul>

Finalmente, en el elemento que deseamos incorporar el icono indicamos la clase «ico» y seguida la clase que define cada imagen «iemail» o «ifeed».

Conclusión

Con este método logramos los objetivos:

  • El icono es una imagen de fondo gobernada por CSS lo cual no interfiere en el contenido textual y accesible. Tampoco será necesario caer en la redundancia de un icono con el atributo alt y a continuación el enlace similar.
  • Mejoramos la usabilidad, por un lado contamos con el poder representativo del icono (cumpliendo la función semántica) y por otro lado aportamos un significado detallado de la acción (cumpliendo la función sintáctica). Otra mejora en usabilidad es el hecho de que ambos elementos (gráfico y texto) ejecutan la función del enlace y por ello el elemento en general resulta más rápido de «atinar» y hacer clic (siguiendo la teoría de la ley de Fitts).
  • Estamos usando en todo momento estándares web, lo cual beneficia en la compatibilidad presente y futura del método.
  • Como se ha dicho anteriormente el icono es tomado por CSS y plasmado como imagen de fondo, con ello evitamos incrustar la imagen en el contenido de la página web lo cual sería simplemente decorativo, en cambio delegamos toda la semántica al texto contenido por el elemento.
Compartir: