基于浏览器的开源替代性沟通工具

Shay Cojocaru 为这篇文章做出了贡献。

您是否曾经失声？您是如何处理这种情况的？也许您带了笔记本和笔来写笔记。或者在手机上快速写短信。

您是否曾经去过一个您不会说或不理解周围人使用的语言的地方？您是如何点餐或购买火车票的？也许您使用了翻译词典或 Google 翻译。也许您主要依靠肢体语言。

所有这些解决方案都是您可能以前用来解决日常沟通挑战的沟通方法——工具和策略的示例。前面的例子是针对临时挑战的临时解决方案。您的喉炎好了。您回家了，用母语完成日常任务变得几乎毫不费力。现在想象一下，这些情境障碍以某种方式变成了永久性的。

我从小就知道，当口头言语受到阻碍时，需要哪些挑战和创造力才能实现有效沟通。我的妹妹只说一个字：“妈妈”。当我们还小的时候，我记得我们的妈妈把一张白床单放在椅子上，拍下了日常物品的照片——一个苹果、一个叉子和一把牙刷。她费尽心思地打印、剪切、层压并整理了这些图像，以便我的妹妹可以指着她想说的话。我们把她的话装在塑料袋里。

随着我们两个人的成长，以及技术的进步，她的沟通选择成倍地扩展。从层压纸，到带有文本转语音功能的专有触摸屏设备，到 iTouch 上的通讯应用程序，以及后来的 iPad。

不同的人由于各种原因难以表达口头言语。就像我妹妹的情况一样，有时是遗传原因。有时是情境因素。原因可能是暂时的、慢性的或永久性的。增补和替代性沟通 (AAC) 是一个涵盖各种沟通方法的总称，这些方法用于补充或替代言语。美国增补和替代性沟通协会 (USAAC) 将 AAC 设备定义为 包括“所有形式的沟通（除口头言语外），用于表达想法、需求、愿望和观点。”您正在阅读这些文字的事实就是一个例子 AAC——写作是一种增强我的口头交流的机制。

人们使用的沟通解决方案范围与他们需要的理由一样多样化。示例包括印刷图片网格、文本转语音应用程序、允许使用摩尔斯电码输入的开关，以及用于 跟踪眼球运动 或 检测面部动作 的软件。（斯蒂芬·霍金的 AAC 背后的软件是开源的！）

《残疾人权利公约》 (CRPD) 是一项旨在保护残疾人权利和尊严的国际人权条约，其中包括获取沟通和信息。使这种获取普遍化存在着巨大的挑战。目前的解决方案可能过于昂贵。根据世界卫生组织，在许多低收入和中等收入国家，只有 5% 到 15% 的需要辅助设备和技术的 人们能够获得它们。此外，许多应用程序提供的语言有限。许多应用程序需要特定的应用商店或专有设备。商业 AAC 解决方案可能很昂贵，或者语言支持有限，这使得它们对许多低收入国家的人们来说几乎无法使用。

进入 Cboard，这是一个开源项目（最近得到了联合国儿童基金会创新基金 的支持！），由致力于提供适用于每个人、每个地方的解决方案的人们驱动；一个免费的、基于 Web 的沟通板，利用蓬勃发展的开源生态系统和现代浏览器的内置功能。

这是一个复杂的问题，但是，通过利用可用的开源软件以及网络在过去几年中（在现代浏览器 API 开发和 Web 标准方面）的演变的关键方式，我们可以构建一个免费的、多语言的、开源的、基于 Web 的替代方案。让我们讨论一下这些部分中的几个——Web 语音 API、React、国际化 API 以及“渐进式网页应用”概念。

Web 语音 API

人工产生人声的挑战并不新鲜。语音识别和合成工具已经存在了相当一段时间——从语音听写软件到屏幕阅读器等辅助工具。但是，基于浏览器的 API 的可用性使得有可能开始寻求开发 Web 服务，这些服务具有较低的进入门槛以提供语音合成，并提供一致的语音合成体验。

Web 语音 API 提供了用于在浏览器中进行语音识别（语音到文本）和语音合成（文本到语音）的接口。对于 Cboard，我们主要关心SpeechSynthesis 接口，它用于生成文本到语音 (TTS) 输出。使用API，我们可以检索有关设备上可用合成语音的信息（因浏览器和操作系统而异）、启动和暂停语音等。浏览器倾向于使用设备操作系统默认提供的语音服务——API 公开了与这些服务交互的方法。我们通过消化从运行不同操作系统的不同设备上使用不同浏览器的 SpeechSynthesis 接口返回的数据，对一些语音和语言产品进行了自己的映射。

