jueves, 23 de octubre de 2003

Atajos de teclado en documentos Web

Con HTML el diseñador puede definir teclas de acceso rápido a diferentes elementos de la página. Parece una idea estupenda, pero en la práctica no siempre cumple con su objetivo. Las teclas de acceso rápido pueden mejorar la accesibilidad, pero sólo si sabemos usarlas adecuadamente.

Este artículo explica las teclas de acceso rápido en HTML; porqué parecen una buena idea, y porqué no ayudan tanto como era de esperar. En Technosite ha sido desde hace mucho tiempo causa de confusión, por lo que he decidido investigar a fondo el tema. Y no es fácil explicar. Si no tienes tiempo para leerlo todo, puedes saltar directamente a mis recomendaciones o conocer una alternativa.

Introducción

Si no tienes uso de los dedos, no pudes hacer click aquiEl usuario experto del ordenador conoce un secreto para trabajar con menos esfuerzo: los atajos de teclado. Para copiar un texto no necesita coger el ratón: con un rápido control+C se realiza la misma operación y en un tiempo mucho menor que el usuario novato. No obstante, pocos saben que pueden, o podrían hacer lo mismo para navegar dentro de una página web.

Pero no son sólo los usuarios expertos que sacan provecho de su teclado: hay usuarios que no utilizan el ratón (por ejemplo los que usan ordenador portátil que no dominan el "touchpad") y muchos que no pueden manejar ratón por discapacidad. Los usuarios invidentes no ven el puntero del ratón; tienen que usar el teclado. Y un usuario invidente con lector de pantalla puede trabajar más rápido que uno vidente con ratón.

Pensando en estos dos grupos de usuarios (sobre todo el segundo), el W3C incorporó en HTML la posibilidad de asignar una tecla de acceso rápido a los elementos de la página. HTML 4.01 lo describe así:

Este atributo asigna una tecla de acceso a un elemento. Una tecla de acceso es un carácter único del conjunto de caracteres del documento...

Al pulsar la tecla de acceso asignada a un elemento, el foco se dirige hacia el elemento. La acción que tiene lugar cuando el foco se dirige hacia un elemento depende del elemento. Por ejemplo, cuando un usuario activa un vínculo definido por el elemento <a></a>, el agente de usuario normalmente sigue el vínculo. Cuando un usuario activa un radiobotón, el agente de usuario cambia el valor del radiobotón. Cuando el usuario activa un campo de texto, éste permite la entrada de texto, etc.

El punto 9.5 de las pautas WCAG nos instan a proporciona atajos de teclado:

9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario.

Aunque sólo es de prioridad 3. Es decir que si no definimos atajos de teclado, esto no significa que el sitio sea inaccesible. Este punto recomienda asignar teclas para los elementos de formulario. En este artículo sólo considero atajos para hipervinculos, aunque los mismos principios son de aplicación para formularios (y creo que un formulario bien diseñado no necesita atajos de teclado.)

El principio es fácil de comprender: el autor de la páginas asigna una tecla a los distintos elementos de la página, por ejemplo el enlace a la página principal en la barra de navegación, o la casilla de búsqueda. Entonces para activar el enlace basta con teclear la letra o el número correspondiente. Parece muy bien, pero la realidad es bien distinta.

Primero repasamos los problemas más importantes que tiene esta forma de acceder a la página, y luego las posibles soluciones.

Si fuera tan sencillo...

Por desgracia, a pesar de su aparente utilidad, pocas páginas definen estos atajos de teclado, y aun menos usuarios saben aprovecharlos. ¿Si la idea es tan buena, por qué no se utilizan más? No comprendemos bien las teclas de acceso rápido, y tienen varios problemas que dificultan su implementación.

El usuario no sabe si están definidos o no

En primer lugar, pocas páginas definen los atajos de teclado. Cuando sí existen, el usuario no se da cuenta. No existe una manera fácil y bien conocida entre los usuarios, para indicar la existencia de teclas rápidas.

