Ponerse en el lugar del usuario; es un principio básico que deberíamos adquirir si queremos que nuestro proyecto web tenga éxito no sólo para nuestros bolsillos, sino que perdure y tenga pregnancia en la [experiencia del usuario][1].

¿Qué marcaría una diferencia? El diseño, obviamente es lo primero que encanta; contenido bien estructurado y ordenado, pensado hacia una mejor buscabilidad y encontrabilidad; funcionalidades útiles y no sólo efectistas, también. Pero insisto, ¿cómo lo llevamos aún más allá?

La accesibilidad es la capacidad de acceso a la web y sus contenidos por todos los usuarios, independiente de la discapacidad física, intelectual o técnica que tengan.

Si escribimos nuestro HTML con una semántica correcta y con el diseño separado en su propia hoja de estilos, ya estamos aportando a una mejor acccesibilidad permitiendo a los ciegos leer el contenido a través de un lector de pantalla, además de independizar el dispositivo sobre el cual será vista la web (teléfonos celulares, laptops, computadores de escritorio, etc.). Si tenemos el tamaño de los textos de una dimensión considerable y ojalá en una unidad relativa que sea independiente de la resolución del usuario, estaremos garantizando mejor accesibilidad a usuarios con problemas visuales. Ahora, si le damos la posibilidad al usuario de escojer el tamaño te fuente que más le acomode, mejor aún.

Estas normas mínimas de accesibilidad pueden aumentarse con muy poco esfuerzo, y ahora me gustaría presentar uno que no es muy utilizado pero no por eso menos importante: el atributo accesskey. Con él, permitimos que el usuario navegue por enlaces sólo con el uso de teclas especificadas en el desarrollo del sitio. Su implementación es bastante rápida:

<a href="index.html" accesskey="i">Inicio</a>

Así, permitimos que se pueda ir a la página de inicio no sólo haciendo click en el enlace, sino que utilizando la combinación control+i del teclado. Lamentablemente esta combinación es arbitraria por plataforma:

  • Chrome: Alt+Accesskey
  • Firefox: Alt+Shift+Accesskey (Win) Ctrl+Accesskey (Mac)
  • IE: Alt+Accesskey
  • Opera: Shift+Esc+Accesskey
  • Safari: Ctrl+Accesskey

Además, deberías indicarle a tus usuarios la tecla correspondiente al accesskey, y los [selectores avanzados de atributo][2] son una gran ayuda:

a:after {<br />
  content: " [" attr(accesskey) "] ";<br />
}

[Ver ejemplo][3]{.verejemplo}

[1]: http://www.csslab.cl/2008/11/20/nuestro-verdadero-cliente/ “Enlace en CSSLab a “Nuestro verdadero cliente”” [2]: http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/ “Enlace en CSSLab a “Selectores avanzados de atributos”” [3]: http://www.csslab.cl/ejemplos/accesskey “Enlace en CSSLab a “Ejemplo Accesskey””