Una herramienta de código abierto basada en navegador para comunicación alternativa

Shay Cojocaru contribuyó a esta publicación.

¿Alguna vez has perdido la voz? ¿Cómo lo superaste? Tal vez llevabas un cuaderno y un bolígrafo para tomar notas o escribías textos rápidos en tu teléfono.

¿Alguna vez has viajado a algún lugar donde no hablabas o no entendías el idioma que hablaban todos los que te rodeaban? ¿Cómo pediste comida o compraste un billete de tren? Quizás haya utilizado un libro de frases de traducción o el traductor de Google. Quizás confiaste principalmente en gestos físicos.

Todas estas soluciones son ejemplos de métodos de comunicación (herramientas y estrategias) que quizás haya utilizado antes para resolver los desafíos comunicativos cotidianos. Los ejemplos anteriores son soluciones temporales a desafíos temporales. Tu laringitis desapareció. Regresó a casa, donde realizar las tareas diarias en su lengua materna es casi sin esfuerzo. Ahora imaginemos que estos obstáculos situacionales fueran de algún modo permanentes.

Crecí conociendo los desafíos y la creatividad necesarios para una comunicación eficaz cuando se impide el habla verbal. Mi hermana menor dice una palabra: “mamá”. Cuando éramos pequeños, recuerdo que nuestra madre ponía una sábana blanca sobre una silla para tomar fotografías de objetos cotidianos: una manzana, un tenedor, un cepillo de dientes. Ella imprimió, recortó, laminó y organizó minuciosamente estas imágenes para que mi hermana las usara para señalar lo que quería decir. Llevamos sus palabras en bolsas de plástico.

A medida que ambos crecimos y la tecnología evolucionó, sus opciones de comunicación se expandieron exponencialmente. Desde papel laminado hasta un dispositivo de pantalla táctil patentado con funcionalidad de texto a voz, pasando por una aplicación de comunicación en el iTouch y, más tarde, en el iPad.

Diferentes personas experimentan dificultades para verbalizar el habla por multitud de razones. Como en el caso de mi hermana, a veces es genético. A veces es situacional. Las razones pueden ser temporales, crónicas o permanentes. La comunicación aumentativa y alternativa ( CAA ) es un término general que abarca varios métodos de comunicación utilizados para complementar o reemplazar el habla. La Sociedad de Comunicación Aumentativa y Alternativa de los Estados Unidos ( USAAC ) define los dispositivos CAA como “todas las formas de comunicación (excepto el habla oral) que se utilizan para expresar pensamientos, necesidades, deseos e ideas”. El hecho de que estés leyendo estas palabras es un ejemplo de CAA : la escritura es un mecanismo que aumenta mi comunicación verbal.

La gama de soluciones de comunicación que emplean las personas es tan variada como las razones por las que se necesitan. Los ejemplos van desde cuadrículas de imágenes impresas hasta aplicaciones de conversión de texto a voz , pasando por interruptores que permiten escribir usando código morse, hasta software que rastrea el movimiento ocular o detecta movimientos faciales . (¡El software detrás del CAA de Stephen Hawking es de código abierto!)

La Convención sobre los Derechos de las Personas con Discapacidad ( CDPD ), un tratado internacional de derechos humanos destinado a proteger los derechos y la dignidad de las personas con discapacidad, incluye la accesibilidad a la comunicación y la información. Existen enormes desafíos para lograr que este acceso sea universal. Las soluciones actuales pueden resultar prohibitivamente caras. Según la Organización Mundial de la Salud , en muchos países de ingresos bajos y medios, sólo entre el 5% y el 15% de las personas que necesitan dispositivos y tecnologías de asistencia pueden obtenerlos. Además, muchas aplicaciones vienen en una cantidad limitada de idiomas. Muchos requieren una tienda de aplicaciones específica o un dispositivo propietario. Las soluciones comerciales de CAA pueden ser costosas y/o tener un soporte lingüístico limitado, lo que puede hacerlas en gran medida inaccesibles para muchas personas en países de bajos ingresos.

Ingrese a Cboard , un proyecto de código abierto (¡recientemente respaldado por el Fondo de Innovación de UNICEF !) impulsado por personas dedicadas a la idea de brindar una solución que funcione para todos, en todas partes; un panel de comunicación gratuito basado en la web que aprovecha el próspero ecosistema de código abierto y la funcionalidad integrada de los navegadores modernos.

