Uso de hints en las interfaces de usuario

Al diseñar una interfaz de usuario la mahyor parte del peso de comunicación entre la interfaz y el usuario es a través del canal visual. Mediante un vistazo a una pantalla se puede intuir cómo utilizar ciertos elementos de la interfaz. Pero como no todas las personas tienen la misma capacidad de intuición ni la misma posibilidad de echar un vistazo a la pantalla debemos hacer uso de los distintos elementos de accesibilidad para hacer que la misma interfaz de usuario sea comprensible y usable para todas las personas.
A veces el uso de un control sólo se puede entender de forma visual como puede ser un interruptor deslizante para seleccionar un elemento más a la izquierda o más a la derecha, un botón de 3 estados o un cuadro de edición auto completable que permite realizar ciertas operaciones mientras se edita ese campo. En todos esos casos las personas con discapacidad visual pueden encontrar problemas a la hora de entender cómo utilizar dicho control. Para ayudar a este perfil de usuario la capa de accesibilidad permite incluir al control un texto de ayuda para entender cómo utilizar el control. Es lo que se conoce como hint o pista.

¿Qué son los Hints de Accesibilidad?

Los hints de accesibilidad son textos adicionales que proporcionan información contextual sobre un control de interfaz. Para los usuarios de lectores de pantalla. Estos hints pueden ser la diferencia entre una experiencia fluida y una frustrante. Por ejemplo, en una aplicación de banca móvil, un botón que simplemente dice «Enviar» podría no ser suficiente. Un hint podría agregar: «Enviar transferencia bancaria», proporcionando un contexto claro y específico.
Otro ejemplo podría ser un botón de tres estados cuyo hint podría indicar «pulse este botón para cambiar entre aceptado, pendiente y rechazado para actualizar el estado del pedido».

Implementación de Hints en Diferentes Plataformas

iOS

En iOS, los hints de accesibilidad se implementan utilizando el atributo accessibilityHint. Este atributo permite a los desarrolladores definir una cadena de texto que será leída por VoiceOver, el lector de pantallas de Apple, al final de toda la información del control.

Por ejemplo, un botón que tiene un icono de lápiz para editar puede no ser claro para todos los usuarios, pero al añadir un AccessibilitHint con el valor «Pulsa dos veces para modificar el valor de este campo»”, se proporciona la información necesaria para el usuario.

Android

En Android, los hints de accesibilidad se consiguen con el atributo android:hint en el fichero XML de la actividad. Este hint proporciona una descripción de lo que un control hace o lo que se espera que el usuario haga con él. Por ejemplo, un campo de entrada de texto puede tener un hint como “Introduce tu nombre completo”, lo cual es leído por TalkBack (el lector de pantalla de Android) para guiar al usuario.

HTML

En HTML, los hints se implementan con los atributos aria-description y aria-describedby.

El atributo aria-description proporciona una descripción directa del elemento, mientras que aria-describedby hace referencia a otro elemento en la página que contiene una descripción más detallada. Por ejemplo, un botón de búsqueda podría tener un aria-description=»Use este botón para buscar en todo el sitio web», y aria-describedby podría apuntar a un párrafo cercano al campo de búsqueda que explique cómo funciona la búsqueda en el sitio web.

Importancia de los Hints en la Accesibilidad

Estos atributos impactan en la accesibilidad de la interfaz de la siguiente forma:

  1. Claridad y Contexto: Los hints proporcionan información adicional que ayuda a los usuarios a entender la función de un control. Esto es especialmente importante para controles que solo tienen iconos o textos ambiguos.
  2. Mejora de la Usabilidad: Al proporcionar instrucciones claras sobre cómo utilizar un control, se mejora la usabilidad de la aplicación o sitio web, haciendo que la experiencia sea más intuitiva y menos frustrante para los usuarios con discapacidades visuales.
  3. Inclusión: Al implementar hints de accesibilidad, los desarrolladores están tomando pasos activos hacia la inclusión digital, asegurándose de que sus productos sean utilizables por el mayor número posible de personas.

Problemas Comunes con los Hints

