Mejor accesibilidad

10/jun/2009 8

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.

¿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 son una gran ayuda:

a:after {
content: " [" attr(accesskey) "] ";
}

Ver ejemplo

Comentarios

  1. kroska [#]

    link direto para o conteúdo, no topo.
    alt nas imagens,
    accesskeys,
    recurso sonoro para captcha,
    conteúdo alternativo para flash,
    manter href funcionando nos links,
    usar js de forma responsável
    etc

    bom post .. será um série? UX UX UX

  2. kroska [#]

    ampliar fontes e contraste também é importante .. t+ um abraço

  3. Jorge Epuñan [#]

    isso mesmo kroska, voce listou muito bem muitos elementos basicos de accessibilidade; accesskey eh soh mais um deles, muito facil de implementar mais lamentavelmente pouco usado; por isso o quis ressucitar.

    claro q continuarei escrevendo sobre UX, eh um tema q me apaixona e q estou sempre estudando. abraços!

  4. Seba [#]

    Una vez más, gracias.

  5. André [#]

    En Safari para Windows se usa Alt+accesskey.

  6. af_naf [#]

    Encontre de mucha utilidad tú artículo, pero probe en Chrome y no funciona el atajo de teclado. tú crees que sea lagún problema de versión de mi navegador?

  7. Manifesto al diseñador → CSSLab [#]

    […] accesibilidad no sólo se refiere a la discapacidad del usuario (ceguera, dislexia, daltonismo) sino que se […]

Responder a af_naf ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab