Accesibilidad web: Guías de interfaces móviles accesibles

Guías de interfaces móviles accesibles

Voy a hablar de unas pautas, de unas guías que son imprescindibles para llevar a cabo el desarrollo de la accesibilidad de los móviles.

guías de interfaces móviles accesibles

Están desarrolladas por Funka, una empresa sueca especializada en accesibilidad de reconocido prestigio internacional.

Estas guías nos ofrecen un listado de pautas, estudiadas y testeadas con usuarios, que nos permiten diseñar e implementar interfaces móviles más usables y accesibles.

Pautas para el desarrollo de interfaces móviles accesibles

Están disponibles en castellano: Pautas para el desarrollo de interfaces móviles accesibles (PDF)

Son 48 pautas agrupadas en 6 temas.

Elección de una solución

1. Observe que su sitio web básico funcione en dispositivos móviles.

Recomiendan utilizar el enfoque “Mobile First”.

2. No obligue al usuario a utilizar una versión móvil, pero ofrézcala en caso de que las páginas del sitio web básico sean grandes o tengan unas funcionalidades complejas.

3. Una versión móvil del sitio web debe, en la medida de lo posible, facilitar al usuario la misma información y servicios que el sitio web normal, a no ser que se trate expresamente de una versión móvil de un servicio o funcionalidad específicamente delimitados.

4. Cree aplicaciones para funcionalidades claramente delimitadas a las que el usuario pueda necesitar acceder con frecuencia.

Diseño

5. Siga las WCAG 2.0 excepto en los aspectos que las presentes pautas contradigan a las WCAG 2.0.

6. Al crear aplicaciones para dispositivos específicos, deberán seguirse las directrices de diseño y accesibilidad, siempre y cuando no contradigan estas pautas.

7. Si desarrolla una aplicación para una plataforma específica, deberá ser compatible con las características propias de la plataforma.

8. Identifique los elementos gráficos, iconos y botones con su motivo o función.

9. Cada objeto de formulario debe tener una etiqueta o una descripción.

10. No utilice marcos en interfaces web.

11. Ayude al usuario a introducir datos adaptando el teclado virtual al contenido que debe introducirse.

12. Minimice el uso de scripts ejecutados en cliente.

13. Realice pruebas prácticas de la solución.

Estructura y presentación

14. En las vistas con scroll, coloque las cosas importantes más arriba y las menos importantes más abajo.

Pero ten en cuenta también que es difícil conseguir hacer clic en los objetos que se encuentran arriba del todo en la pantalla. Por lo tanto, una interacción importante no debe situarse en la parte de arriba del todo de la pantalla.

zonas_mas_faciles_pulsar

15. Agrupe los elementos que van juntos.

La página debe redistribuirse, en la medida de lo posible, de modo que la información relacionada se posicione justo detrás de la sección con la que se relaciona, en lugar de que todo el material relacionado se coloque abajo del todo.

16. Procure crear un diseño limpio y minimice el número de objetos “innecesarios”.

17. Procure que el encabezado de la página sea pequeño.

18. Cree áreas grandes para hacer clic.

Procure que el área para hacer clic tenga como mínimo el alto de fila del cuerpo de texto en un sentido y el alto de fila del cuerpo de texto multiplicado por 3 en el otro sentido. Los iconos de una aplicación deberían tener, como mínimo, 9 milímetros de ancho y de alto.

19. No coloque los botones de uso frecuente en el margen derecho o izquierdo, a no ser que ocupen, como mínimo, una tercera parte del ancho de la pantalla.

A los usuarios que solo utilizan una mano, o que tienen que equilibrar el móvil sobre la rodilla para poder utilizarlo, les resulta difícil pulsar botones que están en los márgenes.

20. No coloque a la derecha los botones, funcionalidades o grupos con botones y funcionalidades, a no ser que el grupo ocupe, como mínimo, el 75 % de la pantalla en todas las posiciones.

Beneficia específicamente a los usuarios que no ven el sitio web y utilizan el dedo índice para escanear la interfaz.