例如，您可以看到，MacOS 上的 Chrome 显示了 66 种语音——这是因为它使用 MacOS 本地语音，以及浏览器提供的 19 种其他语音。（有兴趣了解您可用的语音和语言？请查看 browserspeechsupport.me。）

对 Web 语音 API 的全面支持仍在不断完善，但大多数主要的现代浏览器都支持它。（截至撰写本文时，语音合成 API 可供全球 78.81% 的用户使用）。草案规范于 2012 年推出，尚未成为标准。

React

React 是一个用于构建用户界面的 JavaScript 库。2017 年“JavaScript 状态”（对超过 23,000 名开发人员的调查）得出的最明确的见解之一是，React 目前是“占主导地位的前端库”，就绝对数量而言，以及在使用水平和开发人员满意度方面获得了很高的评价。

这并不意味着它在每种情况下都是最好的，也不意味着它将在长期内占主导地位。但它的功能以及相对普遍的采用（至少目前是这样）使其成为我们项目的绝佳选择，因为人们开始贡献的门槛较低——学习和故障排除社区很强大。

React 利用“虚拟”DOM 的概念，其中 UI 的虚拟表示存储在内存中。对应用程序状态的任何更改都会与“真实”DOM 的状态进行比较，使用“差异”算法。这使我们能够对应用程序的视图层进行有效的更改，并以可预测的方式表示应用程序的状态，而无需手动 DOM 操作（在大多数情况下）。React 还强调使用基于组件的体系结构。

React 受所有流行浏览器的支持。（对于一些较旧的浏览器，如IE 9/IE 10，需要 polyfill）。

ECMAScript 国际化 API

如前所述，当前 AAC 产品的不足之处之一是缺乏广泛的多语言支持。Web 语音 API、国际化 API（及其周围的开源产品）和 React 的组合使我们能够支持多达 33 种语言。（由于前面描述的原因，这种支持因操作系统而异）。

国际化 是以“确保应用程序及其内容能够很好地适用于任何文化、地区或语言的用户，或能够轻松地适应这些用户”的方式设计和开发应用程序及其内容的过程。国际化 API 为三个关键领域提供功能：字符串比较、数字格式化以及日期和时间格式化。该 API 在全局 Intl 对象上公开。

FormatJS，一个基于Intl标准的库集合，它与常见组件库（如 React！）有一套集成，这些库内置在 FormatJS 核心库中。我们使用 React 集成，react-intl，它提供了绑定来国际化 React 应用程序。

世界上大多数浏览器都支持 ES Intl API（截至撰写本文时，全球 84.16% 的用户）。

渐进式 Web 应用程序

渐进式 Web 应用程序（PWAs）是常规网站，它们利用现代浏览器功能来提供与原生移动应用程序相同的优势（甚至更好的优势）。任何网站在技术上都是一个PWA，只要它满足三个要求：它在 HTTPS 下运行，有一个Web 应用清单，以及一个服务工作者。服务工作者本质上充当代理，位于 Web 应用程序、浏览器和网络之间。它在后台运行，根据连接性决定提供网络内容还是缓存内容，从而允许管理离线体验。

除了这三个基本要求之外，事情变得有点模棱两可。当 Alex Russell 和 Frances Berriman 引入并命名“渐进式 Web 应用程序”时，他们列举了十个特征描述一个PWA——响应式、连接独立、类似应用程序、新鲜、安全、可发现、可重新参与、可安装和可链接。

这个概念最终成为我们试图构建一个解决方案的关键拼图，该解决方案可以解决前面描述的问题——大多数现有的AAC解决方案可能过于昂贵，提供的语言有限，或者停留在应用程序商店或专有设备中。使用PWA方法，我们可以将现代浏览器提供的功能——Web 语音 API、国际化 API 等——与类似应用程序的体验结合在一起，无论操作系统如何，不受集中式应用程序分发方法的束缚，并支持无缝的离线持续使用。

当今的网络状态提供了我们构建更具包容性、更广泛可访问的AAC解决方案所需的所有基础要素，以造福世界各地的人们。本着开放网络的精神，并向为编纂网络标准所做的努力致敬，我们知道一个免费的开放式通信解决方案近在眼前。

对您来说听起来很有趣吗？我们邀请您来看看，甚至可以作为贡献者参与进来！

参考资料

• http://blog.teamtreehouse.com/getting-started-speech-synthesis-api
• https://w3c.github.io/speech-api/speechapi.html#tts-section
• https://mdn.org.cn/en-US/docs/Web/API/SpeechSynthesis
• https://www.sitepoint.com/introducing-web-speech-api/
• https://hacks.mozilla.ac.cn/2016/01/firefox-and-the-web-speech-api/
• https://hacks.mozilla.ac.cn/2014/12/introducing-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-without-losing-our-soul-3b93a8561955