A pesar de su importancia, los hints de accesibilidad no están exentos de problemas. Algunos de los desafíos más comunes incluyen:

  1. Hints Redundantes: A veces, los desarrolladores añaden hints que repiten información que ya está clara en el contexto visual, lo que puede resultar en una sobrecarga de información para el usuario de un lector de pantalla. Por ejemplo, un botón con un texto visible “Buscar” no necesita un hint adicional que diga “Botón de búsqueda”.
  2. Falta de Actualización: Los hints pueden volverse obsoletos si no se actualizan junto con cambios en la interfaz. Esto puede llevar a confusión si un hint describe una funcionalidad que ya no existe o que ha cambiado.
  3. Hints Incompletos: No proporcionar suficiente información es otro problema. Un hint demasiado breve puede no dar el contexto necesario. Por ejemplo, un hint que solo dice “Enviar” sin más detalles podría no ser útil en una aplicación con múltiples funcionalidades de envío.
  4. Uso Incorrecto de los Atributos: En HTML, confundir aria-description con aria-describedby puede llevar a que los usuarios de lectores de pantalla no reciban la información adecuada. Es crucial usar cada atributo de forma correcta para asegurarse de que la información se transmite adecuadamente.
  5. Problemas de personalización del lector de pantallas: algunos usuarios ciegos deshabilitan la lectura de estos elementos para dar mayor agilidad a su experiencia de uso. Esto implica que en el hint sólo se debe incluir la información relacionada con el control para evitar que el usuario pierda información vital de otra parte de la interfaz.

Buenas Prácticas para el Uso de Hints

Para maximizar la efectividad de los hints de accesibilidad, es importante seguir algunas buenas prácticas:

  1. Ser Claro y Conciso: Proporcionar descripciones claras y directas que sean fáciles de entender. Evitar la jerga técnica y centrarse en el propósito del control.
  2. Actualizar Regularmente: Asegurarse de que los hints se actualizan junto con cualquier cambio en la interfaz de usuario para evitar descripciones obsoletas.
  3. Consistencia: Mantener una terminología y un estilo consistentes en todos los hints para evitar confusión.
  4. Seguir los estilos definidos en la guía de interfaces del fabricante: Apple y Google tienen recomendaciones sobre el estilo de lenguaje a emplear en los hints.

Activar las actualizaciones beta en MacOS

La compañía Apple todos los veranos comienza su proceso de betatesting para sus distintos sistemas operativos. De esta forma puede recibir sujerencias y notificaciones de mejora antes que los nuevos sistemas operativos salgan al mercado

Dentro de este proceso de beta testing hay una línea para desarrolladores registrados en su plataforma para Apple developers y otra línea para todos los usuarios llamada Public betas.

El uso de versiones beta es un comportamiento arriesgado ya que no son versiones estables ni terminadas de un sistema operativo. Tanto Apple como otros fabricantes recomiendan siempre hacer copia de seguridad del dispositivo y no utilizar dispositivos para el trabajo o para entornos seguros.

Forzar el acceso a las actualizaciones beta en MacOS

En el caso de las actualizaciones Beta para MacOS la opción tanto para las betas públicas como para desarrolladores está disponible dentro de Ajustes/General/Actualizaciones. Hay un apartado especifico para activar las actualizaciones beta.

A veces si nuestro usuario de MacOS ha pasado por varias versiones beta y ha sufrido varias activaciones y desactivaciones de esta característica es necesario forzar la activación de las actualizaciones beta en MacOS ya que el proceso debe ser sincronizado mediante iCloud y el proceso falla en algunas ocasiones.

Cambiar el estilo de navegación de VoiceOver para Mac

VoiceOver es el lector de pantallas de Apple para todas sus plataformas.

Este lector de pantallas ofrece varios modelos de exploración de la pantalla dependiendo de si el dispositivo tiene pantalla táctil, se utiliza con ratón y teclado o su modo de uso es principalmente por voz. En realidad y aunque se llamen igual el VoiceOver para MacOS no es el mismo servicio de accesibilidad que VoiceOver para iOS o VoiceOver para VisionOS.

Apple ha ido incorporando con cada nueva actualización algunas funciones comunes y experiencias de uso para las distintas versiones de VoiceOver disponibles. Por ejemplo, desde iOS15 VoiceOver tiene el estilo de navegación lineal o por grupos.

El estilo de navegación lineal de VoiceOver para iOS es el comportamiento al que están acostumbrados los usuarios en el que el foco de VoiceOver salta por todos los controles de la interfaz ignorando los diversos elementos de agrupación. Esto implica que en una pantalla de un editor de texto con un cuadro de edición y una barra de herramientas con 3 botones VoiceOver saltará entre el cuadro de edición y los 3 botones presentando 4 elementos focalizables e ignorará la presencia de una marca de agrupación llamada barra de herramientas.

Con el estilo de navegación por grupos VoiceOver en nuestro ejemplo anterior mostrará dos elementos: el cuadro de edición y un elemento llamado barra de herramientas. Para poder ver qué hay dentro de la barra de herramientas deberemos deslizar con dos dedos hacia la derecha para entrar o deslizar con 2 dedos a la izquierda para salir de ese grupo. Este es el estilo de navegación por defecto en VoiceOver para MacOS en el que se utilizan las combinaciones de tecla Mayúsculas+VO+flecha abajo para interactuar con el elemento focalizado y Mayúsculas+VO+Flecha arriba para dejar de interactuar. Este concepto de interactuar es el concepto de entrar o salir de la versión de VoiceOver para iOS.

