Cómo utilizar Talkback en el emulador de Android

En un artículo anterior hemos visto cómo utilizar el emulador de Android para poder simular el comportamiento de un dispositivo Android dentro de nuestro ordenador.

Uno de los problemas del emulador de Android es que por defecto no vienen instalados todas las aplicaciones y servicios que se incluyen en un teléfono Android. Entre estos servicios están los servicios de accesibilidad como TalkBack. Pero esto no es problema ya que podemos instalar TalkBack en nuestro emulador de Android para poder probar la accesibilidad del proyecto que estemos realizando o para poder disfrutar de algunas experiencias de Android a través de su emulador.

Instalación del APK

Lo primero que debemos hacer es descargar el APK de TalkBack. Este fichero se puede descargar de la Google PlayStore y su nombre completo es com.google.android.marvin.talkback.apk.

El APK es un fichero comprimido que contiene todos los recursos que requiere una aplicación Android para ser ejecutada en un dispositivo Android.

Una vez descargado el fichero APK debemos arrancar el emulador para que ADB pueda detectarlo ya que realizaremos la instalación a través de ADB.

Podemos mostrar qué dispositivos están conectados a nuestro ordenador con el siguiente comando:

adb devices

Cuando el emulador esté disponible y ADB lo detecte podemos proceder a la instalación del APK con el siguiente comando:

adb install com.google.android.marvin.talkback.apk

Si ADB indica que no se ha encontrado el fichero es porque debemos indicar la ruta concreta o ejecutar el comando ADB en la misma carpeta donde guardamos la descarga del APK. Por ejemplo una versión con ruta completa de este comando sería:

adb install /Users/MiUsuario/Downloads/com.google.android.marvin.talkback.apk

Solucionando problemas con servicios y permisos

En Android es necesario que aplicaciones y servicios tengan permiso del usuario para realizar ciertas tareas. Un lector de pantallas, al igual que otros servicios de accesibilidad, requieren de permisos de alto nivel para poder funcionar. Por defecto al instalar un APK no se otorgan estos permisos por lo que debemos aprobar este nivel de acceso para TalkBack.

Podemos realizar esta operación con el siguiente comando de ADB:

adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/.TalkBackService

Arrancando el servicio de accesibilidad

Ahora que tenemos TalkBack instalado en el dispositivo virtual de Android y tiene permisos para ejecutarse debemos activar TalkBack en nuestro dispositivo emulado. Para ello deberíamos ir a los ajustes de Android, accesibilidad y activar TalkBack pero realizar esta operación no es posible si eres un usuario con discapacidad ya que el emulador no ofrece todavía una experiencia accesible.

Por suerte para los usuarios con discapacidad desde ADB también podemos activar y arrancar aplicaciones y servicios en nuestro dispositivo Android. Con el siguiente comando activaremos el servicio de accesibilidad de TalkBack:

adb shell am startservice com.google.android.marvin.talkback/.TalkBackService

Una vez ejecutado el siguiente comando TalkBack debería comenzar a hablar en el emulador. Verifica que el volumen del emulador es suficiente para escuchar la síntesis de voz de TalkBack.

Utilizar TalkBack en el emulador

Para controlar TalkBack en el emulador deberemos utilizar los atajos de teclado de TalkBack como vimos en el artículo sobre cómo utilizar TalkBack con el teclado.

Accesibilidad en los títulos de página

Los desarrolladores web y las herramientas de desarrollo van incorporando poco a poco elementos que van reduciendo la complejidad y la severidad de las barreras de accesibilidad presentes en las páginas de nueva creación. Pero estos esfuerzos se centran principalmente en las alternativas a imágenes, contrastes de color y, a veces, la estructura semántica de las páginas. En muchos casos siguen apareciendo barreras de accesibilidad relacionadas con la comprensión del sitio que se está navegando o de los mecanismos de navegación y orientación en un sitio web. En la mayoría de ocasiones este problema se debe al desconocimiento de las necesidades de estos mecanismos de orientación y navegación.

Título de página

El título de una página web es un mecanismo de orientación al que no se le presta actualmente mucha importancia. Incluso en muchos casos el desarrollador desconoce cómo cambiar el valor del título de la página sobre todo si desarrolla webs del tipo Single Page Application en la que toda la experiencia de navegación aparentemente se desarrolla sin saltar a otras páginas web.