21. Oriente los botones y los enlaces en filas claras (horizontal y verticalmente).

22. Las etiquetas de los campos de introducción deben colocarse principalmente encima del campo.

Son una excepción las casillas de verificación y los botones de opción, en los que el texto puede situarse a la derecha, pero el título del grupo se colocaría encima del mismo.

23. Las longitudes de línea deben adaptarse al ancho de la pantalla, pero nunca superar un máximo de 70 caracteres por línea, espacios incluidos.

El objetivo es que la longitud sea de 55-60 caracteres por línea, espacios incluidos.

24. Limite la cantidad de información y el número de objetos mostrados.

25. Utilice iconos conocidos.

26. Diseñe los objetos clicables para que sean obvios.

Los enlaces no se deben distinguir solo por el color.

27. Utilice contrastes altos.

28. Debe ser posible utilizar la interfaz en la visualización tanto horizontal como vertical.

Interacción

29. Utilice conceptos de navegación sencillos.

Los mega-menús no funcionan bien en móvil y han de rediseñarse.

30. Si desarrolla una aplicación para un sistema operativo o un dispositivo móvil que pueda tener botones de control (por ejemplo, teclas de flecha y un botón Aceptar), debe ser posible utilizarlos para navegar por la interfaz.

31. Si desarrolla una interfaz que se pueda utilizar en dispositivos a los que se pueda conectar un teclado, la interfaz debe, cuando sea posible, poder controlarse con el teclado.

32. Inserte atajos para facilitar que el usuario salte de una parte a otra del contenido en las páginas largas.

Aunque estén ocultos inicialmente, deben mostrarse al recibir el foco en la navegación por teclado.

33. Minimice la introducción de texto en la interfaz.

34. Si la interfaz admite el control mediante gestos, debe implementarse esta función.

35. No incluya funciones que solo se puedan ejecutar mediante gestos, compleméntelas siempre con un botón o enlace.

36. Permita controlar la interfaz solo con un dedo.

37. Sea sistemático.

Por ejemplo, coloca los botones que tengan una determinada funcionalidad en el mismo lugar de la pantalla o diséñalos de forma homogénea.

38. Utilice los objetos integrados según su uso previsto y de la forma en que el usuario espera que se utilicen.

Es decir, en vez de implementar componentes propios con una funcionalidad equivalente.

39. Proporcione feedback al usuario.

Mediante un sonido y una vibración breve si el dispositivo lo permite, pero siendo posible desconectar esta confirmación. Puede haber excepciones cuando un exceso de confirmaciones se perciba como molesto (por ejemplo, una aplicación que funciona como podómetro no debe confirmar cada paso registrado).

40. Proporcione información de estado clara al usuario.

Por ejemplo, si la aplicación o sitio web están cargando datos, es conveniente mostrar el progreso de la carga.

41. Proporcione al usuario tiempo suficiente y avísele antes de que se supere el límite de tiempo.

Si fuera posible, también debería existir la posibilidad de prorrogar el tiempo de forma sencilla.

42. Ayude al usuario a evitar y a corregir posibles errores.

Por ejemplo con autocompletado o con sugerencias de búsqueda. Si aun así se producen errores, debe informarse claramente al usuario tanto en la parte superior de la página como en el lugar en el que se haya producido el error. Cuando sea posible, se debe ofrecer también propuestas de solución.

Contenido

43. Utilice imágenes solo si son realmente útiles para el usuario.

44. Utilice encabezados breves y descriptivos para estructurar la información.

45. Evite las abreviaturas.

Configuración de usuario

46. Asegure que la interfaz pueda ampliarse.

47. Considere la posibilidad de proporcionar una opción para invertir los colores.

48. Considere la posibilidad de proporcionar un ajuste para cambiar el tipo de letra.

Pautas de navegación móvil

Estas pautas están en inglés: “Mobile Navigation Guidelines”

 

Son 23 pautas que se agrupan en 5 temas.

Interacción

1. El concepto de navegación es fácil de comprender

2. La navegación es consistente y predecible entre los diferentes niveles de la estructura de información.

