Ein browserbasiertes Open-Source-Tool für alternative Kommunikation

Shay Cojocaru hat zu diesem Beitrag beigetragen.

Haben Sie jemals Ihre Stimme verloren? Wie sind Sie damit umgegangen? Vielleicht hatten Sie ein Notizbuch und einen Stift dabei, um Notizen zu kritzeln. Oder Sie haben schnelle Texte auf Ihrem Handy notiert.

Waren Sie schon einmal an einem Ort, an dem Sie die Sprache, die alle um Sie herum sprachen, nicht verstanden haben? Wie haben Sie Essen bestellt oder eine Fahrkarte gekauft? Vielleicht haben Sie ein Übersetzungshandbuch oder Google Translate benutzt. Vielleicht haben Sie sich hauptsächlich auf physische Gesten verlassen.

All diese Lösungen sind Beispiele für Kommunikationsmethoden – Werkzeuge und Strategien –, die Sie möglicherweise zuvor verwendet haben, um alltägliche kommunikative Herausforderungen zu lösen. Die vorherigen Beispiele sind vorübergehende Lösungen für vorübergehende Herausforderungen. Ihre Kehlkopfentzündung war vorbei. Sie kehrten nach Hause zurück, wo die Bewältigung täglicher Aufgaben in Ihrer Muttersprache fast mühelos ist. Stellen Sie sich nun vor, dass diese situativen Hindernisse irgendwie permanent wären.

Ich bin mit den Herausforderungen und der Kreativität aufgewachsen, die für eine effektive Kommunikation notwendig sind, wenn die verbale Sprache beeinträchtigt ist. Meine jüngere Schwester spricht nur ein Wort: „Mama“. Als wir klein waren, erinnere ich mich, wie unsere Mutter ein weißes Laken über einen Stuhl legte, um Bilder von Alltagsgegenständen zu machen – ein Apfel, eine Gabel, eine Zahnbürste. Sie druckte, schnitt, laminierte und organisierte diese Bilder mühsam für meine Schwester, damit sie zeigen konnte, was sie wollte. Wir trugen ihre Worte in Plastiktüten.

Als wir beide älter wurden und sich die Technologie weiterentwickelte, erweiterten sich ihre Kommunikationsmöglichkeiten exponentiell. Von laminiertem Papier über ein proprietäres Touchscreen-Gerät mit Text-to-Speech-Funktion bis hin zu einer Kommunikations-App auf dem iTouch und später dem iPad.

Verschiedene Menschen haben aus einer Vielzahl von Gründen Schwierigkeiten, Sprache zu verbalisieren. Wie im Fall meiner Schwester ist es manchmal genetisch bedingt. Manchmal ist es situativ. Die Gründe können vorübergehend, chronisch oder dauerhaft sein. Augmentative und alternative Kommunikation (AAC) ist ein Überbegriff, der verschiedene Kommunikationsmethoden umfasst, die zur Ergänzung oder zum Ersatz von Sprache verwendet werden. Die United States Society for Augmentative and Alternative Communication (USAAC) definiert AAC-Geräte als „alle Formen der Kommunikation (außer der gesprochenen Sprache), die zur Äußerung von Gedanken, Bedürfnissen, Wünschen und Ideen verwendet werden.“ Die Tatsache, dass Sie diese Worte lesen, ist ein Beispiel für AAC – Schreiben ist ein Mechanismus, der meine verbale Kommunikation ergänzt.

Die Bandbreite der Kommunikationslösungen, die Menschen anwenden, ist so vielfältig wie die Gründe, warum sie benötigt werden. Die Beispiele reichen von gedruckten Bildrastern über Text-to-Speech-Apps bis hin zu Schaltern, die das Tippen per Morsecode ermöglichen, und Software, die Augenbewegungen verfolgt oder Gesichtsbewegungen erkennt. (Die Software hinter Stephen Hawkings AAC ist Open Source!)

Die Behindertenrechtskonvention, ein internationaler Menschenrechtsvertrag zum Schutz der Rechte und der Würde von Menschen mit Behinderungen, umfasst die Zugänglichkeit von Kommunikation und Information. Es gibt immense Herausforderungen, diesen Zugang universell zu gestalten. Aktuelle Lösungen können unerschwinglich teuer sein. Laut der Weltgesundheitsorganisation können in vielen Ländern mit niedrigem und mittlerem Einkommen nur 5-15% der Menschen, die assistive Geräte und Technologien benötigen, diese erhalten. Darüber hinaus sind viele Apps in einer begrenzten Anzahl von Sprachen verfügbar. Viele erfordern einen bestimmten App Store oder ein proprietäres Gerät. Kommerzielle AAC-Lösungen können teuer sein und/oder eine eingeschränkte Sprachunterstützung bieten, was sie für viele Menschen in Ländern mit niedrigem Einkommen weitgehend unzugänglich machen kann.