Es un problema complejo, pero aprovechando el software de código abierto disponible y las formas clave en las que la web ha evolucionado en los últimos años (en términos de desarrollo de API de navegador moderno y estándares web), podemos construir un sistema gratuito y multilingüe. , alternativa de código abierto y basada en web. Hablemos de algunas de esas piezas: Web Speech API, React, Internationalization API y el concepto de “aplicación web progresiva”.

API de voz web

El desafío de producir artificialmente el habla humana no es nuevo . Las herramientas de síntesis y reconocimiento de voz ya están disponibles desde hace bastante tiempo, desde software de dictado de voz hasta herramientas de accesibilidad como lectores de pantalla. Pero la disponibilidad de una API basada en navegador hace posible empezar a buscar la producción de servicios web que tengan una barrera de entrada baja para proporcionar síntesis de voz y que proporcionen una experiencia consistente de esa síntesis de voz.

La API Web Speech proporciona una interfaz para el reconocimiento de voz (conversión de voz a texto) y la síntesis de voz (conversión de texto a voz) en el navegador. Con Cboard, nos interesa principalmente la interfaz SpeechSynthesis , que se utiliza para producir una salida de texto a voz ( TTS ). Mediante la API , podemos recuperar información sobre las voces de síntesis disponibles en el dispositivo (que varía según el navegador y el sistema operativo), iniciar y pausar la voz, etc. Los navegadores tienden a utilizar los servicios de voz disponibles de forma predeterminada en el sistema operativo del dispositivo; la API expone métodos para interactuar con estos servicios. Hemos realizado nuestro propio mapeo de algunas de las ofertas de voz e idioma mediante la digestión de los datos devueltos por la interfaz SpeechSynthesis en diferentes dispositivos que ejecutan diferentes sistemas operativos y utilizan diferentes navegadores:

Puede ver, por ejemplo, que Chrome en MacOS muestra 66 voces; eso se debe a que utiliza voces nativas de MacOS, así como 19 voces adicionales proporcionadas desde el navegador. (¿Está interesado en ver qué voces e idiomas están disponibles para usted? Visite browserspeechsupport.me ).

Todavía se está logrando soporte integral para Web Speech API, pero la mayoría de los principales navegadores modernos lo admiten. (La API Speech Synthesis está disponible para el 78,81 % de los usuarios en todo el mundo en el momento de escribir este artículo). El borrador de la especificación se presentó en 2012 y aún no es un estándar.

Estos datos de compatibilidad del navegador son de Caniuse , que ofrece más detalles. Un número indica que el navegador admite la función en esa versión o versiones posteriores.

Escritorio

Móvil/Tableta

Reaccionar

React es una biblioteca de JavaScript para crear interfaces de usuario. Una de las ideas más inequívocas del “Estado de JavaScript” de 2017 (una encuesta a más de 23.000 desarrolladores) fue que React es actualmente la “ biblioteca front-end dominante ” en términos de cifras y con altas calificaciones en cuanto a nivel de uso y desarrollador. satisfacción.

Eso no significa que sea lo mejor para cada situación y no significa que será dominante en el largo plazo. Pero sus características y la relativa ubicuidad de la adopción (al menos en este momento) lo convierten en una excelente opción para nuestro proyecto, porque existe una barrera de entrada más baja para que las personas comiencen a contribuir: existe una comunidad sólida para aprender y solución de problemas.

React hace uso del concepto de DOM “virtual”, donde se guarda en la memoria una representación virtual de la UI. Cualquier cambio en el estado de su aplicación se compara con el estado del DOM “real”, utilizando un algoritmo de “diferenciación” . Esto nos permite realizar cambios eficientes en la capa de vista de una aplicación y representar el estado de nuestra aplicación de una manera predecible, sin requerir manipulación manual de DOM (en su mayor parte). React también enfatiza el uso de arquitectura basada en componentes.

React es compatible con todos los navegadores populares. (Para algunos navegadores antiguos como IE 9/IE 10, se requieren polyfills ).

API de internacionalización de ECMAScript

Como se señaló anteriormente, un área en la que las ofertas actuales de CAA no son suficientes es el amplio soporte multilingüe. La combinación de Web Speech API, la API de internacionalización (y las ofertas de código abierto que la rodean) y React nos permiten admitir hasta 33 idiomas. (Por los motivos descritos anteriormente, este soporte varía según el sistema operativo).