Una excepción es la navegación por el nivel superior, que puede ser diferente a la de los submenús sin crear problemas.

3. El usuario recibe feedback relevante.

Por ejemplo, se informa de la opción de menú seleccionada; un título visible indica en qué página se ha aterrizado; etc.

4. La comprensión del concepto de navegación no está basado en la ruta del enlace

5. El tiempo que se necesita para navegar está minimizado

Por ejemplo, se reduce el número de pasos para alcanzar el contenido si dichos pasos requieren una carga de página. Las pruebas demuestran que a menudo hacer scroll es más rápido.

6. La navegación trabaja en diferentes tamaños de ventanaNo solo en diferentes tamaños sino también en posición vertical y horizontal. Ciertos conceptos funcionan mejor en pantallas grandes y otros mejor en pantallas pequeñas, por ello no cambies demasiado pronto a la versión de navegación móvil.

7. La estructura de navegación soporta diferentes niveles de profundidad (si así se requiere). Hay conceptos que solo soportan uno o dos niveles de profundidad. Si tu web tiene una estructura más profunda debes escoger el concepto de navegación adecuado.

8. El menú solo debe contener la estructura de la información

Si la función de búsqueda está en el menú, habrá personas a las que les costará encontrarla. Tampoco recomiendan que tengas que abrir el menú para cambiar de idioma.

9. La estructura de la información se ha estudiado detenidamenteSi la arquitectura de información del sitio es incorrecta o está desequilibrada, el concepto de navegación se vuelve irrelevante, pues la información será difícil de encontrar independientemente del mismo.

Layout y diseño

10. El menú tiene un diseño claro.

Trata la importancia de saber en qué página estás, en qué nivel de la estructura te encuentras y qué otras opciones hay al mismo nivel. O también aspectos como el diseño consistente o la delimitación clara de las diferentes zonas clicables.

11. Presentar el menú verticalmente

Este punto no se aplica necesariamente al menú superior.

12. Áreas clicables suficientemente grandes.

Indican 9 mm medidos en la pantalla del dispositivo.

13. El menú es fácil de encontrar.

14. El icono del menú más texto complementario (si hay icono de menú).

Utiliza el icono de menú que los usuarios esperan encontrar y acompáñalo del texto “Menú”.

15. El menú es de fácil acceso.

Debes poder acceder fácilmente al mismo cuando sostienes el teléfono con una sola mano.

16. Las opciones importantes del menú no están ocultas

No se refiere al menú oculto tras un botón “menú”, medida eficaz si su ubicación y diseño es claro y que además permite poner el foco en el contenido. Se refiere a ocultar opciones de menú tras un enlace “Mostrar más”. Muchos usuarios evitan hacer clic en este tipo de enlaces incluso si no encuentran lo que están buscando en las opciones visibles.

Contenido

17. Poner el foco en el contenidoLo prioritario de la página es el contenido, que confirma además si lo que estás buscando es esa página o si llegaste a la página correcta. El menú no debe ocupar toda la pantalla a menos que el usuario así lo haya elegido

18. Los enlaces a las páginas importantes también están incluidos en el contenidoLas preferencias de navegación varían: unos usuarios utilizan el menú, otros el buscador, y muchos hojean títulos y enlaces relevantes, evitando el menú y el buscador. Los enlaces deben ser claros, descriptivos y legibles, para lo cual ayuda que estén en líneas separadas.

Diseño técnico

19. El menú trabaja con el lector de pantalla.

20. El menú puede ser usado con el teclado. Además el orden de tabulación ha de ser lógico y el foco visible.

21. Puedes navegar incluso cuando javascript está desactivado

Preferencias de los usuarios

22. El menú admite diferentes tamaños de texto y fuentes

Es decir, el usuario puede cambiar el tamaño de texto o las fuentes, mediante las opciones de personalización de su navegador o el sistema operativo, y el menú debe admitirlo y visualizarse correctamente,

23. El menú admite zoom.

One Reply to “Accesibilidad web: Guías de interfaces móviles accesibles”

Deja un comentario

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