Soluciones: Advertir al usuario de la existencia de teclas rápidas

El usuario no sabe qué teclas hemos asignado

Si superamos el primer problema, y el usuario se da cuenta que existen teclas rápidas para la página. ¿Cómo puede saber cúales son? Casi ningun navegador indica la definición de los atajos de teclado (iCab sí lo hace).

Discapnet visto con el navegador iCab, que indica la tecla de acceso con corchetes junto al enlaceEl navegador iCab indica la letra de acceso rápido entre parentesis. (Gracias a Charles McathieNevile por la imagen.)

Cada diseñador asigna las teclas a su manera, por lo que el usuario tiene que aprenderlas de nuevo para cada sitio. El usuario no sabe qué elementos tienen una tecla asignada, y no sabe qué teclas el diseñador ha asignado. ¿Qué letras elegimos? Para la página de inicio, por ejemplo: ¿I para Inicio? ¿P para Principal? ¿H para Home? No lo olvides, nuestro propósito es facilitar la navegación, no dificultarla. El usuario se confunda más todavía si asignamos teclas rápidas a muchos enlaces en la página.

Solución: Informar al usuario sobre las teclas definidas

Solución: Sólo asignar teclas a elementos de uso frecuente que ayudarán de verdad

Las teclas causan conflicto con las del navegador