La internacionalización es el proceso de diseñar y desarrollar una aplicación y su contenido “de una manera que garantice que funcionará bien o que pueda adaptarse fácilmente a usuarios de cualquier cultura, región o idioma”. La API de internacionalización proporciona funcionalidad para tres áreas clave: comparación de cadenas, formato de números y formato de fecha y hora. La API está expuesta en el Intlobjeto global.

FormatJS , una colección de bibliotecas que se basan en el Intlestándar, tiene un conjunto de integraciones con bibliotecas de componentes comunes (como React!) que se envían con las bibliotecas principales de FormatJS integradas. Usamos la integración de React, react-intlque proporciona enlaces para internacionalizar las aplicaciones de React. .

La mayoría de los navegadores del mundo admiten la API ES Intl ( 84,16% de los usuarios a nivel mundial en el momento de escribir este artículo).

Estos datos de compatibilidad del navegador son de Caniuse , que ofrece más detalles. Un número indica que el navegador admite la función en esa versión o versiones posteriores.

Escritorio

Móvil/Tableta

Aplicaciones web progresivas

Las aplicaciones web progresivas ( PWA ) son sitios web habituales que aprovechan las funciones modernas del navegador para ofrecer una experiencia web con los mismos beneficios (o incluso mejores ) que las aplicaciones móviles nativas. Cualquier sitio web es técnicamente una PWA si cumple tres requisitos : se ejecuta bajo HTTPS, tiene un manifiesto de aplicación web y tiene un trabajador de servicio . Un trabajador de servicios actúa esencialmente como un proxy, ubicado entre las aplicaciones web, el navegador y la red. Se ejecuta en segundo plano y decide servir contenido en red o en caché en función de la conectividad, lo que permite la gestión de una experiencia fuera de línea.

Más allá de esos tres requisitos básicos, las cosas se complican un poco más. Cuando Alex Russell y Frances Berriman presentaron y bautizaron la “aplicación web progresiva”, enumeraron diez atributos que caracterizan a una PWA : capacidad de respuesta, conectividad independiente, similar a una aplicación, novedosa, segura, detectable, reutilizable, instalable y vinculable.

Este concepto termina siendo la pieza clave del rompecabezas en nuestro intento de construir algo que resuelva los problemas descritos anteriormente: que la mayoría de las soluciones CAA existentes pueden ser prohibitivamente costosas, ofrecer idiomas limitados o permanecer estancadas en una tienda de aplicaciones o en un dispositivo propietario. Utilizando el enfoque PWA, podemos unir las características que los navegadores modernos tienen para ofrecer (Web Speech API, API de internacionalización, etc.) junto con una experiencia similar a la de una aplicación independientemente de los sistemas operativos, sin estar sujeta a métodos de distribución de aplicaciones centralizados y con soporte. para un uso continuo y sin problemas sin conexión.

Estos datos de compatibilidad del navegador son de Caniuse , que ofrece más detalles. Un número indica que el navegador admite la función en esa versión o versiones posteriores.

Escritorio

Móvil/Tableta

El estado actual de la web proporciona todos los ingredientes fundamentales que necesitamos para construir una solución CAA más inclusiva y accesible para personas de todo el mundo. En el espíritu de la web abierta, y con un gran reconocimiento al trabajo que se ha realizado para codificar los estándares web, sabemos que una solución de comunicación abierta y gratuita está a la vista.

¿Te suena interesante? ¡Te invitamos a echar un vistazo y tal vez incluso a profundizar como colaborador!

Referencias

• http://blog.teamtreehouse.com/getting-started-speech-synchronous-api
• https://w3c.github.io/speech-api/speechapi.html#tts-section
• https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis
• https://www.sitepoint.com/introduciendo-web-speech-api/
• https://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/
• https://hacks.mozilla.org/2014/12/introduciendo-the-javascript-internationalization-api/
• https://julian.is/article/progressive-web-apps/
• http://alistapart.com/article/yes-that-web-project-should-be-a-pwa
• https://adactio.com/journal/12461
• https://medium.com/@slightlylate/progressive-apps-escaping-tabs-sin-perder-nuestra-alma-3b93a8561955