Las 75 directrices de accesibilidad de Jakob Nielsen

El Nielsen Norman Group publicó estas Navidades de forma gratuita su informe "Beyond ALT Text: Making the Web Easy to Use for Users with Disabilities"

El documento no tiene desperdicio y su lectura es muy recomendable, por no decir obligatoria. Para aquellos a los que les dé pereza leerse las 148 hojas en inglés, incluyo un breve resumen del estudio que realizaron y las conclusiones que extrajeron en forma de 75 directrices de accesibilidad.

[Ir directamente a las 75 Directrices de accesibilidad]

Introducción

El estudio de dividió en dos:

• uno cuantitativo con 60 participantes en el que se midió el éxito, los errores y los tiempos en realizar unas tareas encomendadas (del tipo "compra el último CD de Janet Jackson en www.target.com" o "encuentra la Tª media de Dallas (Texas) en Enero), y dentro del cual se incluyó una valoración subjetiva de la satisfacción de los usuarios mediante un cuestionario oral.


• uno cualitativo con 44 personas, en el que se recogieron los comentarios y los comportamientos de los usuarios al realizar las tareas encomendadas.

Salvo el grupo de control, todos los demás participantes tenían alguna de estas discapacidades (no se incluyen otras como las discapacidades auditivas o cognitivas o ceguera al color):

• Baja visión: estos usuarios utilizaron magnificadores de pantalla o bien aumentaron el tamaño de texto del navegador.


• No visión: estos usuarios utilizaron lectores de pantalla (como Jaws, Windows Eyes o IBM Homepage Reader) y en el estudio cualitativo además algunos usaron dispositivos Braille.


• Discapacidad motora: fundamentalmente parálisis cerebral (1), y también algún usuario con discapacidad del habla.
  

Todos los participantes estaban trabajando al menos desde hacía un año, pues se pensó que el resultado del estudio sería así más útil para los desarrolladores orientados a dar soporte a las empresas.

Los participantes eran usuarios intermedios o expertos, puesto que tenían al menos 3 años de experiencia en el dispositivo de asistencia que utilizaban, y una media de 3 años de experiencia en Internet, que usaban todos los días o varios días a la semana.

Su edad estaba entre los 20 y los 64, hombres y mujeres por igual, de EEUU y Japón.

La mayoría usaba conexión de alta velocidad e Internet Explorer "por ser el navegador por defecto de su equipo".

Propuesta para que los desarrolladores validen sus páginas

Para ponerse en la piel de los tres grupos de usuarios participantes (y sin que esto pueda sustituir a un test de usuarios serio o a un estudio de usabilidad/accesibilidad), el estudio propone:

• Simular las dificultades motoras: desconectando el ratón o colocándose unos guantes de horno.


• Simular la no visión: utilizar un lector de pantalla apagando el monitor o con los ojos vendados.


• Simular la baja visión: utilizar unas gafas con celo y después utilizar un magnificador de pantalla o subir el tamaño de letra del navegador.

Conclusiones del estudio: 75 Directrices de accesibilidad

No abandone las reglas del buen diseño que ya conoce

1. Siga las reglas básicas de un buen diseño

Destaca cuatro normas del buen diseño:

• Diseño centrado en el usuario


• Escribir concisamente evitando el lenguaje comercial superfluo


• Ofertar menos opciones, incluyendo sólo las más importantes


• No incluir gráficos y sonidos sólo por contar con ellos

Gráficos y multimedia

2. Reducir al mínimo el uso de imágenes

Argumenta que reducir el número de imágenes permite aumentar la velocidad de carga de las páginas y disminuye el ruido superfluo, puesto que un exceso de imágenes dificulta comprender la finalidad del sitio.

3. Dar a todos los gráficos (incluso a los banners publicitarios) nombres que sean comprensibles y que transmitan de verdad lo que el gráfico es y hace.

Utilice el atributo ALT para describir brevemente las imágenes, y el atributo LONGDESC para describirlas minuciosamente

El contenido del ALT debe ser conciso y sencillo: su objetivo es transmitir lo que es la imagen, no describirla.

4. Nunca difuminar las imágenes para indicar no disponibilidad

Se refiere por ejemplo a una imagen que funciona como enlace, de tal manera que cuando el enlace no está disponible se indica difuminándola o poniéndola borrosa.

Es mejor idea eliminar por completo los gráficos cuando no están disponibles.

5. Cuando gráficos contengan información útil, también proporcione la información en texto

Cuando los gráficos comprenden información útil, los usuarios deberían ser capaces de acceder a dicha información en formato HTML.

6. Dé a los usuarios maneras alternativas de obtener la información contenida en cualquiera de los gráficos que se encuentren

Muchas veces los usuarios encuentran el gráfico y suponen que es la única fuente de información, pues les pasa desapercibido que hay una versión textual de la misma información. Para que sea más fácil de encontrar debe ir junto al gráfico o vinculado al mismo y no, por ejemplo, en una sección completamente diferente del sitio.

7. No utilice una imagen en miniatura de la página de su sitio para utilizarla como gráfico (o botón) en otra página

Se refiere a utilizar imágenes que son una captura de la pantalla, en pequeñito, a modo de enlace para ir a otra página.

Cuando ves la página en su totalidad los tamaños relativos hacen que este uso sea perfectamente claro. Sin embargo, para los usuarios que utilizan magnificadores de pantalla, a 6x de aumento, las imágenes en miniatura de una página adquieren un aspecto real.

8. Al hacer uso de gráficos, elija siempre imágenes claras y nítidas.

Las fotos de textos también plantean problemas, ya que las letras tienden a hacerse borrosas a medida que se amplían.

9. Facilite a los usuarios la posibilidad de saltarse cualquier elemento multimedia, aplicación Java o Flash.

En especial cuando producen sonidos, pues los usuarios que usan un lector de pantalla necesitan silencio para escucharlo.

10. No cree automáticamente una versión sólo-texto de su sitio.

No es aconsejable hacer una versión solo-texto, lo recomendable es hacer accesible la versión gráfica, pues crear y mantener dos versiones del sitio es costoso y lleva mucho tiempo.

Sin embargo, hay empresas que utilizan el grafismo y los elementos multimedia para transmitir cierta impresión, sentimiento o emoción de su sitio. En estos casos sí que puede estar justificado una versión sólo-texto, en cuyo texto se intente transmitir el mensaje que se envía a través del multimedia.

Pero hay que tener en cuenta que esa versión sólo-texto debe ser accesible, y que la página principal desde la que se accede a esta versión también debe ser accesible.

Pops-ups, rollovers, nuevas ventanas y menús en cascada

11. Evite el uso de ventanas emergentes.

Incluye ejemplos de lo mucho que desorientan y desconciertan las ventanas emergentes a las personas que utilizan lectores de pantalla o magnificadores así como a las personas con discapacidad motora.

12. En el caso de hacer uso de cuadros de diálogo en pop-ups, asegúrese de que la acción por defecto es la más "perdonable".

Ciertos usuarios pulsaban "Enter" sin más en estas ventanas, sin pararse a leer o a comprobar si la acción por defecto era Aceptar o Cancelar, de manera que se encontraban inadvertidamente instalándose, por ejemplo, Flash Player, algo que no querían ni esperaban hacer.

13. Evite abrir nuevas ventanas del navegador.

Al igual que las ventanas emergentes, las nuevas ventanas generan desconcierto en el usuario. Comprobaron que a menudo las ventanas quedaban ocultas unas por otras y cuando el usuario trataba de hacer clic en el botón "Atrás" del navegador éste parecía no funcionar, y por lo general terminan cerrando el navegador para recuperarlo por completo.

14. Si abre nuevas ventanas del navegador, siempre proporcione una forma sencilla de volver a la página principal del sitio principal.

A veces las personas que utilizan lectores de pantalla no se dan cuenta de que hay varias ventanas del navegador abiertas a la vez. Si un sitio abre automáticamente una ventana y el botón "Atrás" falla, buscan un vínculo para acceder a la página principal.

15. No confíe en los rollover de texto (tooltip) para transmitir información.

Se refiere a cualquier texto que aparece cuando te pones encima de un elemento.

Asegúrese de suministrar la misma información de otra forma más fácilmente accesible, pues muchos usuarios no llevan a cabo la acción o no pueden acceder a la misma. Pone ejemplos de los problemas que les surgen a los usuarios de magnificadores de pantalla.

16. Evite utilizar menús en cascada (menús que se despliegan)

Son muy difíciles de usar para usuarios con magnificadores de pantalla y con problemas motores, pues es necesario poder arrastrar y sostener el ratón mientras se hace clic con precisión. Estos menús son difíciles de seguir, además, con un magnificador de pantalla, hay zonas importantes del mismo que caen fuera de la pantalla y no son visibles.

Enlaces y botones

17. Limite el número de enlaces en una página

Recomienda un máximo de 20 enlaces por página.

Los usuarios con lectores de pantalla no pueden echar un vistazo a la página, deben escucharla. Algunos usuarios no piensan en hacer clic hasta que no han escuchado toda la página, otros hacen clic en el primer vínculo que creen que es el adecuado.

Aquellos que no utilizaban el ratón por problemas motores acababan agotados de moverse con las teclas de desplazamiento cuando la página era muy grande y había muchos enlaces.

18. Evite pequeños botones y enlaces con texto minúsculo

Es difícil y agotador acertar a pulsarlos para las personas con problemas motores.

19. Deje espacio entre los enlaces y botones

Para las personas con problemas motores o problemas de baja visión, el espacio entre los botones y entre los enlaces es sumamente importante, pero también para los usuarios videntes, cuando los enlaces están muy juntos es muy fácil errar y pulsar otro por equivocación.

20. Evite el uso de imágenes como el único método de enlazar a otra página.

También se debe evitar decirles a los usuarios instrucciones del tipo "haga clic en la imagen de arriba".

21. Asegúrese de que los comandos importantes aparecen con sus propios vínculos exclusivos.

Es necesario comprobar que con un lector de pantalla hay pausas suficientes que permitan identificar los enlaces importantes.

22. Subraye todos los enlaces

Es la manera más clara de identificar los enlaces cuando la pantalla se magnifica.

23. Crear vínculos dentro del texto cuando tenga sentido. Utilice los botones adicionales sólo cuando sea necesario.

Es algo muy típico que en las noticias de un sitio, en vez de que el enlace a la noticia sea el texto, se ponga un botón "Ir". Se ha de evitar esta práctica.

Organización de las páginas

Una buena organización de la página no significa lo mismo para una persona que ve que para una persona que utiliza un lector de pantalla. Para esta última una buena organización será por ejemplo que lo primero que se lea sea el título de la página y los primeros enlaces que se dicten sean los de búsqueda, saltar navegación o versión sólo-texto.

El estudio propone que estos enlaces se hagan mediante imágenes invisibles al comienzo de la página; serían invisible para los videntes y disponibles para los lectores de pantalla y los navegadores que proporcionen listados de enlaces.

24. Confirmar al inicio de la carga de la página principal el nombre de la compañía.

Este dato debe ser el primero que lea el lector de pantalla, así sus usuarios, que no pueden ojear la página, no dudarán acerca de a dónde han entrado. Para ello es necesario ponerle un "title" significativo a la página y un "alt" al logotipo de la parte superior de la página.

25. Confirmar al inicio de la carga de una página en qué página se está.

Los usuarios con un lector de pantalla necesitan saber que al hacer clic en un vínculo este les ha traído a donde pensaban, por ello es necesario, por ejemplo, poner un "title" significativo a todas las páginas.

26. No asociar la palabra "página principal" o "home" con el logotipo de su empresa si planea volver a utilizar el mismo gráfico en todas las páginas.

Cuando se usa el logo como enlace a la página principal, el "alt" de esta imagen no debería ser "página principal de XXXX" sino "Enlace a la página principal de XXXX", para que los usuarios de lectores de pantalla no piensen que es el título de la página sino un enlace.

27. Reducir la necesidad de desplazarse con scroll.

Escrolar es muy lento y tedioso para los usuarios que usan magnificadores de pantalla.

28. Cuando los usuarios deban hacer una elección, ponga todas las posibilidades en la misma zona.

Hay que buscar un equilibrio entre poner los enlaces y botones muy juntos o muy distantes.

29. Cuando los usuarios deben hacer una elección, adviértales de la elección mediante, por ejemplo, un texto del tipo "Selección de pedido", e infórmeles de la cantidad de opciones que tienen.

30. Haga un diseño de páginas consistente

Utilice un método de navegación coherente, que no se deba reaprender en cada página. Esto será especialmente útil para los usuarios con magnificadores de pantalla.

31. Considere la posibilidad de utilizar un enlace "Saltar Enlaces" para que los usuarios puedan saltar los enlaces o elementos de navegación.

Esto les evita a los lectores de pantalla tener que escuchar una y otra vez todos los enlaces de las barras de navegación superiores y laterales.

32. Elija una dirección Web de su sitio simple e informativa, y mantenga esa URL en el campo de la dirección de la página después de la carga.

Puesto que es lo primero que muchos usuarios con lectores de pantalla escuchan, es importante elegir una dirección que transmita el nombre de la organización o del sitio.

Páginas

33. Evite las "páginas portada" previas a la página de inicio de un sitio, haga que la primera página que la gente vea sea la página que mejor describe la compañía y el sitio.

Las páginas y los clic extras no sólo no ayudan a la eficiencia del sitio, sino que muchas veces conducen a la frustración de los usuarios que usan lectores de pantalla.

34. Incluya tan sólo los pasos y las páginas necesarias

Campos y formularios

35. Limite la cantidad de información que el formulario requiere; recoja sólo el mínimo necesario.

Los formularios demasiado largos suponen problemas para los usuarios con discapacidad motora, puesto que les cuesta rellenar los campos. Además, los usuarios que usan magnificadores de pantalla pierden fácilmente el contexto al intentar escrolar la página.

36. Ponga las etiquetas de texto de los campos muy cerca de los campos que les corresponden.

Cuando se magnifica la pantalla lo más probable es que los usuarios no vean la etiqueta que acompaña al campo, y asumirán que le corresponde el texto más cercano.

37. No indique los errores del formulario simplemente destacando un texto en rojo o amarillo.

Sin duda esta práctica es una ayuda, pero los usuarios que usan lectores pantalla o dispositivos Braille no tienen manera de saber que el texto es rojo. Estos textos también son difíciles de leer con la pantalla magnificada, más aun cuando a menudo se invierten los colores para ver las cosas mejor.

Propone que cuando haya errores se muestren sólo los campos con errores.

38. No confíe sólo en el asterisco para indicar que un campo es necesario.

Algunos usuarios que usaban lectores de pantalla se preguntaban qué significaba la continua repetición de la palabra "asterisco" y si sería un error del lector.

El estudio propone reforzar este indicador con otro, como por ejemplo poner el texto en negrita. También propone poner los campos obligatorios todos juntos al principio del formulario y evitar solicitar información que no sea necesaria.

39. Asegúrese de que el orden de tabulación es lógico.

Muchos usuarios usan el tabulador para desplazarse por los campos del formulario. Además, los usuarios de lectores de pantalla son también dependientes del orden lógico de los campos, puesto que es así como el lector de pantalla les lleva a través del formulario.

40. Haga coincidir el orden de tabulación con la disposición visual de los elementos cuando sea posible.

41. Apile los campos en una columna vertical.

Los campos en una única columna son mucho más fáciles de rellenar para los usuarios con baja visión que utilizan magnificadores de pantalla.

42. Ofrezca campos de entrada estándar para los números de teléfono.

Cuando se ofrecen varios campos para rellenar el teléfono la gente se confunde. Es mejor usar un único campo (o dos, uno para el prefijo y otro para el número) pero no más, especialmente si no se etiquetan.

43. En aquellas páginas que tenga un formulario con un único campo de entrada o selección, poner el botón lo más cerca posible del campo.

Muchos usuarios de magnificadores de pantalla no se dan cuenta de que deben desplazarse y encontrar el botón, esperan, por ejemplo, que ocurra algo al seleccionar en la combo una opción.

44. En los formularios, ponga el botón "submit" lo más cerca posible del último campo.

A menudo los usuarios de baja visión no encuentran el botón "enviar", más aún si se separa del formulario por ejemplo mediante una línea. También es importante que la tecla "Intro" envíe el formulario.

45. Ponga cualquier instrucción relativa a un campo en particular antes del campo y no después.

Los usuarios de lectores de pantalla necesitan escuchar las instrucciones acerca de los campos antes de llegar a la caja de entrada.

46. Considere cuidadosamente cuánto tiempo se pone de tope para hacer una acción como por ejemplo rellenar un formulario.

Textos

47. Seleccione colores de texto con buen contraste

48. No use un tamaño de fuente muy pequeño para el texto de la página

El usuario debe poder controlar el tamaño del texto, para lo cual deben tener un tamaño relativo (%, em). Se aconseja que por defecto no tenga un tamaño menor al equivalente de 11 puntos, puesto que así las letras seguirán siendo legibles cuando se magnifiquen.

49. No use texto pequeño o sutil (por ejemplo un gris rebajado) para los encabezados y categorías.

50. Cree siempre un buen contraste entre el color del texto y el color de fondo de la página

Cuando no es así muchos usuarios optan por invertir los colores o verla en monocromo.

51. No se base en una imagen de fondo para crear el contraste con el texto.

Muchos usuarios con baja visión desactivan la visualización de imágenes en el navegador. Asegúrese de que cuando desactiva las imágenes el color de texto sigue teniendo suficiente contraste con el color de fondo de la página.

52. Pruebe los colores y fuentes de su sitio con un magnificador de pantalla

Hasta a x6. El azul por defecto de los enlaces es poco legible a muchos aumentos, el negro sin embargo sí es legible. El texto de las imágenes tampoco debería estar suavizado para que se pueda leer magnificado.

53. Asegúrese de que es posible magnificar su sitio.

Utilice tamaños de fuente relativos (%, em), no absolutos (px, pt)

54. Escriba de forma concisa y elimine el texto superfluo

Tanto a los usuarios de lectores de pantalla como a los de magnificadores de pantalla les molesta escuchar información inútil.

55. Si el nombre de la compañía o el texto en general presenta abreviaturas y acrónimos, dígale al lector de pantalla como pronunciarlo mediante las etiquetas <abbr> y <acronym>.

56. Replantéese la forma en la que usa los paréntesis y los asteriscos.

La utilización de estos signos de puntuación distraen a menudo a la gente.

Búsquedas

57. Ofrezca un motor de búsqueda que perdone los errores de ortografía.

Google, por ejemplo, ofrece recomendaciones de búsqueda con las palabras escritas correctamente.

58. No base únicamente la capacidad de búsqueda de un sitio en la interfaz de navegación.

Ofrezca siempre una herramienta de búsqueda.

59. Coloque la caja de búsqueda donde los usuarios la esperan encontrar, no en una zona inesperada.

Se espera en la parte superior derecha o en la esquina inferior izquierda.

60. Describa claramente los resultados de la búsqueda.

Indique de inmediato cuántos resultados ha habido, ponga un título para cada uno y no sólo una url.

61. Avise a los usuarios cuando no han introducido nada en la caja de búsqueda

Si un usuario escribe algo sin tener la caja de búsqueda seleccionada, creerá haber escrito algo y que los resultados de la búsqueda se corresponden con lo que ha escrito, sin embargo no tendrán nada que ver con lo que intentaba buscar porque se buscó con la caja vacía.

62. No presente el ranking de relevancia de los resultados de la búsqueda en una tabla.

El número que precede al enlace y que indica el ranking, si va en una columna confunde a los usuarios de lectores de pantalla y a los de magnificadores de pantalla, pues no lo contextualizan. Si los resultados se dan en orden, el número es redundante y no es necesario.

Comercio electrónico

63. Describa minuciosamente las imágenes de los productos que el sitio vende como si no hubiera imágenes.

En la compra de ropa, objetos, etc. la imagen es muy importante, por eso las personas que usan lectores de pantalla necesitan una descripción detallada para decidirse a comprar.

64. Ayude a los usuarios a seguir comprando después de haber añadido algo al carrito, dándoles una forma de llegar de nuevo a donde estaban.

65. Coloque los botones de "añadir a la cesta de compra" o "realizar pedido" cerca de los elementos a comprar.

Si se colocan en la parte superior o inferior de la pantalla pueden pasar desapercibidos.

También debería ser evidente para el usuario cuando se ha añadido algo a la cesta.

66. Tenga en cuenta a los clientes internacionales seleccionando cuidadosamente los términos que utiliza.

Por ejemplo es más fácil de comprender "Buy" que "Checkout".

Aconseja usar el atributo "lang" cuando se utilicen frases o palabras en otro idioma, de este modo se advierte a los usuarios de lectores de pantalla que la palabra que van a oír está en otro idioma.

Tablas y frames

67. Evite el uso de tablas para maquetar un sitio.

Las tablas se esperan para organizar la información, cuando se utilizan para fijar el tamaño de la página crean confusión a los usuarios que utilizan lectores de pantalla y dispositivos Braille.

68. Evite el uso de tablas muy grandes sin motivo. Si debe usarlas, considere proporcionar la información también en formato texto.

Con tanta información en una tabla es difícil que los usuarios de lectores de pantalla, de sistemas Braille o de magnificadores de pantalla den sentido a todo y lo recuerden.

69. En especial en las tablas, no use gráficos para indicar un dato como por ejemplo el estado, es mejor usar texto.

Es difícil recordar la leyenda o recordar que la presencia o ausencia de una imagen significa algo en particular.

70. Asegúrese de que las listas alfabéticas visuales siguen estando en orden alfabético cuando son leídas por un lector de pantalla.

Si la lista está dispuesta en una tabla puede ser que el orden no coincida.

71. Incluya un resumen ("summary") en todas las tablas

El usuario con un lector de pantalla no puede echar un vistazo a la tabla para hacerse una idea de lo que contiene, el resumen de la tabla cumple esta función.

72. Antes de usar columnas en el diseño considere cómo se le mostrarán a un usuario con un magnificador de pantalla.

Las páginas organizadas en columnas se prestan a confusión cuando no se tiene el contexto de toda la pantalla, como les ocurre a los usuarios con magnificadores de pantalla.

73. Describa todos los frames.

Los frames son una de las causas más comunes de problemas de accesibilidad, especialmente con lectores de pantalla y dispositivos Braille.

Pero si los usas, al menos indica cuántos frames hay en una página y proporciona un resumen de cada uno en el "longdesc", de este modo los usuarios son conscientes de los contenidos generales antes de decidirse a escuchar un frame entero.

Acerca de los marcos comenta que si se usa el aumento de fuente del navegador, este sólo se aplica al marco seleccionado, y es muy tedioso ir seleccionando cada marco para subir el tamaño de fuente.

Confianza, estrategia e imagen de la compañía

Cuando los usuarios se encuentran con sitios de difícil acceso es poco probable que vuelvan y están menos satisfechos con esa empresa u organización. Por el contrario, las empresas y organizaciones con sitios accesibles generan más confianza.

74. Proporcione en su sitio un servicio de atención al cliente cuyas personas tengan unos básicos conocimientos de los problemas de accesibilidad.

75. Do not refer to people in wheelchairs as wheelchairs or screen reader users as screen readers.

---

NOTAS:

(1) La parálisis cerebral es la incapacidad de controlar completamente la función motora, en especial el control muscular y de la coordinación. Esta discapacidad motora supera en número de afectados a cualquier otra discapacidad de desarrollo incluida la epilepsia, el autismo o el síndrome de Down. Se manifiesta mediante:

• Opresión o espasmo muscular


• Movimiento involuntario


• Perturbación en el andar o la movilidad


• Percepción y sensación anormales


• Alteración visual, auditiva o del habla

(Volver al texto)

---