Peor aún, las teclas del documento tienen prioridad sobre las del navegador. Si la página asigna la letra F, el usuario no puede acceder al menu de favoritos con el teclado (si no sabe un truco con la tecla ALT). Si comparamos los distintos navegadores y sus distintas teclas de menú, nos quedamos con un conjunto muy reducido. Si quitamos las teclas empleadas por los navegadores Opera, Netscape y IE en ingles, por ejemplo (en un mensaje al grupo WAI-IG) sólo nos quedan 14 carácteres disponibles ( {cijklopqrsuxyz 0123456789 `-=[]\;',./} de los cuales las letras no son exactamente los más útiles).

Y el problema no termina ahí: Aunque el diseñador elija bien las teclas para no coincidir con las de los navegadores en su idioma, ¿cómo sabe cuáles son las teclas para navegadores en otros idiomas? El idioma del interfaz del navegador no es necesario el mismo de la página. El idioma del usuario no será necesariamente el del navegador: puede ser un castellano hablante en un país con otro idioma o con un navegador nuevo que sólo existe en inglés, por ejemplo. Si el usuario trabaja, por ejemplo, con la versión francesa, alemana o rusa del navegador, este tendrá reservadas otras teclas. Yo mismo soy testigo: uso las versiones inglesas de diferentes navegadores, porque el inglés es mi idioma materno, pero leo todos los días páginas en castellano. Suponemos que el diseñador de la página asigna la tecla T a un elemento, y comprueba que en IE/Windows no está asignado a la barra de menú. Muy bien, pero yo, con mi navegador en inglés, no puedo acceder al menú de herramientas (Tools). Es verdad que existe una manera de superar este problema en IE/Windows. ¿Pero, cuántos usuarios lo conocen? ¿Lo conoces tú? (Respuesta).

Uno de los peores problemas es el conflicto no con los navegadores gráficos, sino con las ayudas técnicas para invidentes, especialmente Homepage Reader de IBM y WindowEyes de GW Micro. Con HomePage Reader la combinación de teclas Alt+L esta reservada para leer en modo sólo enlaces y esta combinación deshabilita la asignación en la página. En España hay pocos usuarios de WindowEyes, pero en otros países sí es muy utilizado. Las pautas de diseño Web del Gobierno de Canadá desaconsejan su uso precisamente por este motivo. Me parece que los atajos de teclado pueden ayudar a los usuarios con discapacidad motriz que trabajan con teclado, a coste de algunos usuarios invidentes que utilizan ciertos navegadores de voz.

Soluciones: Elegir teclas que no causen conflicto con las del navegador

El usuario no puede teclear el caracter

Aunque hablamos de teclas de acceso rápido, lo que definimos es un carácter. Tenemos que pensar en cómo el usuario puede teclear el carácter. El teclado del diseñador de la página no es necesariamente igual al teclado del usuario. La eñe es fácil con el teclado español, pero no para el usuario griego o alemán. ¿Puedes teclear "Œ"?

Imagen de teclado griego, no lleva tecla eñeBien, tecla rápida, Ñ ¡Vaya! ¿Dónde está la tecla?

Soluciones: Elegir caracteres fáciles de teclear

¿Entonces qué hacer?

Si no tienes uso de los dedos, los atajos de teclado te pueden devolver la felicidadEs importante tener en cuenta que para aprovechar los atajos de teclado que hemos definido, primero el usuario tendrá que hacer cierto esfuerzo:

  1. Enterarse de que los hemos definido
  2. Averiguar cuáles son
  3. Aprender y recordar las teclas
  4. Conseguir teclear el carácter correspondiente
  5. Superar los eventuales conflictos entre página y navegador

Tenemos que evaluar la frecuencia de uso de cada elemento al cual pensamos asignar una tecla. ¿Cuántas veces el usuario va a accionar ese elemento? ¿Le compensará aprender la tecla?

Cada uno de estos problemas tiene una solución.

Advertir al usuario de la existencia de teclas rápidas

Problema: El usuario no sabe si están definidos o no

El navegador no informa al usuario que la página define teclas rápidas. Este es, curiosamente, el aspecto más problemático.

Una solución es indicar la tecla junto al enlace o dentro del texto del mismo, o directamente o mediante CSS. Otra es de proporcionar una página sobre la accesibilidad del sitio y esperar que el usuario averigue que en esta página se describen las teclas.

La mejor solución sería mejorar el diseño de los navegadores para que indiquen las teclas, pero es una propuesta a largo plazo.

Recomendación: Crear una página sobre accesibilidad, con la lista de teclas y un enlace en la página principal.

Informar al usuario sobre las teclas definidas

Problema: El usuario no sabe qué teclas hemos asignado.

Existen varias soluciones a este problema, ninguna plenamente satisfactoria.

Solución: Indicar cada tecla en el contenido de la página. Por ejemplo esta página indica el carácter entre parentesis, mediante CSS. Muchos diseñadores no lo harán de esta manera por consideraciones de estética. Y con razón: la mayoría de los usuarios no quieren usar las teclas y no quieren ver esta informacíon. Si esperamos muchos usuarios discapacitados (por ejemplo Discapnet), nos compensa esta solución, sino no es aconsejable.

Solución: Proporcionar una lista de las teclas.

En una página aparte (o en la página sobre accesibilidad) proporcionar una lista de las teclas. La lista debe ser fácil de comprender e imprimir (el usuario visual la puede imprimir para tenerla siempre a mano).

Solución: Sólo asignar teclas a elementos de uso frecuente que ayudarán de verdad

El usuario tiene una memoria finita y en la realidad no aprenderá mas de tres o cuatro.

Solución: Permitir al usuario conocer y recordar las teclas.

Como diseñadores tenemos que calcular si compensa o no al usuario hacer el esfuerzo de averiguar y aprender las teclas rápidas. Muy posiblemente le resultará más cómodo usar la tecla tabulador repetidamente. Si es un sitio de uso frecuente, por ejemplo, una entidad bancaria, probablemente sí, se recompensará el esfuerzo. Si es un sitio particular que el usuario probablemente sólo consulta una vez, no le interesa un acceso de teclado que le costará trabajo aprender, pera sólo utilizar una vez.

En el Reino Unido la administración pública edita una guía para los responsables y diseñadores de los sitios web públicos (Web handbook). Dicen:

"Cuando un usuario visita el sitio web de su departamento por primera vez, éste aporta su experiencia aprendida en otros sitios. Es entonces importante que todos los sitios públicos del Reino Unido adopten un estándar coherente de teclas rápidas. Cualquier desviación de esta norma dificultará la navegación para los usuarios por obligarles a aprender un nuevo conjunto de teclas cada vez."

Si todos los sitios utilizaran las mismas teclas, los usuarios podrían aprender las teclas de memoria. El Web handbook (Reino Unido), en las pautas de diseño sección 2.4.4, define una lista para todos los sitios de los web de la administración.

  • S - Saltar navegación
  • 1 - Página de incio
  • 2 - Novedades
  • 3 - Mapa del sitio
  • 4 - Búsqueda
  • 5 - Preguntas frecuentes (FAQ)
  • 6 - Ayuda
  • 7 - Reclamaciones
  • 8 - Términos y condiciones
  • 9 - Contactar
  • 0 - Definición de teclas rápidas

La única tecla en la lista que no es numérica es la S. Según mis investigaciones no provoca conflicto con los navegadores comunes en su versión castellana.

¿Si este conjunto de teclas es adecuado para los sitios públicos de un país como el Reino Unido y son independientes del idioma (con excepción de la S, que también vale para "saltar" en castellano) porqué no lo podemos adoptar para los sitios públicos españoles? Insto al Ministerio de Administraciones Públicas a tomar la inivciativa y imponer este conjunto de teclas en los sitios públicos españoles. En la actualidad el sitio del MAP un buen ejemplo de teclas rápidas bien intencionadas pero inservibles (a, b, c, d...).

Recomendación: Adoptar el conjunto de teclas de la lista anterior.

Recomendación: Crear una página sobre accesibilidad, con la lista de teclas y un enlace en la página principal.

Elegir teclas que no causen conflicto con las del navegador

Problema: Las teclas causan conflicto con las del navegador

La realidad es que no podemos saber qué teclas utilizarán los navegadores y las ayudas técnicas, y no es una exageración desaconsejar cualquier asignación de teclas para evitar cualquier conflicto.

Debemos evitar carácteres con acentos u otros que requieren una combinación de teclas en el teclado del usuario esperado.

Los navegadores definen teclas rápidas con letras, por lo que el consenso es que sea mejor emplear las teclas numéricas de cero a nueve. Opera no permite el uso de las teclas numéricas, pero la nevegación con Opera en una página bien diseñada es mucho mas fácil (el usuario puede saltar entre encabezados también), por lo que se puede argumentar que esto no representa un problema importante.

Recomendación: Sólo asignar teclas numéricas

Elegir caracteres fáciles de teclear

Problema: El usuario no puede teclear el carácter

Como he explicado anteriormente si el carácter es difícil o imposible de teclear para el usuario, hemos fracasado en el intento de mejorar la accesibilidad. Recomiendo sólo asignar teclas numéricas, que son comunes a todos los teclados. Entonces la recomendación es la misma:

Recomendación: Sólo asignar teclas numéricas

Recomendaciones

Después de tanta explicación, lo importante es saber como actuar. Los atajos de teclado pueden mejorar la usabilidad y accesibilidad de la página si observamos unas pautas sencillas:

Si por algun motivo no es posible usar este conjunto de teclas, recomiendo lo siguiente:

Después de explicar todo esto, tengo que decir que existe otra solución para facilitar la navegación entre páginas (aunque no dentro de la página) que resuelve los problemas que he descrito quí. El elemento <link> define la relación entre páginas y deja al navegador la tarea de crear un menu de navegación y un conjunto de teclas de acceso. Espero describir esta técnica en otro artículo futuro.

Adivinanza

Hemos asignado dentro del documento una tecla usada por el navegador para la barra de menú. ¿Cómo puede el usuario acceder al menú con esa tecla? Respuesta: En Windows, para acceder a la barra de menú aun cuando la tecla correspondiente está asignada en la página, tecleas ALT, y sueltas la tecla, para activar la barra de menú. Luego tecleas la letra, sin ALT. Ya lo sabes.

Enlaces externos