El título de una página web es un mecanismo de navegación muy útil para personas con discapacidad que no pueden comprender una página de un vistazo.

Esta necesidad de accesibilidad se recoge en el criterio de éxito 2.4.2 de WCAG 2.0. Puedes leer la documentación oficial de la WAI para el criterio de éxito 2.4.2 understanding page titled.

Este criterio de éxito es de nivel A por lo que es de obligado cumplimiento en todas las legislaciones nacionales de Europa y Estados Unidos así como en las legislaciones de otros países ya que en todos ellos el nivel de mínimo cumplimiento legal es el de AA.

Título de página apropiado

Se considera como válido y accesible un título de página que identifique claramente el propósito y el contenido de la página que se está consultando.

En muchos casos el título de las páginas consiste en el uso del nombre de la empresa o producto que se está consultando. 

Imaginemos por ejemplo la experiencia de navegación por un sitio web especializado en la venta de productos de jardinería. Lo habitual es encontrar que el título de todas las páginas es algo como El jardinero en casa. Y utiliza este valor para titular todas las páginas del sitio web. Esto hace que el título de la página no ayude como mecanismo de orientación.

Sigamos imaginando y en nuestro sitio de jardinería encontramos que hay secciones de quienes somos, contactar, tienda, noticias y galería de fotos. Con esta complejidad en la estructura de secciones y contenidos es cada vez más necesario un título de página que refleje la sección que estamos consultando sin olvidar el nombre del sitio web. Un título de página más apropiado para estos contenidos podría ser: El jardinero en casa – quienes somos.

Pero si seguimos profundizando en la experiencia de navegación y nos movemos dentro de la tienda consultando productos el título de página que muestra el nombre del sitio y la sección no es suficiente. Además debemos añadir al título de página el nombre del contenido concreto que estamos consultando en esa página. Un título de página más apropiado sería: El jardinero en casa – Tienda – Tijeras de podar modelo Acme.

Con esta información una persona puede comprender dónde está y qué contenido principal se va a encontrar en la página.

Declaración del título de página

La declaración del título de página se realiza dentro del fichero HTML en la cabecera de la página (elemento <head></head>) y se utiliza el tag <title>.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />

    <title>El título de la página</title>

  </head>

  <body></body>

</html>

Esta declaración dentro del código HTML es apropiada cuando utilizamos tecnologías en las que tenemos total control del código HTML que se envía a los navegadores web de los usuarios.

En el caso de utilizar tecnologías como las utilizadas en las Single Page Applications como React o Angular debemos hacer uso de Javascript para actualizar el valor del título de la página.

La propiedad title del objeto document nos proporciona esta posibilidad de actualizar el título de nuestra página. Por ejemplo la siguiente línea en javascript actualizará el título de la página:

function setTitlePageWithProduct(productName) {

  document.title = "El jardinero en casa - Tienda - " + productName

}

Esta función se podría utilizar cada vez que se vaya a renderizar el componente que muestra la información del producto de la tienda.

Con toda esta información ya no hay excusas para que los desarrolladores no proporcionen buenos y accesibles títulos en sus páginas web.

Disponible la librería SpeechManager para MacOS, iOS, TvOS y WatchOS

La librería SpeechManager proporciona diversas funciones para poder controlar los sistemas de síntesis de voz que ofrece Apple en sus diversas plataformas.

Con SpeechManager podremos utilizar tanto la síntesis de voz del sistema como la de la propia API de accesibilidad.

Este framework se distribuye como un paquete compatible con Swift Package Manager por lo que la integración en proyectos con XCode está garantizada.

La librería se ha publicado bajo la licencia MIT por lo que es totalmente libre y únicamente se requiere respetar la autoría de la misma.

Puedes encontrar esta librería en la página del repositorio de SpeechManager en el Github de Tyflos accessible software.

Disponible la librería OCRHelper para MacOS, iOS, TvOS y WatchOS

Disponible librería para reconocer el texto de imágenes en proyectos MacOS, iOS, TvOS y WatchOS con Swift utilizando Swift Package Manager.

La librería llamada OCRHelper simplifica los procesos de detección de texto en una imagen tanto en formato CGImage, NSImage como UIImage por lo que se pueden crear aplicaciones con reconocimiento de texto en cualquier plataforma de Apple.