La pregunta ahora es: ¿podemos utilizar el estilo de navegación de VoiceOver para iOS en la versión para MacOS? Y la respuesta es si desde las últimas versiones de VoiceOver para MacOS.

Cambiar el comportamiento de agrupación de VoiceOver para Mac

El estilo de navegación de VoiceOver para iOS en VoiceOver para MacOS se llama comportamiento de agrupación. Podemos acceder a esta configuración desde el panel de configuración de VoiceOver para Mac (pulsando VO+F8), consultando la categoría Navegación y modificando la opción Comportamiento de agrupación:.

Esta opción dispone de 4 valores posibles:

  • Estándar: VoiceOver requiere una acción. Debes pulsar VO + Mayúsculas + Flecha abajo para empezar a interactuar con los ítems de un área o grupo, y VO + Mayúsculas + Flecha arriba para dejar de interactuar con los ítems.
  • Identificar principio y final de grupo: VoiceOver identifica el principio y el final de un área o grupo mientras navegas por tus ítems, pero no se requiere interactuar con ellos.
  • Anunciar grupos: VoiceOver anuncia cuando entras o sales de un área o grupo, pero no se requiere interactuar con tus ítems.
  • Ignorar grupos: VoiceOver no identifica ni anuncia áreas o grupos, ni se requiere interactuar con tus ítems.

Es este último valor de ignorar grupos el que hace que el comportamiento de VoiceOver para MacOS sea el mismo que el de la versión para iOS.

¿Cual es el mejor estilo de navegación?

VoiceOver para Mac permite más estilos de navegación que otras versiones de VoiceOver. Esto permite que cada usuario pueda experimentar y utilizar la que mejor se adapte a sus necesidades y habilidades. Personalmente encuentro que algunas aplicaciones son más cómodas de navegar ignorando los grupos y otras aplicaciones con interfaces más complejas necesitan que VoiceOver identifique los grupos para poder entender mejor dónde se encuentra el foco de exploración de VoiceOver. Lo ideal es que cada usuario pruebe qué estilo de navegación va mejor y utilizando las capacidades de VoiceOver para personalizar su uso permitir que VoiceOver cambie su estilo de navegación según el momento o la aplicación. Para ello podemos utilizar las actividades de VoiceOver o los comandos de teclado de VoiceOver para cambiar entre los distintos estilos de navegación que nos proporciona VoiceOver para MacOS.

Celebración del GAAD 2024

El próximo 16 de mayo de 2024 se celebrará el GAAD o Día Mundial de Concienciación sobre la Accesibilidad.

Durante este día muchos profesionales de la accesibilidad participamos divulgando y compartiendo conocimientos y experiencias para promover la accesibilidad y la equidad social para garantizar el acceso a todas las personas.

Por mi parte participaré como ponente en un evento presencial y en remoto realizado por la gente de Hiberus.

El evento tendrá lugar el 16 de mayo a las 18:00 en el hiberus Ecosystem (Paseo Isabel la Católica 6, planta baja).

El título de mi ponencia es: La accesibilidad como rasgo de calidad para el mercado futuro.

Revisa la accesibilidad de tu código Android con Android-ally

El desarrollo de aplicaciones Android implica el diseño y la implementación de diversas interfaces de usuario. Es en esta etapa del desarrollo de un proyecto software donde aparecen todas las futuras barreras de accesibilidad que mostrará la aplicación.

Aunque todavía no exista ninguna herramienta automática para la accesibilidad que sea 100% fiable si está demostrado sin duda alguna que la detección temprana de estas barreras mejora la experiencia de la persona que desarrolla estas interfaces de usuario y es en esas etapas donde deberían existir más herramientas automáticas. Curiosamente hay más herramientas de este tipo para las etapas posteriores al desarrollo.

En Android ya existe una herramienta de validación de la accesibilidad pero funciona en aplicaciones que se estén ejecutando en un teléfono Android.

Para ayudar a las personas desarrolladoras de software para Android surge este plugin para Android studio: Android-ally.

Este plugin permite a los desarrolladores realizar ciertas pruebas en sus interfaces durante la etapa de desarrollo.

Además el creador de este plugin lo distribuye como open source para que toda la comunidad de desarrollo de Android pueda utilizarlo y mejorarlo.

Puedes ver un video explicando el plugin en detalle y su instalación en Youtube.