Hier kommt Cboard ins Spiel, ein Open-Source-Projekt (kürzlich unterstützt vom UNICEF Innovation Fund!), das von Menschen betrieben wird, die sich der Idee verschrieben haben, eine Lösung anzubieten, die für jeden und überall funktioniert; ein kostenloses, webbasiertes Kommunikationsboard, das das florierende Open-Source-Ökosystem und die integrierte Funktionalität moderner Browser nutzt.

Es ist ein komplexes Problem, aber durch die Nutzung verfügbarer Open-Source-Software und wichtiger Entwicklungen des Webs in den letzten Jahren (in Bezug auf moderne Browser-API-Entwicklung und Webstandards) können wir eine kostenlose, mehrsprachige, Open-Source-Weblösung entwickeln. Lassen Sie uns über einige dieser Komponenten sprechen – die Web Speech API, React, die Internationalization API und das Konzept der „Progressive Web App“.

Web Speech API

Die Herausforderung der künstlichen Erzeugung menschlicher Sprache ist nicht neu. Spracherkennungs- und Synthesewerkzeuge gibt es schon seit einiger Zeit – von Sprachdiktiersoftware bis hin zu Barrierefreiheitswerkzeugen wie Screenreadern. Die Verfügbarkeit einer browserbasierten API ermöglicht es jedoch, mit der Entwicklung von Webdiensten zu beginnen, die eine geringe Einstiegshürde für die Sprachsynthese bieten und eine konsistente Erfahrung dieser Sprachsynthese ermöglichen.

Die Web Speech API bietet eine Schnittstelle für Spracherkennung (Sprache-zu-Text) und Sprachsynthese (Text-zu-Sprache) im Browser. Bei Cboard konzentrieren wir uns hauptsächlich auf die SpeechSynthesis-Schnittstelle, die zur Erzeugung von Text-zu-Sprache (TTS)-Ausgaben verwendet wird. Mit der API können wir Informationen über die auf dem Gerät verfügbaren Synthesestimmen abrufen (die je nach Browser und Betriebssystem variieren), Sprache starten und pausieren usw. Browser verwenden in der Regel die standardmäßig auf dem Betriebssystem des Geräts verfügbaren Sprachdienste – die API stellt Methoden zur Interaktion mit diesen Diensten bereit. Wir haben unsere eigene Zuordnung einiger Sprach- und Sprachangebote vorgenommen, indem wir Daten verdaut haben, die von der SpeechSynthesis-Schnittstelle auf verschiedenen Geräten mit unterschiedlichen Betriebssystemen und Browsern zurückgegeben werden.

Sie können zum Beispiel sehen, dass Chrome auf MacOS 66 Stimmen anzeigt – das liegt daran, dass es die nativen Stimmen von MacOS sowie 19 zusätzliche Stimmen nutzt, die vom Browser bereitgestellt werden. (Sind Sie daran interessiert zu sehen, welche Stimmen und Sprachen Ihnen zur Verfügung stehen? Schauen Sie sich browserspeechsupport.me an.)

Die umfassende Unterstützung für die Web Speech API ist noch nicht vollständig, aber die meisten wichtigen modernen Browser unterstützen sie. (Die Speech Synthesis API ist zum Zeitpunkt des Schreibens für 78,81% der Nutzer weltweit verfügbar). Die Entwurfsspezifikation wurde 2012 eingeführt und ist noch kein Standard.

React

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Eine der eindeutigsten Erkenntnisse aus der Umfrage „State of JavaScript“ 2017 – einer Umfrage unter über 23.000 Entwicklern – war, dass React in Bezug auf die schiere Anzahl und die hohen Bewertungen für Nutzung und Entwicklerzufriedenheit derzeit die „dominierende Frontend-Bibliothek“ ist.

Das bedeutet nicht, dass es für jede Situation die beste ist und auch nicht, dass es langfristig dominant sein wird. Aber seine Funktionen und die relative Allgegenwärtigkeit der Akzeptanz (zumindest zu diesem Zeitpunkt) machen es zu einer großartigen Option für unser Projekt, da die Einstiegshürde für Beiträge geringer ist – es gibt eine starke Gemeinschaft zum Lernen und zur Fehlersuche.

React nutzt das Konzept des „virtuellen“ DOM, bei dem eine virtuelle Darstellung der Benutzeroberfläche im Speicher gehalten wird. Jede Zustandsänderung Ihrer Anwendung wird mit dem Zustand des „echten“ DOM verglichen, wobei ein „Diffing“-Algorithmus verwendet wird. Dies ermöglicht es uns, effiziente Änderungen an der Ansichts-Schicht einer Anwendung vorzunehmen und den Zustand unserer Anwendung auf vorhersagbare Weise darzustellen, ohne manuelle DOM-Manipulationen durchführen zu müssen (größtenteils). React betont auch die Verwendung einer komponenten-basierten Architektur.