La librería se ha publicado bajo la licencia MIT por lo que es totalmente libre y unicamente se requiere respetar la autoría de la misma.

Puedes encontrar esta librería en la página del repositorio de OCRHelper en el Github de Tyflos accessible software.

AImaginator, una contribución de Tyflos accessible software para usar Dall-E de forma más cómoda en MacOS

El uso de inteligencias artificiales para ayudar a personas con discapacidad es algo cada vez más común. Personalmente utilizo DALL-E para generar algunas imágenes que necesito utilizar en mi día a día.

Por este motivo y por evitar tener que utilizar el sitio web de OpenAI he creado el proyecto de AImaginator

AImaginator es una aplicación sencilla para MacOS que permite generar imágenes a partir de un texto que la describe.

Para utilizar AImaginator sólo necesitamos un ordenador Mac y una API key del servicio de OpenAI. El resto lo encontrarás en el repositorio de AImaginator en Github. En el repositorio también encontrarás el código fuente para mejorar la aplicación.

Desactivar el completado automático en Visual Studio Code

Aunque Visual Studio code, o más conocido como VSCode, ofrece multitud de herramientas automáticas para mejorar la experiencia mientras escribimos código algunas de estas herramientas pueden provocar conflictos con algunos productos de apoyo.

Es el caso de la herramienta de completado automático de código.

Esta herramienta muestra una ventana emergente que provoca conflictos con el foco de lectura de los lectores de pantalla provocando que se interrumpa la experiencia de introducción de código por parte del usuario.

Por suerte para los usuarios de lectores de pantalla esta herramienta se puede desactivar su aparición automática y los usuarios de lectores de pantalla pueden acceder al panel de sugerencias de completado de código de forma manual.

Editando la configuración de VSCode en JSON

Los ficheros de preferencias y configuración de VSCode están en formato JSON por lo que es sencillo su modificación.

Para acceder a nuestro fichero de configuración de VSCode sólo debemos seguir estos pasos:

  • Abrir VSCode
  • Pulsar la tecla F1 para acceder al asistente de ejecución de comandos de VSCode
  • En el cuadro de búsqueda escribir «preferencias json»  y elegir la opción Preferencias: Abrir configuración de usuario (JSON)Preferences: Open User Settings (JSON)

En VSCode aparecerá un fichero de texto con nuestras preferencias en formato JSON. Deberá ser algo parecido a esto:

{
  "editor.accessibilitySupport": "on",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "editor.minimap.enabled": false,
  "workbench.editor.untitled.hint": "hidden",
  "breadcrumbs.enabled": false
}

Debemos incluir las opciones relacionadas con el completado automático de código.

La opción de editor.quickSuggestions controla si se debe abrir las sugerencias de completado mientras se escribe. Su formato es:

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false },

La opción de editor.acceptSuggestionOnEnter controla si se deben aceptar las sugerencias automáticas pulsando la tecla enter. Es recomendable desactivar esta opción para que no haya forma de aceptar una sugerencia de forma involuntaria.

Su formato es:

"editor.acceptSuggestionOnEnter": "off",

La opción editor.quickSuggestionsDelay controla el tiempo de pausa que habrá para que aparezca una sugerencia en el código. Se recomienda un tiempo superior a 5 segundos si no queremos que haya posibilidad de cualquier sugerencia de forma automática. Su formato es:

"editor.quickSuggestionsDelay": 10,

La opción editor.wordBasedSuggestions activa un sistema de sugerencias por palabras. Es recomendable desactivar esta opción. 

Su formato es:

"editor.wordBasedSuggestions": false

Finalmente el código de nuestro JSON deberá quedar de la siguiente forma:

{
  "editor.accessibilitySupport": "on",
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  "editor.acceptSuggestionOnEnter": "on",
  "editor.quickSuggestionsDelay": 10,
  "editor.wordBasedSuggestions": true,
  "workbench.startupEditor": "NewUntitledFile",
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "editor.minimap.enabled": false,
  "workbench.editor.untitled.hint": "hidden",
  "breadcrumbs.enabled": false
}

De esta forma la única posibilidad de utilizar la función de completado de código será pulsando el atajo de teclado Control+espacio para que aparezca la ventana con las sugerencias.