React wird von allen gängigen Browsern unterstützt. (Für einige ältere Browser wie IE 9 / IE 10 sind Polyfills erforderlich).

ECMAScript Internationalization API

Wie bereits erwähnt, ist die breite Mehrsprachigkeitsunterstützung ein Bereich, in dem aktuelle AAC-Angebote defizitär sind. Die Kombination aus Web Speech API, Internationalization API (und den dazugehörigen Open-Source-Angeboten) und React ermöglicht es uns, bis zu 33 Sprachen zu unterstützen. (Aus den bereits beschriebenen Gründen variiert diese Unterstützung je nach Betriebssystem).

Internationalisierung ist der Prozess der Gestaltung und Entwicklung einer Anwendung und ihres Inhalts „auf eine Weise, die sicherstellt, dass sie für Benutzer aus jeder Kultur, Region oder Sprache gut funktioniert oder leicht angepasst werden kann.“ Die Internationalization API bietet Funktionalität für drei Schlüsselbereiche: Stringvergleich, Zahlenformatierung sowie Datums- und Zeitformatierung. Die API wird auf dem globalen Intl-Objekt exponiert.

FormatJS, eine Sammlung von Bibliotheken, die auf dem Intl-Standard aufbauen, bietet eine Reihe von Integrationen mit gängigen Komponentenbibliotheken (wie React!), die mit den FormatJS-Kernbibliotheken ausgeliefert werden. Wir verwenden die React-Integration, react-intl, die Bindungen zur Internationalisierung von React-Apps bereitstellt.

Die meisten Browser der Welt unterstützen die ES Intl API (zum Zeitpunkt des Schreibens für 84,16% der Nutzer weltweit).

Progressive Web Apps

Progressive Web Apps (PWAs) sind reguläre Websites, die moderne Browserfunktionen nutzen, um ein Web-Erlebnis mit den gleichen Vorteilen (oder sogar besseren) wie native mobile Apps zu bieten. Jede Website ist technisch eine PWA, wenn sie drei Anforderungen erfüllt: Sie läuft über HTTPS, verfügt über ein Web App Manifest und einen Service Worker. Ein Service Worker fungiert im Wesentlichen als Proxy, der zwischen Webanwendungen, dem Browser und dem Netzwerk sitzt. Er läuft im Hintergrund und entscheidet, basierend auf der Konnektivität, Netzwerk- oder gecachte Inhalte bereitzustellen, was eine Verwaltung eines Offline-Erlebnisses ermöglicht.

Über diese drei Grundanforderungen hinaus wird es etwas unklarer. Als Alex Russell und Frances Berriman „Progressive Web App“ einführten und benannten, zählten sie zehn Attribute auf, die eine PWA charakterisieren – reaktionsschnell, konnektivitätsunabhängig, app-ähnlich, aktuell, sicher, auffindbar, wieder aktivierbar, installierbar und verlinkbar.

Dieses Konzept ist das entscheidende Puzzleteil in unserem Versuch, etwas zu schaffen, das die zuvor beschriebenen Probleme löst – dass die meisten bestehenden AAC-Lösungen unerschwinglich teuer sein können, begrenzte Sprachen anbieten oder in einem App Store oder auf einem proprietären Gerät stecken bleiben. Mit dem PWA-Ansatz können wir die Funktionen, die moderne Browser bieten – die Web Speech API, Internationalization API usw. – mit einem app-ähnlichen Erlebnis unabhängig vom Betriebssystem, unabhängig von zentralisierten App-Distributionsmethoden und mit Unterstützung für nahtlos fortgesetzte Offline-Nutzung verbinden.

Der aktuelle Stand des Webs bietet alle grundlegenden Zutaten, die wir benötigen, um eine inklusivere, breiter zugänglichere AAC-Lösung für Menschen auf der ganzen Welt zu entwickeln. Im Geiste des offenen Webs und mit großer Anerkennung für die Arbeit, die zur Kodifizierung von Webstandards geleistet wurde, wissen wir, dass eine kostenlose und offene Kommunikationslösung in Sicht ist.

Finden Sie das interessant? Wir laden Sie ein, einen Blick darauf zu werfen und vielleicht sogar als Mitwirkender mitzumachen!

Referenzen

• http://blog.teamtreehouse.com/getting-started-speech-synthesis-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/introducing-web-speech-api/
• https://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/
• https://hacks.mozilla.org/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